Bootstrap 4 classes list | New Bootstrap Classes | Responsive framework

[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