Utilities are a group of Bootstrap classes for efficiently adding css styles directly to your HTML class attributes.
Bootstrap v5.x | Helpers & Utilities
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
Links to the Bootstrap Libaries—Include these to transform a standard HTML page to Bootstrap v5.x.
Place the link in the <head> element and the script in
the <body> element, just
before the closing
</body> tag.
If working with the Node Package Manager (NPM), you can also install Bootstrap directly from the command line (terminal).
align-items-{start|center|end|stretch}
align-{bottom|middle|top}
align-{self}-{sm|md|lg|xl|xxl}-{baseline|start|center|end|stretch}
Align Elements Vertically—Use the .align-items class to
align items to top ('start'), center, or bottom ('end'). Using class
.align-items-stretch allows flex items to grow to match the height of the
tallest
item in the container or the height of the container itself. Use ..align-self
utilities to flexbox items to adjust their cross-axis alignment (y-axis is the default,
x-axis when the flex-direction is column).
bg-{primary|secondary|info|success|warning|danger}-{subtle}
bg-{light|dark|body|body-secondary|body-tertiary|white|transparent}-{subtle}
bg-gradient
bg-opacity-{10|25|50|75|100}
Background Colors—Use the .bg-* class to set the
background color of any element. To use a gradient intead of a solid color, add the
.bg-gradient class to the color class.
Optionally append the -subtle option to .bg-* classes to lighten
the
background.
Use the .bg-opacity-* class to set the opacity of the background.
border-{top|bottom|start|end}-{0|1...5}
border-{primary|secondary|info|success|warning|danger}-{subtle}
border-{light|dark|body|body-secondary|body-tertiary|white|transparent}-{subtle}
Borders—Use the .border-* class to set universal, or
specific single borders on elements, and to set the width and color of borders. The
.border-5 class is thickest, and the optional addition of -subtle
reduces the background opacity by 50%.
clearfix
Clearfix—Use the .clearfix
class to clear the float when text content is vertically shorter than the floated image.
col
col-{auto|sm|md|lg|xl|xxl}
col-{sm|md|lg|xl|xxl}-{1...12}
Column Utilities—Use .col-* classes to structure content
according to the 12-column grid.
Repeat
a simple .col class to auto-size multiple columns. Be warned—results vary
with this method.
container-{sm|md|lg|xl|xxl}-{fluid}
Containers—Containers add padding and help center content on the page. Embed
.row and .col classed elements inside containers. Breakpoint
modifiers work like this: .container-sm will remain wide until small
breakpoints,
etc. The class .container-fluid is widest, offering the smallest
padding/gutters.
d-{sm|md|lg|xl|xxl}-{none|inline|inline-block|block|grid|inline-grid|table|table-cell|table-row|flex|inline-flex}
d-{sm|md|lg|xl|xxl}-{none|inline|inline-block|block|grid|inline-grid|table|table-cell|table-row|flex|inline-flex}
d-{sm|md|lg|xl|xxl}-{print}-{none|inline|inline-block|block|grid|inline-grid|table|table-cell|table-row|flex|inline-flex}
Display—Use the .d-{value} class to set the default
display for the xs size. Prepend the size for specific breakpoints. Prepend the
-print- option to set print styles.
display-{1...6}
Display Headings—Use the .display-* class to set the
size of a heading element, with .display-1 being the largest.
figure
figure-img
figure-caption
Figures—Use the .figure-* classes take advantage of
Bootstrap's styling for the HTML <figure> element.
float-{sm|md|lg|xl|xxl}-{none|start|center|end}
Floats—Use .float class to float an element.
Floats are most commonly used to wrap text around images.
flex-{sm|md|lg|xl|xxl}-{row|column}-{reverse}
flex-{sm|md|lg|xl|xxl}-fill
flex-grow
flex-{wrap|nowrap|reverse}
Flexbox—Use the d-flex-* utilities to order elements on the page using flexbox.
Use .flex-column and .flex-row to set the direction of a row or
column. You may add a size/breakpoint modifier. Add the -reverse modifier to
reverse the order of elements.
fw-{light|normal|semibold|bold}
Font Weight—Use the .fw class to set the
font weight of any typeface. The default value is 'normal'.
fst-{normal|italic}
Font Style—Use the font-style class, .fst, to set the
style to
italics. The default value is 'normal'.
form-control-{sm|lg}
form-select-{sm|lg}
form-control-plaintext
form-check-{inline|reverse}
form-text
form-floating
input-group-{sm|lg}
Form Controls—Use the .form-* classes to add further
styling to form elements, including changing size and color. Use .form-text to
add explainer text that is smaller and light grey. Use the
.form-control-plaintext class to opt out of Bootstrap margin and padding on form
elements. Use classes like form-check-inline and
.form-check-reverse
to set special formatting on checkboxes and other elements.
Use the .form-floating class to visually embed the labels inside the input
element.
You can use the disabled atrribute to
prevent focus and style the text light grey. To avoid styling the text light grey, simply
add the readonly attribute. Note that elements with the readonly attribute can
still be selected and focused. For
example:
<input class='form-control' type='text' disabled readonly>.
g-{sm|md|lg|xl|xxl}-{0...12}
gx-{sm|md|lg|xl|xxl}-{0...12}
gy-{sm|md|lg|xl|xxl}-{0...12}
Gaps and Gutters—Adjust the gutter spacing with the .g
class. Target rows (horizontal) and columns (vertical)
specifically with the .gx and .gy classes.
Use the class .g-0 to eliminate all gutters.
img-fluid
img-thumbnail
Image Classes—Use the .img-* classes to change attributes
of your images. Use .img-fluid to make the image
responsive by setting its max-width to 100% and its height to auto. Use
.img-thumbnail to give an image a 1 px gray border. You can also use
.border-* and .rounded-* utility classes to transform images.
user-select-{none|auto|all}
pe-{auto|none}
Interactions (pointer & selection)—These are classes that control
how a user interacts with
pages and
the elements therein. Use .user-select to enable or disable of selection of
elements.
Use the .pe-none class to disable the pointer on mouse or trackpad for an
element. The .pe-auto enables the pointer (the default behavior). When disabling
with .pe-none, note that keyboard users will still be able to access the
element.
You can create similar effects through the disabled attribute, and removing the
href attribute.
Note—Take care not to confuse .pe-{auto|none}
with .pe-{0...5}; the latter sets the end (right or bottom) padding.
justify-content-{sm|md|lg|xl|xxl}-{start|center|end|around|between|evenly}
Justifying Content—The .justify-content class specifies
breakpoints and supports the alignment
flag, for horizontal alignment.
lead
Lead text—Use the .lead class to create tagline text,
or text that is slightly larger than standard paragraph text.
link-{underline}-{primary|secondary|info|success|warning|danger}
link-{light|dark|body|muted|white|white-50|black-50}
link-offset-{0|10|25|50|75|100}
link-opacity-{0|10|25|50|75|100}-{hover}
Link Colors—Use the .link-* class to change several
aspects of
your links, including the color, opacity, underline and hover
effects.
m{x|y|b|t|s|e}-{auto|0...5}
m-n{1...5}
Margin Classes—Use the .m-* class to set a universal
margin
for top (t), end/right (e), bottom (b) and start/left (s) on an element.
Replace positive margins with negative margins by prepending 'n' to the numbers, for example:
.mt-n3.
object-fit-{sm|md|lg|xl|xxl}-{contain|cover|fill|scale|none}
Object Fit—Use the .object-fit-* class to easily set how
an image or video occupies its parent element. You can add the optional breakpoint for
flexibility.
offset-{sm|md|lg|xl|xxl}
offset-{sm|md|lg|xl|xxl}-{1...12}
Offset—Use the
.offset-*
class to add shift
content on
the
x-axis. Pairs with these flags {sm|md|lg|xl} to create responsive options.
opacity-{0|10|25|50|75|100}
Opacity—Use the .opacity-* class to set the opacity on an
element.
order-{sm|md|lg|xl|xxl}
order-{sm|md|lg|xl|xxl}-{first|last}
order-{sm|md|lg|xl|xxl}-{1...12}
Ordering Columns—Adjust the visual order of columns with
.order classes.
overflow-{auto|hidden|visible|scroll}
overflow-{x|y}
Overflow—Use the .overflow-* class to define how content
will
overflow within a parent element. Use .overflow-x and .overflow-y
to
set overflow property horizontally or vertically.
p{x|y|b|t|s|e}-{0...5}
Padding Classes—Use the .p-* class to set a universal
padding
for top (t), end/right (e), bottom (b) and start/left (s) on an element.
Unlike margin, padding cannot have a negative marging.
rounded-{top|bottom|start|end|circle|pill|0...5}
rounded-{top|bottom|start|end}-{circle|pill|0...5}
Radius / Rounded—Use the .rounded-*class to set the
radius
of elements, either universally or on specific edges. The
.rounded-1 class is least round, increasing in size to .rounded-5,
then
-pill, and finally -circle.
row
row-col-{sm|md|lg|xl|xxl}-{1...12}
Rows and Row-columns—Use the .row class in conjuntion
with .col-* classes to structure content on the page.
The .row-cols class dynamically
adjusts the width of columns inside a row. It ensures that all child elements are
evenly spaced based on the specified column count. Child elements automatically wrap to the
next row when there are more elements than the
specified column count.
shadow-{none|sm|lg}
Shadows—Use the .shadow-* class to set a background
shadow on elements. The .shadow class adds the medium value shadow, between
small and large.
table-{responsive}
table-active
table-group-divider
table-{bordered|borderless}
table-{striped|striped-columns}
table-hover
table-{light|dark|secondary|primary|info|success|warning|danger}
Table Classes—Use the .table class to transform an HTML
table into a Bootstrap table. Add additional .table-* modified utility classes
to set table size, hover and active effects, as well as setting spacing, color and other
self-explanatory table attributes.
text-{sm|md|lg|xl|xxl}-{primary|secondary|info|success|warning|danger}-{emphasis}
text-{sm|md|lg|xl|xxl}-{light|dark|body|muted|white|white-50|black-50}
text-body-{sm|md|lg|xl|xxl}-{light|dark|body|muted|white|white-50|black-50}
Text Colors—The .text-* color class will set the
text color, with options including styling the background and adding an emphasis (darkening
of the specified color).
text-break
text-{sm|md|lg|xl|xxl}-{start|center|end}
text-{sm|md|lg|xl|xxl}-{wrap|nowrap|break|truncate}
text-{sm|md|lg|xl|xxl}-decoration-{none|underline|line-through}
text-{sm|md|lg|xl|xxl}-{lowercase|uppercase|capitalize}
Text Features—The .text-break class will force a break
for longer content. Use the .text classes to align
text, set it to wrap, and style it, and set its color. The .text-decoration
class will control case, underlining and line-through options.
The .text-body-* class creates a subtitle or tagline effect.
{min}-vw-100
{min}-vh-100
Viewport Width and Height—Use the .vw-100 and
.vh-100 classes to set the width and height of an element to fill the entire
width or height of the viewport. Prepend min- to specify min width or height.
Use the .mw-* and .mh-* classes to se the maximum with of an
element,
relative to its parent container.
visible
invisible
Visibility—The .visible and .invisible
classes set visibility on elements. Note that invisble elements will be hidden visually and
from assistive devices.
Note that .invisible maintain their original space
within the element, and are not removed from the structure of the document.
w-{auto|25|50|75|100}
h-{auto|25|50|75|100}
mw-{auto|25|50|75|100}
mh-{auto|25|50|75|100}
Width and Height—Use the .w-* and .h-*
classes
to set the width and height of the element, relative to its parent container. The
.w-auto and .h-auto class will set the
width
to the width of the container.
Use the mw-* and mh-* classes to se the maximum with of an element,
relative to its parent container.
This will reset the page. Are you sure?