How to Bootstrap- Responsive Buttons

The Bootstrap front-end framework provides an easy way to create and customize the buttons with its predefined styles and alignments. In this guide, we will learn about different types of Bootstrap responsive buttons and its customization flexibility.

 

Different Bootstrap Buttons

Bootstrap have many classes to style buttons, which are given in the following table with preview.

 

ClassPreviewDescription
.btn-defaultA Bootstrap Default button.
.btn-primaryA Bootstrap Primary button identifies the primary action in a set of buttons.
.btn-successIndicates a successful operation.
.btn-infoA Bootstrap button for informational alert messages.
.btn-warningIndicates caution should be taken with this action.
.btn-dangerIndicates a dangerous or a negative action.
.btn-linkIt look like a link while maintaining button behavior.

 

You can render those button using following code with the help of Bootstrap front-end framework.

Bootstrap Example
     <button  type="button"  class="btn  btn-default">Default</button>
     <button  type="button"  class="btn  btn-primary">Primary</button>
     <button  type="button"  class="btn  btn-info">Info</button>
     <button  type="button"  class="btn  btn-success">Success</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-link">Link</button>

 

Bootstrap Button Size

Bootstrap have options to scale a button up or down. You can make your buttons bigger or smaller through adding an extra Bootstrap class. Let’s look at the following table which demonstrates the Button size classes with preview.

 

ClassPreviewDescription
.btn-lg This makes the button size large.
.btn This makes the button with default size.
.btn-smThis makes the button size small.
.btn-xsThis makes the button size extra small.

 

You can render differently sized buttons using following code with the help of Bootstrap front-end framework.

Bootstrap Example
     <button  type="button"  class="btn  btn-default btn-lg">Large Button</button>
     <button  type="button"  class="btn  btn-default">Default Button</button>
     <button  type="button"  class="btn  btn-default btn-sm">Small Button</button>
     <button  type="button"  class="btn  btn-default btn-xs">Extra Small Button</button>

 

You can create buttons that cover the full width of the parent elements by adding an extra class .btn-blockwith Bootstrap framework.

Bootstrap Example
     <button  type="button"  class="btn  btn-default btn-lg btn-block">Default</button>

 

 

Bootstrap Button State

Bootstrap provides you to two states of buttons which are active and disabled. each of them are rendered using a bootstrap class .active and .disabled .  The following table will give you those classes and corresponding preview.

 

Button State classClasspreview
Normal-
Active.active
Disabled.disabled

 

You can achieve above states of Bootstrap buttons with following code.

Bootstrap Example
     <button  type="button"  class="btn  btn-default active">Active Button</button>
     <button  type="button"  class="btn  btn-default disabled">Disabled Button</button>

Anwar Yakkiparamban

Anwar Yakkiparamban is the founder of Lauyou Learning. Prior to Lauyou learning, Anwar worked at ARD Engineering & Development, Qatar. He holds bachelor degree in Electronics and Communication Engineering from Govt. Engineering College Idukki.

You may also like...