Bootstrap 4 Buttons
Bootstrap 4 buttons use btn plus a contextual style. Outline, size and block utilities can be combined.
Button Styles Top ↑
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>
Outline Buttons Top ↑
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
Sizes and Block Buttons Top ↑
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-info btn-block">Block button</button>
Bootstrap 4 Button Generator →
Original Source Examples Retained for Migration Reference Top ↑
These original examples are preserved so no learner-purpose code is silently dropped. The current examples above are the recommended implementation for this page.
Original example 1
<a href=site_map.php class='btn btn-outline-info'>Jquery Home</a>Original example 2
<button type='button' class='btn btn-primary'>Primary</button>
<button type='button' class='btn btn-secondary'>Secondary</button>
<button type='button' class='btn btn-success'>Success</button>
<button type='button' class='btn btn-danger'>Danger</button>
<button type='button' class='btn btn-warning'>Warning</button>
<button type='button' class='btn btn-info'>Info</button>
<button type='button' class='btn btn-light'>Light</button>
<button type='button' class='btn btn-dark'>Dark</button>
<button type='button' class='btn btn-link'>Link</button>Original example 3
<a href=site_map.php class='btn btn-primary'>Home </a>
<a href=site_map.php class='btn btn-secondary'>Secondary</a>
<a href=site_map.php class='btn btn-success'>Success</a>
<a href=site_map.php class='btn btn-danger'>Danger</a>
<a href=site_map.php class='btn btn-warning'>Warning</a>
<a href=site_map.php class='btn btn-info'>Info</a>
<a href=site_map.php class='btn btn-light'>Light</a>
<a href=site_map.php class='btn btn-dark'>Dark</a>
<a href=site_map.php class='btn btn-link'>Link</a>Original example 4
<button type='button' class='btn btn-outline-primary'>Primary</button>
<button type='button' class='btn btn-outline-secondary'>Secondary</button>
<button type='button' class='btn btn-outline-success'>Success</button>
<button type='button' class='btn btn-outline-danger'>Danger</button>
<button type='button' class='btn btn-outline-warning'>Warning</button>
<button type='button' class='btn btn-outline-info'>Info</button>
<button type='button' class='btn btn-outline-light'>Light</button>
<button type='button' class='btn btn-outline-dark'>Dark</button>Original example 5
<a href=site_map.php class='btn btn-outline-primary'>JQuery Home</a>Original example 6
<button type='button' class='btn btn-danger btn-lg'>Large button</button>Original example 7
<button type='button' class='btn btn-warning btn-sm'>Small button</button>Original example 8
<button type='button' class='btn btn-primary btn-lg btn-block'>Block level</button>Original example 9
<button type='button' class='btn btn-danger' disabled>I am Disabled </button>Additional Original Learning Routes Top ↑
Continue Learning jQuery
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Connect:
This article is written by plus2net.com team.
