3.4 KiB
| title |
|---|
| Buttons |
Buttons
The Bootstrap framework provides you with various styling options for buttons. These styles help you provide a visual representation to the user of what the button may do.
How To Use:
To use bootstrap buttons you follow the same steps that you would to create a button in HTML except you also apply the applicable CSS class to the button. A code example has been provided below.
Code Example:
<button type="button" class="btn btn-primary">Primary</button>
Primary
You can also use bootstrap buttons with the <a> and <input> elements as shown in the examples below.
<a class="btn btn-primary" href="#" role="button">This button is a link</a>
<input class="btn btn-primary" type="submit" value="Submit">
Bootstrap Button Class List:
This is a list of the CSS classes that bootstrap provides for buttons.
.btn This is bootstrap's basic button.
Basic
.btn-default This is bootstrap's default button.
Default
.btn-primary This is bootstrap's primary button.
Primary
.btn-success This is bootstrap's success button.
Success
.btn-info This is bootstrap's info button.
Info
.btn-warning This is bootstrap's warning button.
Warning
.btn-danger This is bootstrap's danger button.
Danger
.btn-link This is bootstrap's link button.
Link
.btn-light This is bootstrap's light button.
Light
Bootstrap Button Sizes:
This is a list of the CSS classes for different size of the buttons.
.btn-lg This is bootstrap's large button.
Large
.btn-sm This is bootstrap's small button.
Small
.btn-xs This is bootstrap's extra small button.
Extra Small
Bootstrap Outlined Buttons:
It is possible to also have outlined buttons rather than fully colored in ones. This is achieved by placing the mid fix outline between the button class you want. A sample usage would be as follows:
<button type="button" class="btn btn-outline-primary">Primary</button>
Outlined buttons are a part of Bootstrap since version 4, please be sure that you are using the right version if you are unable to get them work.
Note: Do not include the dot in the HTML Class Attribute, referring to the classes with a dot is only used when adjusting the classes in CSS.