Bootstrap | Buttons

Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial guide, we are going to be discussing about the usage of Bootstrap buttons.

Anything given a class .btn will inherit the default look of a gray button with rounded corners. However, Bootstrap provides some options for styling of buttons. The following table below summarizes these options -

Sr.No.	Class & Description
1	btn Default/ Standard button.
2	btn-primary Provides extra visual weight and identifies the primary action in a set of buttons.
3	btn-success Indicates a successful or positive action.
4	btn-info Contextual button for informational alert messages.
5	btn-warning Indicates caution should be taken with this action.
6	btn-danger Indicates a dangerous or potentially negative action.
7	btn-link Deemphasize a button by making it look like a link while maintaining button behavior.

Example

The following example below demonstrates all the above button classes -

<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link</button>

Output

When the above example is executed, it will produce the following result -

     

Button Size

Following table summarizes classes used to get buttons of various sizes -

Sr.No.	Class & Description
1	.btn-lg This makes the button size large.
2	.btn-sm This makes the button size small.
3	.btn-xs This makes the button size extra small.
4	.btn-block This creates block level buttons—those that span the full width of a parent.

Example

The following example demonstrates all the above classes -

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Large Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg">
      Large button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary">
      Default size Primary button
   </button>
   
   <button type = "button" class = "btn btn-default">
      Default size button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-sm">
      Small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-sm">
      Small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-xs">
      Extra small Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-xs">
      Extra small button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg btn-block">
      Block level Primary button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg btn-block">
      Block level button
   </button>
</p>

Output

When the above example is executed, it will produce the following result -

        

READ: Bootstrap | Forms

Button State

Bootstrap provides classes which allow you change the state of buttons as either active, disabled etc. We are going to be discussing about each of these classes in the sections below.

Active State

Buttons in Bootstrap appears pressed (with a darker background, darker border and inset shadow) when active.

Following table below summarizes classes used to make button and anchor elements active -

Element	Class
Button element	Use .active class to show that it is activated.
Anchor element	Use .active class to <a> buttons to show that it is activated.

Example

The following example demonstrates the above classes -

<p>
   <button type = "button" class = "btn btn-default btn-lg ">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg active">
      Active Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg active">
      Active Primary button
   </button>
</p>

Output

When the above example is executed, it will produce the following result -

   

Disabled State

When you disable a button, it fades in color by 50%, and loose the gradient.

Following table below summarizes classes used to make button elements and anchor elements disabled -

Element	Class
Button element	Add the disabled attribute to <button> buttons.
Anchor element	Add the disabled class to <a> buttons. Note − This class will only change the <a>'s appearance, not its functionality. You need to use custom JavaScript to disable links here.

Example

Following example demonstrates the above classes -

<p>
   <button type = "button" class = "btn btn-default btn-lg">
      Default Button
   </button>
   
   <button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
      Disabled Button
   </button>
</p>

<p>
   <button type = "button" class = "btn btn-primary btn-lg">
      Primary button
   </button>
   
   <button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
      Disabled Primary button
   </button>
</p>

<p>
   <a href = "#" class = "btn btn-default btn-lg" role = "button">
      Link
   </a>
   
   <a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
      Disabled Link
   </a>
</p>

<p>
   <a href = "#" class = "btn btn-primary btn-lg" role = "button">
      Primary link
   </a>
   
   <a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
      Disabled Primary link
   </a>
</p>

Output

When the above example is executed, it will produce the following result -

      

Button Tags

You may use button classes with < button>, <a>, or <input> element. We recommended you use it with <button> elements mostly to avoid cross browser inconsistency issues.

Example

Following below is a simple example -

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

Output

When the above example is executed, it will produce the following result -

Link   

READ: Bootstrap | Tables

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Images.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.