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>
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 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.