You are currently viewing Bootstrap 4 classes list | New Bootstrap Classes | Responsive framework

Bootstrap 4 classes list | New Bootstrap Classes | Responsive framework


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…

bootstrap classes

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

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

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

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

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

That’s all.

Should you use bootstrap?

Are you looking for bootstrap ready templates? Here some experts ready to help you…

Leave a Reply