[pvcp_1]
Bootstrap classes list:
Bootstrap is an open-source CSS framework, it helps us to build a responsive layout. We don’t need to write multiple lines in our source code. Just put a bootstrap classes and everything will come responsive. I have listed all of the bootstrap classes which will definitely help you while building the bootstrap template.
Bootstrap CDN links: Click here…
1- The first bootstrap table is related to set the text box, button modifier, button group, buttons outline.
Bootstrap Classes Table
Text Box | Button Modifier | Button Group | Button Outline |
text-primary | btn-lg | btn-group | btn-outline-primary |
text-secondary | btn-sm | btn-group-lg | btn-outline-secondary |
text-success | btn-block | btn-group-sm | btn-outline-success |
text-info | active-button | btn-group-vertical | btn-outline-info |
text-warning | disable-button | btn-group(nested) | btn-outline-warning |
text-danger | checkbox as button | btn-toolbar | btn-outline-danger |
text-light | radio as button | btn-outline-light | |
text-dark | btn-outline-dark | ||
text-white |
2- The second bootstrap table is related to set the badge, alert-box, bg color or background color, buttons.
Bootstrap Classes Table
Badge | Alerts Box | Bg Color (Background Change) | Button |
badge | alert-primary | bg-primary | btn-primary |
Badge-pill | alert-secondary | Bg-secondary | btn-secondary |
badge-success | alert-light | bg-success | btn-success |
badge-info | alert-dark | bg-info | btn-info |
badge-warning | alert-link | bg-warning | btn-warning |
badge-danger | alert-dismissible | bg-danger | btn-danger |
badge-light | alert-heading | bg-light | btn-light |
badge-primary | alert-success | bg-dark | btn-dark |
badge-secondary | alert-info | bg-link | btn-link |
alert-warning | |||
alert-danger |
3- The third bootstrap table is related to set the list group, tables, button groups, navbar.
Bootstrap Classes Table
List Group | Table | Button Group | Navbar |
list-group | table | btn-group | navbar |
list-group-item active | thead-light | btn-group-lg | navbar-brand |
list-group-item disabled | thead-dark | btn-group-sm | navbar with form |
list-group-item-action | table-stripped | btn-group-vertical | navbar-text |
list-group-item-primary | table-bordered | btn-group (nested) | navbar-dark bg-dark |
list-group-item-secondary | table-borderless | btn-toolbar | navbar-light |
list-group-item-success | table-hover | navbar fixed-top | |
list-group-item-info | table-sm | navbar fixed-bottom | |
list-group-item-warning | table-*-responsive | navbar sticky-top | |
list-group-item-danger | table-reflow | collapse navbar-collapse | |
table-active | navbar-toggler | ||
table-primary | |||
table-secondary | |||
table-success | |||
table-info |
4- The fourth bootstrap table is related to set the forms, utility display, button groups, form inputs.
Bootstrap Classes Table
Form | Utility Display | Button Group | Form Input |
form-group | d-*-block | btn-group | input-group |
form-inline | d-*-flex | btn-group-lg | input-group-prepend |
form using the grid | d-*-inline | btn-group-sm | input-group-append |
form-control | d-*-inline-block | btn-group-vertical | input-group-sm |
form-control-lg | d-*-inline-flex | btn-group (nested) | input-group-lg |
form-control-sm | d-*-none | btn-toolbar | checkbox |
form-control-file | d-*-table | radio | |
form-control-plaintext | d-*-table-cell | dropdown | |
form-control-range | |||
form-check | |||
form-check-inline |
5- The fifth bootstrap table is related to set the modal box, carousel, cards, Misccelenous.
Bootstrap Classes Table
Modal | Carousel | Cards | Misc |
modal | carousel slide | card | close |
modal-dialog-centered | carousel-fade | card-body | embed-responsive |
modal-dialog-scrollable | carousel-indicators | card-title | shadow-none |
modal-fade | carousel-caption | card-subtitle | shadow-sm |
modal-lg | card-text | shadow | |
modal-sm | card-link | shadow-lg | |
modal-xl | card-img-top | invisible | |
middle image | visible | ||
card-img-bottom |
That’s all.
Are you looking for bootstrap ready templates? Here some experts ready to help you…