Bootstrap Buttons

Button Styles

There are 4 types of button style.

Example:-

 <button type="button" class="btn">Basic</button>
<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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>

Test it Now

Button classes can be used in different HTML elements.

1) <a> :- Use in Link

2) <button>:- Use in Button

3) <input>:- Use in Input

Example:-

 <a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

Test it Now

Bootstrap Button Sizes

Use the .btn-lg class for large buttons & use the .btn-sm class for small buttons.

Example:-

 <button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
 

Test it Now

Bootstrap Block Level Buttons

Use the .btn-blockclass for block level button.

Example:-

 <button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
 

Test it Now

Bootstrap Active/Disabled Buttons

Use the .active class for Active Button and use the .disabled class for Disable button

Example:-

 <button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
 

Test it Now

Next TopicBootstrap Button Groups

← prev next →

Bootstrap 4 Tuto

Bootstrap Buttons

Button Styles

Button classes can be used in different HTML elements.

Bootstrap Button Sizes

Bootstrap Block Level Buttons

Bootstrap Active/Disabled Buttons