Bootstrap Buttons

Bootstrap provides several button styling options out of the box. Without bootstrap you would have to write large css and JS code in order to style buttons in a similar way. There are seven bootstrap buttons classes which can be used to style buttons in CSS they are as follows.

  • btn-default
  • btn-primary
  • btn-success
  • btn-info
  • btn-warning
  • btn-danger
  • btn-link

Each of the above class gives a specific style to the button element. In the last article we saw how alerts are styled. Four the button styles are similar to that. The “btn-success” class styles button with green background. “btn-info” styles the button with light blue background. Similarly “btn-warning” generates a light yellow button. Likewise, “btn-danger” class adds red background to a button. Apart from that “btn-default”, “btn-primary” and “btn-link” adds white, blue and link style backgrounds to the buttons. Take a look at the following example to see these buttons in action.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
        <button type="button" class="btn btn-success">Button Success</button>
        <button type="button" class="btn btn-info">Button Info</button>
        <button type="button" class="btn btn-warning">Button Warning</button>
        <button type="button" class="btn btn-default">Button Next</button>
        <button type="button" class="btn btn-primary">Button Primary</button>
        <button type="button" class="btn btn-danger">Button Danger</button>
        <button type="button" class="btn btn-link">Link Style</button>

    </body>

</html>

Download the code
Try the code

When you open the above page, you should see all the seven types of button appear on the webpage. The button classes are applicable to “a”, “button” and “input” type elements.

Bootstrap Buttons Size

You can also change the size of bootstrap buttons using lg, md, sm and xs classes. For instance, to create a large button, simply add “btn-lg” class to the button. Remember these classes are similar to what we used for creating grid columns for different screen sizes. In that case we used col-md-X etc. To see different buttons sizes in action, take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
        <button type="button" class="btn btn-success btn-lg">Button Success</button>
         <button type="button" class="btn btn-success btn-md">Button Success</button>
         <button type="button" class="btn btn-success btn-sm">Button Success</button>
         <button type="button" class="btn btn-success btn-xs">Button Success</button>
       
       

    </body>

</html>

Download the code
Try the code

Block Level Bootstrap Buttons

You can also create buttons in bootstrap that take whole width of the parent element. Such buttons are called block level buttons. To declare a button as block level, add “btn-block” class to the button. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>
        <button type="button" class="btn btn-success btn-block">Button Success</button>
         <button type="button" class="btn btn-primary btn-block">Button Primary</button>

    </body>

</html>

Download the code
Try the code

<<< Bootstrap AlertsBootstrap Button Groups >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .