Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. Click for Documentation
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-*
ones to remove all background images and colors on any button.
Use the auxiliary classes to set the button sizes.
.btn-sm
, .btn-md
or .btn-lg
Block button to set Add Classes .btn-block
mail@example.com
Use the custom progress component to display simple or complex progress bars. We need inline css when using progress bars. Click for Documentation
.progress
as a wrapper to indicate the max value of the progress bar.
.progress-bar
to indicate the progress so far.
.progress-bar
requires an inline style, utility class, or custom CSS to set their width.
.progress-bar
also requires some role
and aria
attributes to make it accessible.
Add a .progress-bar-striped
class to a .progress-bar
to add a gradient line to the progress bar.
Add a .progress-bar-striped
class to a .progress-bar
to add a gradient line to the progress bar.
Add multiple progress bars into a progress component.
Insert text into the progress bar.
Insert text into the progress bar.
We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Learn more about pagination in Bootstrap Click Here
.pagination-seperate
.pagination-round
.pagination-fill-rounded
.pagination-primary
)
Class | Value |
---|---|
class="pagination pagination-[value]" |
primary | secondary | success | danger | warning | info | dark | purple | cyan | pink | brown |