bootstrap button

bootstrap button

0
427

One of the most interesting part of web application are its buttons the need for bootstrap button.

Nowadays most web application uses bootstrap to style its theme , 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 CLASS

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

BOOTSTRAP BUTTON TAGS

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

BOOTSTRAP OUTLINE BUTTON

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here