41ec1afcad
* Added Disabled Bootstrap Button State Disabled Button State to show that the button is not to be clicked at that point of time * fix: formatting/spelling and removed duplicate link
3.7 KiB
title
| 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>
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 Bootstrap's basic button.
<button type="button" class="btn">Basic</button>
.btn-primary Bootstrap's primary button.
<button type="button" class="btn btn-primary">Primary</button>
.btn-secondary Bootstrap's secondary button.
<button type="button" class="btn btn-secondary">Secondary</button>
.btn-success Bootstrap's success button.
<button type="button" class="btn btn-success">Success</button>
.btn-info Bootstrap's info button.
<button type="button" class="btn btn-info">Info</button>
.btn-warning Bootstrap's warning button.
<button type="button" class="btn btn-warning">Warning</button>
.btn-danger Bootstrap's danger button.
<button type="button" class="btn btn-danger">Danger</button>
.btn-link Bootstrap's link button.
<button type="button" class="btn btn-link">Link</button>
.btn-light Bootstrap's light button.
<button type="button" class="btn btn-light">Light</button>
.btn-dark Bootstrap's dark button.
<button type="button" class="btn btn-dark">Dark</button>
Bootstrap Button Sizes:
This is a list of the CSS classes for different size of the buttons.
.btn-lg Bootstrap's large button.
<button type="button" class="btn btn-lg">Large</button>
.btn-md This is bootstrap's medium button.
<button type="button" class="btn btn-md">Medium</button>
.btn-sm Bootstrap's small button.
<button type="button" class="btn btn-sm">Small</button>
.btn-xs This is bootstrap's extra small button.
<button type="button" class="btn btn-xs">Extra Small</button>
.btn-block This is bootstrap's full width button.
Block
Bootstrap Disabled Button State
This is used to show that the button is disabled by fading the button. This can be achieved through adding "disabled" to the <button> tag.
Primary button
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 to 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.