Bootstrap Classes

Bootstrap is a CSS framework that uses classes for its design. Here is a comprehensive list of all classes’ names with descriptions, and examples.

---

---

Bootstrap Alert Classes

Bootstrap Alert is added to provide notification to users. Here are all the classes used with components.

Class name	Description	Example
alert-primary	Adds special blue alert to the prompt alert requiring user action	Try it Editor
alert-secondary	This specific class adds grey color to the alert content	Try it Editor
alert-success	Green box alert offering a success in the action like form submission	Try it Editor
alert-info	Indicates a teal color alert showing neutral changes in action	Try it Editor
alert-warning	Caution yellow alert for threatened action	Try it Editor
alert-danger	Indicates dangerous red alert implying negative action	Try it Editor
alert-light	Light Grey alert box for light affect of the whole action	Try it Editor
alert-dark	Dark Grey alert box for dark affect of the whole action	Try it Editor
alert-link	Given to Links inside alert box for color matching inside it	Try it Editor
alert-dismissible	Closable alert box with special close class for desired affect	Try it Editor
alert-heading	This Specific class adds color:inherit to the whole alert heading	Try it Editor

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Alert Classes” width=”” colwidth=”” colalign=”” border=”1″]
,,
, ,
alert-primary , Adds special blue alert to the prompt alert requiring user action, Try it Editor
alert-secondary, This specific class adds grey color to the alert content, Try it Editor
alert-success , Green box alert offering a success in the action like form submission, Try it Editor
alert-info , Indicates a teal color alert showing neutral changes in action, Try it Editor
alert-warning , Caution yellow alert for threatened action , Try it Editor
alert-danger , Indicates dangerous red alert implying negative action, Try it Editor
alert-light , Light Grey alert box for light affect of the whole action, Try it Editor
alert-dark , Dark Grey alert box for dark affect of the whole action, Try it Editor
alert-link , Given to Links inside alert box for color matching inside it, Try it Editor
alert-dismissible , Closable alert box with special close class for desired affect, Try it Editor
alert-heading , This Specific class adds color:inherit to the whole alert heading, Try it Editor
close , This Class styles the close button on top right alert box with font size and color ,Try it Editor
[/table]

---

Bootstrap Badge Classes

Here are the all classes used with specific bootstrap badge with their description.

Class name	Description	Example
badge	These are small icon form information attached to the navigation items like unread items	Try it Editor
badge-pill	Incorporates special pill design to the badges	Try it Editor
badge-primary	Adds primary(blue) Color to badges design	Try it Editor
badge-secondary	Adds secondary(Grey) Color to badges design	Try it Editor
badge-success	Adds success(Green) Color to badges design	Try it Editor
badge-info	Adds info(light-blue) Color to badges design	Try it Editor
badge-warning	Adds warning(yellow) Color to badges design	Try it Editor
badge-danger	Adds danger(red) Color to badges design	Try it Editor
badge-light	Adds light Color to badges design	Try it Editor
badge-dark	Adds dark Color to badges design	Try it Editor

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Badge Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class name, Description, Example
badge, These are small icon form information attached to the navigation items like unread items, Try it Editor
badge-pill, Incorporates special pill design to the badges, Try it Editor
badge-primary , Adds primary(blue) Color to badges design ,Try it Editor
badge-secondary , Adds secondary(Grey) Color to badges design, Try it Editor
badge-success , Adds success(Green) Color to badges design, Try it Editor
badge-info , Adds info(light-blue) Color to badges design, Try it Editor
badge-warning , Adds warning(yellow) Color to badges design, Try it Editor
badge-danger , Adds danger(red) Color to badges design, Try it Editor
badge-light , Adds light Color to badges design, Try it Editor
badge-dark , Adds dark Color to badges design, Try it Editor
[/table]

---

Bootstrap Breadcrumbs Classes

Here are the important classes used with Bootstrap breadcrumbs.

class name	Description	Example
breadcrumb	These are used to add URL path and their specific design to the layout	Try it Editor
breadcrumb-item	These are used to add specific style to the links or items inside breadcrumbs	Try it Editor

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Breadcrumbs Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
breadcrumb ,These are used to add URL path and their specific design to the layout ,Try it Editor
breadcrumb-item ,These are used to add specific style to the links or items inside breadcrumbs,Try it Editor
[/table]

---

Bootstrap Button Classes

These are the all values used while using buttons in Bootstrap web layouts.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Button Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
btn, This specific class set the standard design button with gray background and rounded corners,Try it Editor
btn-primary,Adds primary(blue) Color to button design,Try it Editor
btn-secondary,Adds secondary(Grey) Color to button design,Try it Editor
btn-success,Adds success(Green) Color to button design,Try it Editor
btn-info,Adds info(light-blue) Color to button design,Try it Editor
btn-warning,Adds warning(yellow) Color to button design,Try it Editor
btn-danger,Adds danger(red) Color to button design,Try it Editor
btn-light,Adds light Color to button design,Try it Editor
btn-dark,Adds dark Color to badges design,Try it Editor
btn-link,This integrated link behaviour within Button,Try it Editor
btn-outline-primary,Adds primary(blue) Color to button outline design,Try it Editor
btn-outline-secondary,Adds secondary(Grey) Color to button Outline design,Try it Editor
btn-outline-success,Adds success(Green) Color to button outline design,Try it Editor
btn-outline-info,Adds info(light-blue) Color to button outline design,Try it Editor
btn-outline-warning,Adds warning(yellow) Color to button outline design,Try it Editor
btn-outline-danger,Adds danger(red) Color to button outline design,Try it Editor
btn-outline-light,Adds light Color to button outline design,Try it Editor
btn-outline-dark,Adds dark Color to button outline design,Try it Editor
Button Groups Classes
btn-group,This Class groups together button within single element,Try it Editor
btn-group-lg,Group of buttons in large size,Try it Editor
btn-group-sm,Button group with small sizes,Try it Editor
btn-group-vertical,This class stacks button vertically in Group,Try it Editor
btn-group (nested),,Try it Editor
btn-toolbar,This creates row of buttons in a similar pagination style,Try it Editor
Button Modifiers
btn-lg,This sets the button size to be large,Try it Editor
btn-sm,This sets the button size to be small,Try it Editor
btn-block,This sets the default inline buttons to behave as block elements,Try it Editor
.active,This makes the button look pressed as in active state,Try it Editor
.disabled,This makes the button look pressed as in disable state,Try it Editor
checkbox as button,Using buttons as Checkbox,Try it Editor
radio as button,Using Buttons as Radio,Try it Editor
[/table]

---

Bootstrap 4 Card Classes

Find all important bootstrap 4 Card classes to be used with specific web designs.

Class name	Description	Example
card	This sets the design of the Bootstrap card to be integrated with web layout	Try it Editor
card-body	This is the firs child element inside the main card class	Try it Editor
card-title	Signifies the title of the whole card with proper alignment	Try it Editor
card-subtitle	Signifies the sub-title of the whole card with proper alignment	Try it Editor
card-text	Signifies the text characteristics of the card	Try it Editor
card-link	Signifies the links inside the card	Try it Editor
card-img	This adds image in the respective card design	Try it Editor
card-img-top	This adds the image on top of the card	Try it Editor
card-img-bottom	This adds the image on bottom of the card	Try it Editor
card-img-overlay	This adds the background image on the card as overlay	Try it Editor
card-header	This makes a header area inside the card	Try it Editor
card-header-pills	adding pills design in card header	Try it Editor
card-header-tabs	adding tabs design in card header	Try it Editor
h*.card-header	Special card additional to above the card section	Try it Editor
card-inverse	This inverse the default colors with light text on dark background color	Try it Editor
card-footer	This Signifies the footer section of the card	Try it Editor
card-group	This elements groups together multiple cards in one go	Try it Editor
card-deck	These are card groups with equal height and width	Try it Editor
card-columns	This signifies the wrapping around the card column	Try it Editor

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Card Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name, Description, Example
card , This sets the design of the Bootstrap card to be integrated with web layout, Try it Editor
card-body , This is the firs child element inside the main card class, Try it Editor
card-title , Signifies the title of the whole card with proper alignment, Try it Editor
card-subtitle , Signifies the sub-title of the whole card with proper alignment, Try it Editor
card-text , Signifies the text characteristics of the card, Try it Editor
card-link , Signifies the links inside the card, Try it Editor
card-img , This adds image in the respective card design, Try it Editor
card-img-top , This adds the image on top of the card, Try it Editor
card-img-bottom , This adds the image on bottom of the card, Try it Editor
card-img-overlay , This adds the background image on the card as overlay, Try it Editor
card-header , This makes a header area inside the card, Try it Editor
card-header-pills , adding pills design in card header, Try it Editor
card-header-tabs , adding tabs design in card header, Try it Editor
h*.card-header , Special card additional to above the card section, Try it Editor
card-inverse , This inverse the default colors with light text on dark background color, Try it Editor
card-footer , This Signifies the footer section of the card, Try it Editor
card-group , This elements groups together multiple cards in one go, Try it Editor
card-deck , These are card groups with equal height and width, Try it Editor
card-columns , This signifies the wrapping around the card column, Try it Editor

[/table]

---

Bootstrap 4 Dropdown Classes

These are the main classes with their respective description used with Bootstrap 4 dropdown.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Dropdown Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
dropdown,This Sets the whole dropdown to be used within the web layout,Try it Editor
dropdown-menu,Sets the whole menu arrangements with in dropdown,Try it Editor
dropdown-menu-right,Sets the right menu alignment,Try it Editor
dropdown-header,Sets the separate header section within dropdown,Try it Editor
dropdown-toggle,Sets the dropdown to be used as toggle,Try it Editor
dropdown-divider,Sets the horizontal line,Try it Editor
dropdown-item,This sets the every item inside the dropdown menu,Try it Editor
dropdown-item-text,This sets the text item inside the dropdown menu,Try it Editor
dropdown-item active,This Sets the item to highlighted in blue color, Try it Editor
dropdown-item disabled,This sets the item to be dull grey with unclickable state,Try it Editor
dropdown-toggle-split,This shows the separation between the dropdoown button and clickable area separately,Try it Editor
dropup,Displays the menu above the button rather than below,Try it Editor
dropright,Displays the dropup menu right side of the button,Try it Editor
dropleft,Displays the dropup menu left side of the button,Try it Editor
[/table]

---

Bootstrap 4 Form Classes

These are the various classes used for Bootstrap form and its validation within web layouts designed with this comprehensive framework.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Form Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
form-group,This sets the container for form and various elements to be used within ,Try it Editor
form-inline,,Try it Editor
form using the grid,,Try it Editor
form-control,,Try it Editor
form-control-lg,,Try it Editor
form-control-sm,,Try it Editor
form-control-file,,Try it Editor
form-control-plaintext,,Try it Editor
form-control-range,,Try it Editor
form-check,,Try it Editor
form-check-inline,,Try it Editor
disabled items,,Try it Editor
readonly,,Try it Editor
Form Input Groups,,Try it Editor
input-group,,Try it Editor
input-group-prepend,,Try it Editor
input-group-append,,Try it Editor
input-group-sm,,Try it Editor
input-group-lg,,Try it Editor
checkbox,,Try it Editor
radio,,Try it Editor
dropdown,,Try it Editor
segmented buttons,,Try it Editor
Custom Forms,,Try it Editor
custom-checkbox,,Try it Editor
custom-radio,,Try it Editor
custom-select,,Try it Editor
custom-file,,Try it Editor
custom-range,,Try it Editor
[/table]

---

Bootstrap 4 Grid Classes

These are the various Bootstrap Grid row and Bootstrap column classes used for separating the web design accordingly.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Grid Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
container,This sets the main container of the web layout with fixed width and corresponding margins,Try it Editor
container-fluid,,Try it Editor
row,,Try it Editor
col-# ( <576px),,Try it Editor col-sm-# ( ≥576px),,Try it Editor col-md-# ( ≥768px),,Try it Editor col-lg-# ( ≥992px),,Try it Editor col-xl-# ( ≥1200px),,Try it Editor col,,Try it Editor col-*,,Try it Editor no-gutters,,Try it Editor offset-*-#,,Try it Editor order-#,,Try it Editor nested columns,,Try it Editor [/table]

---

Bootstrap 4 Image Classes

Find all the important classes used with Bootstrap Images

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Image Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
img-fluid,This specific add responsive css to the image with max-width:100% and height:auto,Try it Editor
img-thumbnail,,Try it Editor
[/table]

---

Bootstrap 4 Jumbotron Classes

Learn all the classes used with jumbotron in Bootstrap with specific examples.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Image Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
jumbotron,This sets the specific design structure of Jumbotron to the web layout,Try it Editor
jumbotron-fluid,,Try it Editor
[/table]

---

Bootstrap 4 List Group Classes

Here are all the various classes used with Bootstrap List elements.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap List Group Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
list-group,This CSS when used creates list group of li elements to be used within web layout,Try it Editor
list-group-item active,,Try it Editor
list-group-item disabled,,Try it Editor
list-group-item-action,,Try it Editor
list-group-item-primary,Adds primary(blue) Color to list design,Try it Editor
list-group-item-secondary,Adds secondary(Grey) Color to list design,Try it Editor
list-group-item-success,Adds success(Green) Color to list design,Try it Editor
list-group-item-info,Adds info(light-blue) Color to list design,Try it Editor
list-group-item-warning,Adds warning(yellow) Color to list design,Try it Editor
list-group-item-danger,Adds danger(red) Color to list design,Try it Editor
list-group-item-light,Adds light Color to list design,Try it Editor
list-group-item-dark,Adds dark Color to list design,Try it Editor
list-group with badges,,Try it Editor
list-group with d-flex,,Try it Editor
[/table]

---

Bootstrap Media Objects Classes

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Media Objects Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
media,To be used for aligning media elements like images and videos with the content,Try it Editor
nested media,,Try it Editor
d-flex align-self-start,,Try it Editor
d-flex align-self-center,,Try it Editor
d-flex align-self-end,,Try it Editor
right aligned media,,Try it Editor
[/table]

---

Bootstrap 4 Modal Classes

Check out these important values to be used with Bootstrap modal and get the right behaviour for this important component.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Modal Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
modal,This sets the whole modal popup design to be integrated with in the layout,Try it Editor
modal-dialog-centered,,Try it Editor
modal fade,,Try it Editor
modal-lg,,Try it Editor
modal-sm,,Try it Editor
[/table]

---

Bootstrap 4 Nav Classes

Learn all important Bootstrap 4 Nav Pills and tabs classes to be used in the page navigation accordingly.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Nav Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
ul.nav,This starts the whole navigation structure to be integrated within the whole layout,Try it Editor
nav.nav,,Try it Editor
nav justify-content-*,,Try it Editor
nav flex-column,,Try it Editor
nav-tabs,,Try it Editor
nav-pills,,Try it Editor
nav-fill,,Try it Editor
nav-justified,,Try it Editor
nav with flex utils,,Try it Editor
nav-tabs with dropdown,,Try it Editor
nav-pills with dropdown,,Try it Editor
[/table]

---

Bootstrap Navbar Classes

These are the various classed used with Bootstrap Navbar classes to get desired design accordingly.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Breadcrumbs Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
navbar,This specific sets the navigation bar of the whole menu in the layout,Try it Editor
navbar-brand,,Try it Editor
navbar with form,,Try it Editor
navbar-text,,Try it Editor
navbar-dark bg-dark,,Try it Editor
navbar-light,,Try it Editor
navbar fixed-top,,Try it Editor
navbar fixed-bottom,,Try it Editor
navbar sticky-top,,Try it Editor
collapse navbar-collapse,,Try it Editor
navbar-toggler,,Try it Editor
navbar-expand-*,,Try it Editor
[/table]

---

Bootstrap 4 Pagination Classes

These are the specific classes used with Bootstrap pagination to make it accustomed to the design of the web elements.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Pagination Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
pagination,This sets the pagination of the corresponding number of pages,Try it Editor
page-item disabled,,Try it Editor
page-item active,,Try it Editor
pagination-lg,,Try it Editor
pagination-sm,,Try it Editor
Popover,,Try it Editor
popovers,,Try it Editor
dismissible popover,,Try it Editor
[/table]

---

Bootstrap Progress Bar Classes

Find all the important classes being used with Bootstrap 4 Progress bar for its respective use.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Progress Bar Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
progress,This sets the whole progress bar to be integrated in the page layout,Try it Editor
progress-bar,,Try it Editor
progress-bar with label,,Try it Editor
progress-bar with height,,Try it Editor
progress-bar bg-*,,Try it Editor
multiple progress-bar,,Try it Editor
progress-bar-striped,,Try it Editor
progress-bar-striped bg-*,,Try it Editor
progress-bar-animated,,Try it Editor
Scrollspy,,Try it Editor
data-spy,,Try it Editor
[/table]

---

Bootstrap 4 Table Classes

These are the following classes that can used with Bootstrap table for getting the desired behaviour within this web element.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Table Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
table,This sets the table design to incorporated into the web layout,Try it Editor
thead-light,Adds light Color to table head design,Try it Editor
thead-dark,Adds dark Color to table head design,Try it Editor
table-striped,,Try it Editor
table-bordered,,Try it Editor
table-borderless,,Try it Editor
table-hover,,Try it Editor
table-sm,,Try it Editor
table-*-responsive,,Try it Editor
table-reflow,,Try it Editor
table-active,,Try it Editor
table-primary,Adds primary(blue) Color to table design,Try it Editor
table-secondary,Adds secondary(Grey) Color to table design,Try it Editor
table-success,Adds success(Green) Color to table design,Try it Editor
table-info,Adds info(light-blue) Color to table design,Try it Editor
table-warning,Adds warning(yellow) Color to table design,Try it Editor
table-danger,Adds danger(red) Color to table design,Try it Editor
table-light,Adds light Color to table design,Try it Editor
table-dark,Adds dark Color to table design,Try it Editor
[/table]

---

Bootstrap 4 Tooltip Class

These are the various classes used with tooltip while using Bootstrap framework respectively.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Tooltip Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
tooltip,This specific class adds tooltip to the respective element,Try it Editor
tooltip-arrow,,Try it Editor
tooltip-inner,,Try it Editor
[/table]

---

Bootstrap 4 Typography Classes

These are the various typography classes used with bootstrap for text presentation in various forms.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Typography Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
display-# (1-4),,Try it Editor
lead,This specific value when used increases the font size and line height of the respective element,Try it Editor
blockquote,,Try it Editor
blockquote-footer,,Try it Editor
blockquote-reverse,,Try it Editor
list-unstyled,,Try it Editor
list-inline,,Try it Editor
dl-horizontal,,Try it Editor
[/table]

---

Bootstrap 4 Border Classes

These are the various border classes used for elements across web design with Bootstrap CSS framework.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Border Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
border,This CSS value adds border to the current element with inherited values,Try it Editor
border-*-0,,Try it Editor
border-primary,Adds primary(blue) Color to border design,Try it Editor
border-secondary,Adds secondary(Grey) Color to border design,Try it Editor
border-success,Adds success(Green) Color to border design,Try it Editor
border-danger,Adds danger(red) Color to border design,Try it Editor
border-warning,Adds warning(yellow) Color to border design,Try it Editor
border-info,Adds info(light-blue) Color to border design,Try it Editor
border-light,Adds light Color to border design,Try it Editor
border-dark,Adds dark Color to border design,Try it Editor
border-white,,Try it Editor
rounded,,Try it Editor
rounded-circle,,Try it Editor
rounded-*,,Try it Editor
[/table]

---

bootstrap bgColor classes

There are the values to be used for getting the desired color for your web elements. (bootstrap bg classes)

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Color Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
bg-primary,Sets the blue background color for elements with primary(blue) importance,Try it Editor
bg-secondary,Sets the grey background color for elements,Try it Editor
bg-success,Sets the green background color for elements,Try it Editor
bg-info,Sets the light blue background color for elements,Try it Editor
bg-warning,Sets the Yellow background color for elements,Try it Editor
bg-danger,Sets the red background color for elements,Try it Editor
bg-light,Sets the light background color for elements,Try it Editor
bg-dark,Sets the dark background color for elements,Try it Editor
bg-white,,Try it Editor
text-primary,Sets primary(blue) Color of the texts to be blue,Try it Editor
text-secondary,Sets secondary(grey) Color of the texts to be grey,Try it Editor
text-success,Sets success(green) Color of the texts to be green,Try it Editor
text-info,Sets the info(light blue) color for elements,Try it Editor
text-warning,Sets the yellow color for elements,Try it Editor
text-danger,Sets the red color for elements,Try it Editor
text-light,Sets the light color for elements,Try it Editor
text-dark,Sets the dark color for elements,Try it Editor
text-white,,Try it Editor
[/table]

---

Bootstrap Display Utility Classes

check out all these specific classes to be used with display of the elements across web layouts.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Display Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
d-*-block, To add block element with specific pre-defined width with values,Try it Editor
d-*-flex,,Try it Editor
d-*-inline,,Try it Editor
d-*-inline-block,,Try it Editor
d-*-inline-flex,,Try it Editor
d-*-none,,Try it Editor
d-*-table,,Try it Editor
d-*-table-cell,,Try it Editor
d-print-…,,Try it Editor
Utility: Flexbox,,Try it Editor
flex-*-column,,Try it Editor
flex-*-column-reverse,,Try it Editor
flex-*-row,,Try it Editor
flex-*-row-reverse,,Try it Editor
flex-*-nowrap,,Try it Editor
flex-*-wrap,,Try it Editor
flex-*-wrap-reverse,,Try it Editor
flex-fill,,Try it Editor
flex-*-grow-1,,Try it Editor
flex-*-grow-0,,Try it Editor
flex-*-shrink-1,,Try it Editor
flex-*-shrink-0,,Try it Editor
justify-content-*-start,,Try it Editor
justify-content-*-end,,Try it Editor
justify-content-*-center,,Try it Editor
justify-content-*-between,,Try it Editor
justify-content-*-around,,Try it Editor
align-content-*-start,,Try it Editor
align-content-*-end,,Try it Editor
align-content-*-center,,Try it Editor
align-content-*-around,,Try it Editor
align-content-*-stretch,,Try it Editor
align-items-*-start,,Try it Editor
align-items-*-end,,Try it Editor
align-items-*-center,,Try it Editor
align-items-*-baseline,,Try it Editor
align-items-*-stretch,,Try it Editor
align-self-*-start,,Try it Editor
align-self-*-end,,Try it Editor
align-self-*-center,,Try it Editor
align-self-*-baseline,,Try it Editor
align-self-*-stretch,,Try it Editor
order-*-#,,Try it Editor
[/table]

---

Bootstrap Utility Classes

These are also used across many other use for getting respective properties done to the elements.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Utility Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
close,This CSS style is used for adding specific “x” in alerts and modal to get the icon represent in front end,Try it Editor
embed-responsive,,Try it Editor
shadow-none,,Try it Editor
shadow-sm,,Try it Editor
shadow,,Try it Editor
shadow-lg,,Try it Editor
invisible,,Try it Editor
visible,,Try it Editor
sr-only,,Try it Editor
sr-only-focusable,,Try it Editor
[/table]

---

Bootstrap Positioning Classes

These are the specific Bootstrap positioning Classes as per used in different layout to adjust elements within their web design.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Positioning Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
align-*,This sets the original align position of the elements within the whole layout,Try it Editor
clearfix,,Try it Editor
fixed-top,,Try it Editor
fixed-bottom,,Try it Editor
sticky-top,,Try it Editor
float-*-left,,Try it Editor
float-*-right,,Try it Editor
float-*-none,,Try it Editor
[/table]

---

Bootstrap Sizing Classes

These are the specific Bootstrap Width classes and Bootstrap Height Classes that can be adjusted as per the set values accordingly.

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Size Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
w-25,Sets the width of the element to be 25% of the whole layout,Try it Editor
w-50,,Try it Editor
w-75,,Try it Editor
w-100,,Try it Editor
h-25,,Try it Editor
h-50,,Try it Editor
h-75,,Try it Editor
h-100,,Try it Editor
mw-100,,Try it Editor
mh-100,,Try it Editor
[/table]

---

Bootstrap 4 Responsive Classes

Bootstrap Responsive Classes: These are different classes being used for rendering web design layout responsive as per the screen of the device respectively. [Utility: Spacing]

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Responsive Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
m-1 / m-*-#, These are specific margin classes for responsive layout with values from 0 to 5 with prefix sm md lg or xl,Try it Editor
mt-1 / mt-*-#,,Try it Editor
mr-1 / mr-*-#,,Try it Editor
mb-1 / mb-*-#,,Try it Editor
ml-1 / ml-*-#,,Try it Editor
mx-1 / mx-*-#,,Try it Editor
my-1 / my-*-#,,Try it Editor
p-1 / p-*-#,,Try it Editor
pt-1 / pt-*-#,,Try it Editor
pr-1 / pr-*-#,,Try it Editor
pb-1 / pb-*-#,,Try it Editor
pl-1 / pl-*-#,,Try it Editor
px-1 / px-*-#,,Try it Editor
py-1 / py-*-#,,Try it Editor
[/table]

---

Bootstrap 4 Text Classes

Bootstrap Utility – Text Classes :

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Text Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
font-weight-bold,This class is used to transform text with font weight property set Bold,Try it Editor
font-weight-light,,Try it Editor
font-weight-normal,,Try it Editor
font-italic,,Try it Editor
text-monospace,,Try it Editor
text-justify,,Try it Editor
text-nowrap,,Try it Editor
text-*-left,,Try it Editor
text-*-right,,Try it Editor
text-*-center,,Try it Editor
text-lowercase,,Try it Editor
text-uppercase,,Try it Editor
text-capitalize,,Try it Editor
text-truncate,,Try it Editor
text-body,,Try it Editor
text-black-50,,Try it Editor
text-white-50,,Try it Editor
text-muted,,Try it Editor
text-hide,,Try it Editor
[/table]

---

Bootstrap 4 Carousel Classes

[table class=”table-bordered bootstrap-table” caption=”Bootstrap Carousel Classes” width=”” colwidth=”” colalign=”” border=”1″]
Class Name,Description,Example
Carousel,,Try it Editor
carousel slide,,Try it Editor
carousel-fade,,Try it Editor
carousel-indicators,,Try it Editor
carousel-caption,,Try it Editor
Collapse,,Try it Editor
collapse,,Try it Editor
accordion,,Try it Editor
[/table]

---

Also, read our complete Section for

• Bootstrap Tutorial PDF
• Bootstrap Questions and Answers 2019

---