bootstrap button classes

bootstrap button

bootstraping your web application button
bootstraping your web application button

bootstrap button classes is One of the most interesting part of web application.

Nowadays most web application buttons uses bootstrap to style its theme , bootstrap button hence i wrote this article on bootstrapping your web application button. The use of the bootstrap button in your project best portray certain purpose of need to users based on it color and appearance.


Bootstrap button has basically two categories of class as listed below

List 1.1: bootstrap define classes

  • the predefined class name  .btn
  • the defining class name .btn-*
    List 1.2 : list of bootstrap button defining class names

      • .btn-primary
      • .btn-secondary
      • .btn-success
      • .btn-danger
      • .btn-warning
      • .btn-info
      • .btn-light
      • .btn-dark
      • .btn-link


The following below are the html tags in which you can include bootstrap button class into.

list 2.1: bootstrap button tags

  •  <a>
  •  <input>
  •  <button>

Explanation 1.0 : bootstrap button tags

On line 1 on the above code observe that bootstrap button is <button> while on line 2 the tag was <input>  type=”button” then on the line 3 the tag is <a> with role=”button” while on line 4 and 5 the bootstrap button tag used was <input> type=”submit” and type=”reset”

Bootstrap button is basically made up of 9(Nine) different appearance especially in color see example below.

Explanation 1.1: Bootstrap buttons example 1.1

From the above code example 1.1,  line 1 displays the first button labelled Primary among the set of button in Result 1.1.

Notice that in the class [ class=”btn btn-primary”] of that button labelled primary we have a predefined css class name .btn then a class name .btn-primary name that defines the button color and appearance.

finally from the above result 1.1 on this page you will understand from the explanation that each button has its own appearance or color defining class name .btn-* after the main predefining class name  .btn in above code example 1.1.

In conclusion Bootstrap have only 9(nine) different class name  .btn-* for defining a button after the main predefining class name  .btn that gives the button different colors or appearance. see list 1.2 above


When you need a button made in bootstrap to be like a wire-frame like button without any solid background as shown in our previous example 1.1 while using this [ class=”btn btn-primary” ] to make a bootstrap outline button is quite simple just include outline in the class so the code looks like this  class=”btn btn-outline-primary” .

List 3.1 : List of bootstrap outline button class names

  • .btn-outline-primary
  • .btn-outline-secondary
  • .btn-outline-success
  • .btn-outline-danger
  • .btn-outline-warning
  • .btn-outline-info
  • .btn-outline-light
  • .btn-outline-dark
  • .btn-outline-link


Please enter your comment!
Please enter your name here