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.