4.3 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>
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. They give the background color to the buttons.
.btn This is bootstrap's basic button. It is a prerequisite if you want other bootstrap buttons to work properly.
<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>
.btn-dark This is bootstrap's dark button.
Dark
.btn-secondary This is bootstrap's secondary button.
Secondary
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-md This is bootstrap's medium button.
Medium
.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
.btn-block This is bootstrap's block level button. They actually span the entire width of their parent element. For example, a form element with a width of 200px, that means the btn-block button would have a width of 200px.
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 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.