Utility Classesv4.x

class='align-{baseline|bottom|middle}'

align-text-{bottom|top}

Alignment—Use align and align-text to easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

Vertical-align only affects inline, inline-block, inline-table, and table cell elements.

align-items-{baseline|center|end}

align-items-{sm|md|lg|xl}-{baseline|center|end}

align-items-{start|stretch}

align-items-{sm|md|lg}-{start|stretch}

Alignment—Use align-items utilities on flexbox containers to change the alignment of flex items on the y-axis. Pairs with these flags (sm|md|lg|xl) to create responsive options.

align-self-{baseline|center|end}

align-self-{sm|md|lg|xl}-{baseline|center|end}

align-self-{sm|md|lg|xl}-{start|stretch}

Alignment—Use align-self utilities on flexbox items to individually change their alignment on the y-axis. Pairs with these flags (sm|md|lg|xl) to create responsive options.

bg-{transparent|white|light|secondary|dark|primary|secondary|success|warning|danger}

bg-gradient-{white|light|secondary|dark|primary|secondary|success|warning|danger}

Background—Use bg-* utilities on containers to change their background. Combine with text-{light|etc...} utilities to create unique combinations.

border

border-0

border-{bottom|top|right|left}

border-{bottom|top|left|right}-0

Borders—Use border utilities to quickly style the border of an element. Additive and subtractive options allow you to add or remove an element’s borders, all at once or one at a time.

border-{white|light|secondary|dark}

border-{info|primary|success|warning|danger}

Borders—Use border-* class to set a border color using standard Bootstrap grayscale or colors. Requires you also add the border class.

clearfix

Clearfix—Use clearfix to clear floated content within a container.

col

col-{1|...|12}

col-{sm|md|lg|xl}-{0|...|12|auto}

offset-{sm|md|lg|xl}-{0|...|12}

row justify-content-{start|center|end|around|between}

Columns—Use col-* classes to structure content according to the 12-column grid. Use a simple col class to auto-size multiple columns. To justify columns within a row, pair the row with a justify-content-* class. Use the offset-* class to add shift content on the x-axis. Pairs with these flags (sm|md|lg|xl) to create responsive options.

d-{none|inline|block|inline-flex|flex}

d-{table|table-cell|table-row}

d-{sm|md|lg|xl}-{none|block|flex|table|table-cell|table-row}

d-{sm|md|lg|xl}-inline-{block|flex}

Display—Use the d-* class to set display to hidden (none), inline, block or flex. Pairs with these flags (sm|md|lg|xl) to create responsive options.

d-print-{none|block|inline|inline-block}

d-print-{flex|inline-flex}

d-print-{table|table-cell|table-row}

Display—Use the d-print-* class to change the display value of elements when printing.

embed-responsive embed-responsive-16by9

embed-responsive embed-responsive-4by3

embed-responsive-item

Responsive Embeds—Use the embed-responsive class to create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.

fixed-{bottom|top}

sticky-top

Fixed and Sticky—Use the fixed- and sticky-top class to position elements in relation to the page.

Note that these classes are not responsive and will likely require additional CSS.

flex-{grow|shrink}-{0|1}

flex-{sm|md|lg|xl}-{grow|shrink}-{0|1}

Flex Grow and Shrink—Use flex-grow-* utilities to toggle a flex item’s ability to grow to fill available space.

flex-{column|row}

flex-{column|row}-reverse

flex-{sm|md|lg|xl}-{column|row}

flex-{sm|md|lg|xl}-{column|row}-reverse

Flex Row and Column—Use the flex-column and flex-row class to set the direction of flex items in a flex container. In most cases you can omit the horizontal class here as the browser default is row. Pairs with these flags (sm|md|lg|xl) to create responsive options.

flex-fill

flex-{sm|md|lg|xl}-fill

Flex Fill—Use the flex-fill classes on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space. Pairs with these flags (sm|md|lg|xl) to create responsive options.

flex-{sm|md|lg|xl}-{nowrap|wrap|wrap-reverse}

Flex Wrap and Reverse—Use the flex-wrap class to Change how flex items wrap in a flex container. Choose from no wrapping to wrapping with or reverse wrapping. Requires the d-flex class.

float-{none|left|right}

float-{sm|md|lg|xl}-{left|right}}

Float—use the float- class to float elements left or right. Pairs with these flags (sm|md|lg|xl) to create responsive options.

font-italic

Font Italics—Use the font-italic class to italicize a text element.

font-weight-{normal|lighter|light|bold|bolder}

Font Weight—Use the font-weight-* class to set the weight of any text element.

{h|w}-auto

h-{25|50|75|100}

w-{25|50|75|100}

Height and Width—Use the w-* and h-* class to set the width and height of an element relative to the parent element.

justify-content-{start|around|between|center|end}

justify-content-{sm|md|lg|xl}-{around|between|center|end}

Justify Content—Use justify-content classes on flexbox containers to change the alignment of flex items on the main (x) axis.

lead

Lead Text—Lead text is larger. Typographically, it's somewhere between a paragraph and a heading.

mh-100

mw-100

Min and Max Height—Use the mh-* and mw-* class to set the min-height and min-width of an element relative to the parent element.

m-{1|2|3|4|5}

mb-{1|2|3|4|5}

mt-{1|2|3|4|5}

my-{1|2|3|4|5}

Margins—Use the mb-* and mt-* class to set the margin-bottom and margin-top. The my-* class sets the margin-top and margin-bottom classes (as the y-axis). Use m-* to assign padding to top, bottom, right and left all at once.

ml-{1|2|3|4|5}

mr-{1|2|3|4|5}

mx-{1|2|3|4|5}

Margins—Use the ml-* and mr-* class to set the margin-left and margin-right. The mx-* class sets the margin-left and margin-right classes (as the x-axis). Use m-* to assign margin to top, bottom, right and left at once.

order-{sm|md|lg|xl}-{0|...|12}

Order—Use the oder-* class to change the visual order of specific flex items with a handful of order utilities.

overflow-{auto|hidden}

Overflow—Use the overflow-* class to configure how content overflows a parent element.

p-{1|2|3|4|5}

pb-{1|2|3|4|5}

pt-{1|2|3|4|5}

py-{1|2|3|4|5}

Padding—Use the pb-* and pt-* class to set the padding-bottom and padding-top. The py-* class sets the padding-top and padding-bottom classes (as the y-axis).

pl-{1|2|3|4|5}

pr-{1|2|3|4|5}

px-{1|2|3|4|5}

Padding—Use the pl-* and pr-* class to set the padding-left and padding-right. The px-* class sets the padding-left and padding-right classes (as the x-axis).

position-{absolute|fixed|relative|static|sticky}

Position—Use the position-* class to configure the position of an element in relation to the document and other elements.

rounded-0

rounded-{bottom|top|left|right}

rounded-{circle|pill}

rounded-{sm|lg}

Rounded—Use rounded class to easily adjust the border-radius property of elements.

shadow

shadow-{none|sm|lg}

Shadow—Use the shadow class to add a standard shadow to an element. Use the shadow-* class to add smaller or larger shadows to an element, or to remove the shadow completely.

stretched-link

Stretched Link—Use the stretched-link class to make any HTML element or Bootstrap component a clickable link by “stretching” a link within it to cover the parent element.

text-{left|right|center|justify}

text-{sm|md|lg|xl}-{left|right|center}

Text—Use the text-* class to align text within a parent element. Pairs with these flags (sm|md|lg|xl) to create responsive options.

text-body

text-break

text-wrap

text-nowrap

text-truncate

text-monospace

Text Spacing—Use text-* class to set text-wrapping and overflow options for text in relation to its containing parent element.

Text—Use text-monospace to force the element to use the monospace font.

text-{info|primary|success|warning|danger}

text-{white|white-50|muted|light|secondary|dark|black-50}

text-{lowercase|uppercase|capitalize}

text-decoration-none

Text Colors—Use the text-* color class to set the color of any text element to the standard Bootstrap alert grayscale or colors.

Text Decoration—Use the text-decoration-none class to turn off the CSS for underlining links.

thingy—Use the text-* case class to set the class case of any text element.

{vh|vw}-100

min-{vh|vw}-100

View Height and Width—Use the vh-* and min-vh-* class to set the min-height and min-width of an element relative to the viewport.

visible

invisible

Visibile—Use the visible and invisible class to set the visibility of elements

These utility classes do not modify the display value and do not affect layout, i.e., invisible elements still take up space in the page. Content will be hidden both visually and for assistive technology/screen reader users.