Bootstrap Buttons Tutorial

View more Tutorials:

1- Bootstrap Button

Bootstrap has built in some Css classes to create a Button, with a few styles for different contextual purposes, including the main class:  .btn, and some additional classes to set color, size, status ...
Simple Button
<button class="btn">Simple Button</button>
There are several additional Css classes to set up color for the Button, or make the Button display as a Link. You can use it in different contexts.
  • btn-primary
  • btn-secondary
  • btn-success
  • btn-danger
  • btn-warning
  • btn-info
  • btn-light
  • btn-dark
  • btn-link
<!DOCTYPE html>
      <meta charset="utf-8">
      <title>Button Example</title>
      <link rel="stylesheet" href="">

      <div class="container mt-3">
         <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>

      <script src=""></script>
      <script src=""></script>
      <script src=""></script>
.btn, .btn- * classes are designed for < button> tags, however, you can also use them for <a>, <input>, <div>, <span> tags, although it may display slightly different for different browsers.
Note: If you want to create a Button with the tags other than <button> tags, you should use the role = "button" attribute. This attribute is useful hint for the device such as Screen Reader. (the screen reading device for the blind).
<a class="btn btn-primary m-1" href="#" role="button">Button (A tag)</a>
<button class="btn btn-primary m-1" type="submit">Button (Button tag)</button>
<div class="btn btn-primary m-1" role="button">Button (Div tag)</div>
<span class="btn btn-primary m-1" role="button">Button (Span tag)</span>

2- Outline buttons

In the  BootstrapButton is defaulted to have background color. If you want to have a simple  Button without background color, please use  .btn-outline-* classes.
outline buttons
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-light">Light</button>
<button class="btn btn-outline-dark">Dark</button>

3- Size of Button

By default, the Buttons in the Bootstrap have a medium size. Use the . btn-sm class if you want to have a button with smaller size. Use the . btn-lg class if you want to have a Button with greater size.
<button class="btn btn-sm">Small Size .btn-sm</button>
<button class="btn btn-md">Medium Size .btn-md (Default)</button>
<button class="btn">(Default)</button>
<button class="btn btn-lg">Large Size .btn-lg</button>
The  .btn-block class helps the width of Button to fill the width of parent element.
<button class="btn btn-primary btn-block">.btn-block</button>
<button class="btn btn-block btn-warning">.btn-block</button>

4- Active & disabled status


Use the  .active class to makea  Button to have the status like it is active. For  Bootstrap, a  Button in  "active" status will have darker color than it in normal status.
You can view the following figure to find the difference between a  Button in active status and it in normal status:
<button class="btn btn-primary active">.btn-primary .active</button>
<button class="btn btn-primary">.btn-primary</button>
<button class="btn btn-outline-primary active">.btn-outline-primary .active</button>
<button class="btn btn-outline-primary">.btn-outline-primary</button>
<button class="btn btn-success active">.btn-succes .active</button>
<button class="btn btn-success">.btn-succes</button>
<button class="btn btn-outline-success active">.btn-outline-success .active</button>
<button class="btn btn-outline-success">.btn-outline-success</button>


Using the  .disabled class to disable a  Button, an user will not be able to interact with this  Button.
<button class="btn btn-primary disabled">.btn-primary .disabled</button>
<button class="btn btn-primary">.btn-primary</button>
<button class="btn btn-outline-primary disabled">.btn-outline-primary .disabled</button>
<button class="btn btn-outline-primary">.btn-outline-primary</button>
<button class="btn btn-success disabled">.btn-succes .disabled</button>
<button class="btn btn-success">.btn-succes</button>
<button class="btn btn-outline-success disabled">.btn-outline-success .disabled</button>
<button class="btn btn-outline-success">.btn-outline-success</button>

View more Tutorials: