Bootstrapcreative Com Resources Bootstrap 5 Cheat Sheet Classes Index
Bootstrapcreative Com Resources Bootstrap 5 Cheat Sheet Classes Index
This Bootstrap 5 Cheat Sheet helps you quickly find documentation for common CSS
classes, components, and grids.
Learn More
.align* A set of utility classes that are equivelant to writing the css prope
vertical‐align:middle; You can use this on inline and table ce
elements. .align‐(baseline, top, middle, bottom)
.align Added to the parent flexbox container to determing how the elem
content* are aligned horizontally. .align‐content‐(start (browser defau
end, center, between, around, or stretch)
.alignitems* Class added to flexbox child items to specify if it should align tow
the top or bottom of the container (start, end)
Class Name Preview Description
.aligntext* A set of utility classes that are equivelant to writing the css prope
vertical‐align:text‐bottom; You can use this on inline and ta
cell elements. .align‐text‐(top, bottom)
.border* A versatile border utility class that lets you add/remove borders o
side or change a border color. .border‐(light, dark primary,
secondary, transparent, white, warning, success, info, dan
0, top‐0, right‐0, bottom‐0, left‐0, top, right, bottom, l
.carousel When you have an image carousel with pagination you will use th
control* class on the previous and next anchor links. .carousel‐control‐
(prev, next)
.carousel n/a Animates the slide transition with a crossfade instead of a slide
fade
.col Flexbox items are automatically equal width so this class is used
when you want your columns to be equal width and then go 100%
the xs breakpoint.
.col* This class is used for grid columns to determin the column width
the breakpoint you would like it to be active. The classes work fro
the breakpoint you set and everything larger. .col‐(sm, md, lg,
xl)‐(1‐12)
.dflex n/a Sets the element to have have the style property display:flex;
.dnone n/a Sets the element to have have the style property display:none;
.d** n/a A responsive display utility class that lets you specify when a disp
property is applied to the element. .d‐(sm, md, lg, xl)‐(none,
inline, inline‐block, block, table, table‐cell, table‐row,
flex, inline‐flex )
.dprint* n/a Changes the display of elements when you print the document.
print‐(flex, inline‐flex, table, table‐cell, table‐row)
.fixed* n/a This class makes an element fixed to the top/bottom of the brows
window. Here is what the CSS ruleset looks like. .fixed‐bottom
{position: fixed;right: 0;bottom: 0;left: 0;z‐index: 1030;
.flex*** n/a Change the flexbox items layout, alignment, or size. .flex‐(sm,
lg, xl)‐(row, row‐reverse, column)
.flexfill* n/a Add to all sibling elements you would like to force into equal width
and fill all available horizontal space. .flex‐fill‐(sm, md, lg,
.flex n/a Forces an element to grow or shrink to use more or less of the sp
(grow|shrink) available .flex‐(grow, shrink)‐(0, 1)
*
.float** n/a Responsive utility to float an element. .float‐(sm, md, lg, xl)‐
(none, left, right)
.formrow Works similar to a grid .row but is more compact to make the fo
look more uniform
.h* Height utility class that makes the element a percentage height o
parent element. h‐(25,50,78,100, auto)
Class Name Preview Description
.invalid This class can be added with server side form validation to add a
feedback feedback message to an invalid field
.is* n/a If you do server side form validation you can use this class to set
feedback colors on inputs or error message. .is‐(valid, invali
.justify Class specifies where the flex items will be positioned inside the
content** container. .justify‐content‐(sm, md, lg, xl)‐(start, end,
center, between, around)
.navfill Makes all nav items use all available horizontal space. Nav items
different widths baded on their content.
.navjustified Makes all nav items equal width and use all available horizontal
space.
.navbar n/a The nav links that are collapsed and shown when toggled on mob
collapse widths.
.navbar n/a Since the navbar is displayed collapse on mobile first, this class
expand* specifies what breakpoint you want the navbar to not be collapse
.nogutters n/a Removes the negative margin on the .row and padding from the
child columns. Helpful when you want an image to expand to the
edges of the browser without padding on the left and right edges.
.order** This class is used to control how the elements are ordered on the
page regardless of their order in the source code. So you can
rearrange your layout as needed.
.rounded* The .imgrounded class was renamed to this and is primarily use
with images. However, the class just adds a border radius so you
Class Name Preview Description
could use this on other elements that you would like a radius app
You can also add .rounded‐sm or .rounded‐lg to increase the s
of the radius.
.visible n/a Hides the visibility of an element but does not change their displa
property.
.w* Width utility class that makes the element a percentage width of i
parent element. w‐(25,50,78,100, auto)
.was This class is set by Bootstrap's javascript to apply sub class valid
validated styles to the form inputs.
.blockquote Add to blockquote elements to apply the proper spacing and bott
margin to seperate it from other text.
.btngroup This class replaces an input checkbox with a custom style that is
toggle toggable on click
.card The class added to the div that wraps each individual card
Class Name Preview Description
.cardbody This class is added to the first child div inside the div.card parent
.card* First add .cardinverse and then add one of the contextual
background colors (danger|info|primary|secondary|success|warn
.carddeck Similar to columns Bootstrap card decks are equal height and wid
.cardgroup The parent wrapping class around a group of cards. Groups are
similar to decks but they have no margin between each card.
.cardimg Add this class to the image you would like to have as a card
background image. Used with creating cards with image overlays
Class Name Preview Description
.cardimg Similar to a card footer you can cap the bottom of a card with an
bottom image
.cardimg Wrapper class used to create a card that has a background imag
overlay overlay
.cardimgtop Similar to a card header you can cap the top of a card with an im
.cardinverse Inverts the default colors to use light text on a dark background c
.cardsubtitle Class added to card subtitles that adjusts the default heading sty
.cardtitle The class added to titles inside cards. It applies the proper spacin
Class Name Preview Description
.clearfix n/a Clears the floats of any child elements. Add this class to the pare
element wrapping the floating elements.
.colform Class added to form labels to apply consistent padding and marg
label
.colxl* n/a Set column width for anything greater than 1200px. Specify the
column span by adding 112 at the end
.custom Parent class that converts a default form checkbox into a custom
checkbox HTML/CSS checkbox
.custom n/a Used on all custom form inputs and adds base styles like padding
control display:inline
.custom Custom form checkboxes are set to be display:block. Use this cla
controlinline make the checkbox inline
.custom n/a This class is added to the default input that is going to be replace
controlinput adds the following: position: absolute; zindex: 1; opacity: 0;
.custom When creating a custom form checkbox, this class replaces the
controllabel default checkbox with custom elements using :before and :after
.customfile n/a This class is added to the default input type="file" and hides it usi
input CSS
.customfile When creating a custom form file browser, this class replaces the
label default file browser with custom elements using :after
Class Name Preview Description
.customradio This class is added to the parent label tag along with .customcon
class to specify what kind of custom input it will be
.custom Creates a custom form element that looks like a toggle switch fou
switch on touch devices.
.d* Append the following to change the element display property (blo
inline, inlineblock)
.disabled Add this class to anchor tags to disable the click functionality but
have them visible.
.display* This set of classes increases the font size of headings in 4 stage
These classes are used for headings outside of the main content
the page like jumbotrons and page headers. Append (14) to the
to adjust size.
.dropdown This class is added to each link item shown in a dropdown menu
item
.dropdown n/a Removes the interactivity from a dropdown so it does not appear
itemtext clickable
.dropdown Class added to the notched dropdown navigation. Great for provi
togglesplit additional actions but still having a primary action.
.dropup Displays the dropdown menu above the button instead of below.
.embed n/a Class used to adjust responsive embed aspect ratio. Append one
responsive* the following for the desired aspect ratio (21by9, 16by9, 4by3, 1b
.formcheck This class is added to the input tag for checkboxes and radio but
input Adds styles for positioning and margins.
.formcontrol The class added to input type="file" to apply font and spacing
file
.formcontrol Apply this class to form elements to increase or decrease its size
* relative to the default sizing .formcontrol(lg, sm)
.forminline Use this class to have a series of labels and form elements on a
single horizontal row
Class Name Preview Description
.formtext This class is used for help text alongside form elements. You can
.textmuted to make the text lighter in color
.inputgroup* This class lets you extend form controls by adding text or buttons
the left or right of the input. .inputgroup(addon|btn)
.inputgroup This class adds marginleft: 1px; to the input set to left of the gro
append compensate for the 1px border
.inputgroup This class adds marginright: 1px; to the input set to right of the
prepend group to compensate for the 1px border
.inputgroup This class adds the background color and text styles to the text in
text an input group
.listgroup When adding a list group to a card add this class to the list group
flush remove the border. Otherwise you will have a double border.
.listgroup Add this class to each anchor in a listgroup to remove the defau
itemaction anchor text color
.navitem If your nav uses a list add this class to each list item for the prope
spacing
.navlink Each anchor link inside your nav is given this class in order to ha
the proper styling
Class Name Preview Description
.navpills Use this class along with .nav to make each nav link into a button
.navbarlight Add this class to your navbar if you would like it to have a light
background and dark text
.pageitem This class is added to each li inside the ul.pagination and floats th
li's'
.pagelink This class is added to each anchor link containing the numbers
.position* N/A Not responsive, but a group of utility classes to add common pos
values. .position(absolute, fixed, relative, static, sticky)
.posft n/a Positions an element fixed to the top of the viewport and full width
.sronly n/a Combine .sronly with .sronlyfocusable to show the element aga
focusable when it’s focused by a user using a keyboard
.stretched This class extends the clickable area of an anchor link to fill the p
link container. The parent container must have a position:relative for
to work properly.
Class Name Preview Description
.table* Adds a 1px stroke around the rows, columns, and table outline. Y
can also remove the borders entirely. .table‐(bordered,
borderless)
.tablereflow The table header becomes the first column of the table to the left
.tablesm Removes vertical padding between table rows so it does not take
much vertical space. Good for tables with a lot of rows.
.tablestriped Adds a light background color to every other table row for a stripe
effect
.text** Aligns text left, right or center use choose breakpoint (xs|sm|md|l
then alignment (left, right, center)
.textbreak When you are building applications that have long strings or user
generated content, this class breaks the long text so that it does
break the layout. Without this, the text would be as wide as the st
itself.
.theaddark The default table head styling of light background and dark text
.theadlight Inverts the table head to have a dark background and light text
.alert The .alert class adds base styling with padding and margin.
.alert* Change the color of the alert to provide user feedback. (primary,
secondary, success, danger, warning, info, light, dark)
.alert Similar to a well it is a box with a border and padding. This class
dismissible a child element with a .close class lets the user close the alert.
.alertlink When you add links inside alert this class matches the font color
the parent alert class.
.bgdanger Similar to the contextual text color classes, easily set the backgro
of an element to any contextual class. Anchor components will da
on hover, just like the text classes.
Class Name Preview Description
.bginfo Similar to the contextual text color classes, easily set the backgro
of an element to any contextual class. Anchor components will da
on hover, just like the text classes.
.bgprimary Similar to the contextual text color classes, easily set the backgro
of an element to any contextual class. Anchor components will da
on hover, just like the text classes.
.bgsuccess Similar to the contextual text color classes, easily set the backgro
of an element to any contextual class. Anchor components will da
on hover, just like the text classes.
.bgwarning Similar to the contextual text color classes, easily set the backgro
of an element to any contextual class. Anchor components will da
on hover, just like the text classes.
.btn This class sets the spacing and size of the button.
.btnblock By default buttons are inline this class makes it block to span the
width of its parent.
.btninfo Button for information on a topic like terms and conditions. Defau
light blue.
.btnlink Keeps the spacing set with the .btn class but removes the outer
border.
Class Name Preview Description
.carousel parent classed added to an ordered list for the little circles showin
indicators what slide you are on
.carousel The div wrapper that contains the carousel slide items
inner
.close Use the generic close icon for dismissing content like modals and
alerts.
.col** span 112 column. Extra small devices Phones ( < 768px), Small
devices Tablets (≥768px), Medium devices Desktops (≥992px), L
devices Desktops (≥1200px). Column device Column numeric va
can be 112.
.col*pull* Easily change the order of our builtin grid columns with .col*pu
and .col*pull* modifier classes. Pull numeric values can be 01
Class Name Preview Description
.col*push* Easily change the order of our builtin grid columns with .col*pu
and .col*pull* modifier classes. Push numeric values can be 0
.dropdown This class gives you the ability to add a dropdown to navbar, tabs
and pills so you can display a dropdown of additional navigation.
.dropdown Adds the default styles for the dropdown menu container
menu
.dropdown This class is added to the button that will have the toggle action
toggle applied that will hide and show the dropdown menu
.fade To have your alerts use animation when closing, make sure they
the .fade and .in classes already applied to them.
Class Name Preview Description
.formcontrol Class added input, textarea, and select to make them 100% and
responsive
.formgroup A div wrapper class that goes around a form input and label
.h1 .h6 Apply heading styles to other elements. Make a paragraph look li
an h1
.inputgroup Wrapper class used to enhance an input and label group by addi
button in front or behind as help text
.lead Increase the font size and line height of a paragraph. Good to us
the first paragraph of an article to improve readability.
.listgroup The list group items are positioned horizontal intead of vertically.
horizontal careful of long lists because they can break the layout. example
.listgroup Change color of list group item by adding one of the following: de
item* warning, info, danger, primary
.mark For highlighting a run of text due to its relevance in another conte
use the mark tag.
.modal Added by the modal javascript to make the area around the moda
backdrop clickable to hide the modal
.modalfooter The footer of the modal that contains action buttons or help text
.modal The header section of the modal that contains the title and close
header button
.modalopen Javascript adds this class to the body tag to prevent scrolling with
modal is open
.nav nav base class added all types of navigation: tabs, pills, justified,
disabled links
Class Name Preview Description
.navbar Most navbars contain a logo or brand. This class is added to the
brand anchor
.navbarnav The wrapper class of the navigation elements excluding the bran
.pagination The wrapper class that contains all of the page navigation
.progressbar The class applied to the progress bar graphic that moves
.rowcols** Instead of setting the column width on the .col you can specify
column grid on the .row . This can be used for a list of posts or fo
making a responsive card deck. Example .col‐(sm,md,lg,xl)‐(
.sronly Hide an element to all devices except screen readers with .sronl
.tabpane Class added to the div that will act as a tab content area
.table Adding this class to a HTML table applies the Bootstrap styles
.tooltip This class is used by the tooltip javascript as the wrapper of the t
.tooltipinner The wrapper class of tooltip text. This is generated by the Bootstr
javascript