Complete List of All Bootstrap 4 Classes v4.0.0 Beta

Star   Issue   Looking for a Bootstrap 3 Cheat Sheet?

Click each column header to sort alphabetically.

Class Name Preview Description Category
.align-* bootstrap .align- A set of utility classes that are equivelant to writing the css property vertical-align:middle; You can use this on inline and table cell elements. .align-(baseline, top, middle, bottom) Utility
.align-content-* bootstrap .blockquote Added to the parent flexbox container to determing how the elements are aligned horizontally. .align-content-(start (browser default), end, center, between, around, or stretch) Utility
.align-items-* bootstrap .align-items Class added to flexbox child items to specify if it should align towards the top or bottom of the container (start, end) Utility
.align-self-* bootstrap .align-self Used on flexbox items to align them vertically in relation to the parent container. If columns are used the items will align verticall. (start, end, center, baseline, or stretch (browser default) Utility
.align-text-* bootstrap .blockquote A set of utility classes that are equivelant to writing the css property vertical-align:text-bottom; You can use this on inline and table cell elements. .align-text-(top, bottom) Utility
.badge-* bootstrap .badge- Used for labels and counters in applications .badge-(light, dark primary, secondary, transparent, white, warning, success, info, danger) Badge
.bg-* bootstrap .bg- Background color utility classes: .bg-(light, dark primary, secondary, transparent, white, warning, success, info, danger) Utilities
.border-* bootstrap .border- A versatile border utility class that lets you remove borders on a side or change a border color. .border-(light, dark primary, secondary, transparent, white, warning, success, info, danger, 0, top-0, right-0, bottom-0, left-0) Utility
.btn-outline-* bootstrap .btn-outline A button variation to have outlined buttons instead of a solid background. .btn-outline-(light, dark primary, secondary, transparent, white, warning, success, info, danger) Buttons
.carousel-control-* bootstrap .carousel-control When you have an image carousel with pagination you will us this class on the previous and next anchor links. .carousel-control-(prev, next) Carousel
.col bootstrap .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% on the xs breakpoint. Grid
.col-* bootstrap .blockquote This class is used for grid columns to determin the column width and the breakpoint you would like it to be active. The classes work from the breakpoint you set and everything larger. .col-(sm, md, lg, xl)-(1-12) Grid
.d-flex n/a Sets the element to have have the style property display:flex; Utility
.d-none n/a Sets the element to have have the style property display:none; Utility
.d-*-* n/a A responsive display utility class that lets you specify when a display property is applied to the element. .d-(sm, md, lg, xl)-(none, inline, inline-block, block, table, table-cell, flex, inline-flex ) Utility
.d-print-* n/a Change an elements display property only when you print the page Utility
.fixed-* n/a This class makes an element fixed to the top/bottom of the browser window. Here is what the CSS ruleset looks like. .fixed-bottom {position: fixed;right: 0;bottom: 0;left: 0;z-index: 1030;} Utility
.flex-*-*-* n/a Change the flexbox items layout, alignment, or size. .flex-(sm, md, lg, xl)-(row, row-reverse, column) Utility
.float-*-* n/a Responsive utility to float an element. .float-(sm, md, lg, xl)-(none, left, right) Utility
.form-control-plaintext bootstrap .form-control-plaintext Use the .form-control-plaintext class to remove the default form field styling and preserve the correct margin and padding. Forms
.form-row bootstrap .form-row Works similar to a grid .row but is more compact to make the form look more uniform Forms
.h-* bootstrap .h- Height utility class that makes the element a percentage height of its parent element. h-(25,50,78,100) Utility
.invalid-feedback bootstrap .invalid-feedback This class can be added with server side form validation to add a feedback message to an invalid field Forms
.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, invalid) Forms
.justify-content-*-* bootstrap .justify-content Class specifies where the flex items will be positioned inside the container. .justify-content-(sm, md, lg, xl)-(start, end, center, between, around) Utility
.m*-*-* n/a Applies margin to an element using responsive breakpoints {property}{sides}-{breakpoint}-{size}
m(t,b,r,l,x,y)-(sm, md, lg, xl)-(0, 1, 2, 3, 4, 5)
Utility
.p*-*-* n/a Applies padding to an element using responsive breakpoints {property}{sides}-{breakpoint}-{size}
p(t,b,r,l,x,y)-(sm, md, lg, xl)-(0, 1, 2, 3, 4, 5)
Utility
.progress-bar-animated bootstrap .progress-bar-animated When this class is added to a progressbar the progress will be animated using css3 animations Progress
.nav-fill bootstrap .nav-fill Makes all nav items use all available horizontal space. Nav items are different widths baded on their content. Navs
.nav-justified bootstrap .nav-justified Makes all nav items equal width and use all available horizontal space. Navs
.navbar-collapse n/a The nav links that are collapsed and shown when toggled on mobile widths. Navbar
.navbar-expand-* n/a Since the navbar is displayed collapse on mobile first, this class specifies what breakpoint you want the navbar to not be collapsed Navbar
.navbar-text n/a Vertically centers text inside a navbar Navbar
.navbar-toggler-icon bootstrap .navbar-toggler-icon The cheeseburger navigation icon is set using an svg background image of three horizontal lines Navbar
.no-gutters 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. Grid
.order-*-* bootstrap .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. Grid
.rounded-* bootstrap .rounded The .img-rounded class was renamed to this and is primarily used with images. However, the class just adds a border radius so you could use this on other elements that you would like a radius applied. Images
.visible n/a Hides the visibility of an element but does not change their display property. Utility
.w-* bootstrap .w- Width utility class that makes the element a percentage width of its parent element. w-(25,50,78,100) Utility
.was-validated bootstrap .was-validated This class is set by Bootstrap's javascript to apply sub class validation styles to the form inputs. Forms
.alert-heading Bootstrap 4 alert heading This class is added to headings inside alerts. It applies color:inherit so the colors match. Alerts
.blockquote bootstrap .blockquote Add to blockquote elements to apply the proper spacing and bottom margin to seperate it from other text. Blockquotes
.blockquote-footer bootstrap blockquote footer Wrapping class for citation text underneath a blockquote. Used to lighten the text color. Blockquotes
.btn-group-lg btn group large Increases the default button group size Button Group
.btn-group-sm .btn-group-sm Decreases the default button group size Button Group
.btn-lg button large Increases the default button size Buttons
.btn-outline-* btn outline bootstrap Transparent background with colored text and border (danger|info|primary|secondary|success|warning) Buttons
.card bootstrap .card The class added to the div that wraps each individual card Cards
.card-body bootstrap 4 card-body This class is added to the first child div inside the div.card parent Cards
.card-columns .card-columns The .card-columns class is added to the wrapping div of of masonry-like collection of cards Cards
.card-* bootstrap card-danger First add .card-inverse and then add one of the contextual background colors (danger|info|primary|secondary|success|warning) Cards
.card-deck bootstrap card-deck Similar to columns Bootstrap card decks are equal height and width Cards
.card-footer bootstrap card footer Wrap class for a card footer content area Cards
.card-group bootstrap .card-group The parent wrapping class around a group of cards. Groups are similar to decks but they have no margin between each card. Cards
.card-header bootstrap .card-header Wrap class for a card header content area Cards
.card-header-pills card-header-pills.png Class added in combination with .nav-pills to add pill navigation to a card header Cards
.card-header-tabs card-header-tabs.png Class added in combination with .nav-pills to add tab navigation to a card header Cards
.card-img card-image.png Add this class to the image you would like to have as a card background image. Used with creating cards with image overlays. Cards
.card-img-bottom card-img-bottom.png Similar to a card footer you can cap the bottom of a card with an image Cards
.card-img-overlay card-img-overlay Wrapper class used to create a card that has a background image overlay Cards
.card-img-top card-img-top.png Similar to a card header you can cap the top of a card with an image Cards
.card-inverse card-inverse.png Inverts the default colors to use light text on a dark background color Cards
.card-link card-link.png Adds spacing around links added inside cards Cards
.card-subtitle card-subtitle Class added to card subtitles that adjusts the default heading styles Cards
.card-text card-text This class wraps the container around card text Cards
.card-title card-title The class added to titles inside cards. It applies the proper spacing. Cards
.carousel-item bootstrap carousel-item The wrapper class applied to each individual carousel item Carousel
.clearfix n/a Clears the floats of any child elements. Add this class to the parent element wrapping the floating elements. Utility
.col-form-label .col-form-label Class added to form labels to apply consistent padding and margins Forms
.col-form-label-lg Increases the font size and spacing of a form label Forms
.col-form-label-sm Decreases the font size and spacing of a form label Forms
.col-form-legend Add this class to form legend elements so they look like labels Forms
.col-xl-* n/a Set column width for anything greater than 1200px. Specify the column span by adding 1-12 at the end Grid system
.custom-checkbox custom checkbox Parent class that converts a default form checkbox into a custom HTML/CSS checkbox Forms
.custom-control n/a Used on all custom form inputs and adds base styles like padding and display:inline Forms
.custom-control-description When this class is added to description text it can pick the contextual class colors like warning and alert Forms
.custom-control-indicator .custom-control-indicator The default input element is hidden and the div.custom-control-indicator is used to build the replacement custom input. Forms
.custom-control-input n/a This class is added to the default input that is going to be replaced. It adds the following: position: absolute; z-index: -1; opacity: 0; Forms
.custom-controls-stacked Custom checkboxes and radios are inline by default. When you add a wrapping div.custom-controls-stacked they become display:block; Forms
.custom-file custom-file Class added to a label of grouped elements to create a custom file upload input Forms
.custom-file-control custom-file-control Similar to the custom-control-indicator class this class is added to a div to build a custom file input using CSS :before and :after. Forms
.custom-file-input n/a This class is added to the default input type="file" and hides it using CSS Forms
.custom-radio custom-radio This class is added to the parent label tag along with .custom-control class to specify what kind of custom input it will be Forms
.custom-select custom-select Class added to a select tag to create a custom select menu Forms
.custom-select-sm custom-select-sm Decreases the font size and padding on a custom select Forms
.d-* inline-inline-block Append the following to change the element display property (block, inline, inline-block) Utility
.disabled disabled Add this class to anchor tags to disable the click functionality but still have them visible. Buttons
.display-* display-headings This set of classes increases the font size of headings in 4 stages. These classes are used for headings outside of the main content of the page like jumbotrons and page headers. Append (1-4) to the end to adjust size. Typography
.dropdown-divider dropdown-divider Class adds a horizontal line between dropdown link items Dropdowns
.dropdown-item dropdown-item This class is added to each link item shown in a dropdown menu Dropdowns
.dropdown-toggle-split dropdown-toggle-split Class added to the notched dropdown navigation. Great for providing additional actions but still having a primary action. Dropdowns
.dropup drop-up Displays the dropdown menu above the button instead of below. Dropdowns
.embed-responsive-* n/a Class used to adjust responsive embed aspect ratio. Append one of the following for the desired aspect ratio (21by9, 16by9, 4by3, 1by1) Utility
.embed-responsive-item n/a By default responsive embeds apply to iframe, object, embed, and video tags. You can add .embed-responsive-item to any other element to have the same responsive styles applied Utility
.figure-caption figure-caption Added to a figure figcaption element to apply font styling Content
.figure-img figure-img Classed added to images inside a figure to apply some margin Content
.font-* font-weight-italic (italic, bold, normal) Utility
.form-check form-check The parent class of form checkboxes Forms
.form-check-inline form-check-inline Class used for a horizontal group of checkmarks or radio buttons Forms
.form-check-input form-check-input This class is added to the input tag for checkboxes and radio buttons. Adds styles for positioning and margins. Forms
.form-check-label form-check-label This class is added to checkbox and radio button labels Forms
.form-control-file form-control-file The class added to input type="file" to apply font and spacing Forms
.form-control-* form-control-lg Apply this class to form elements to increase or decrease its size relative to the default sizing .form-control-(lg, sm) Forms
.form-inline form-inline Use this class to have a series of labels and form elements on a single horizontal row Forms
.form-text form-text This class is used for help text alongside form elements. You can add .text-muted to make the text lighter in color Forms
.has-* has-* The .has-(success, warning, danger) is added to the parent form element container to apply visual feedback to the user on form validation. Forms
.img-fluid This class is applied to images you would like to be responsive or fluid width across various screen sizes. This was .img-responsive in v3 Images
.input-group-* input-group-addon This class lets you extend form controls by adding text or buttons to the left or right of the input. .input-group-(addon|btn) Input Group
.jumbotron-fluid jumbotron-fluid A default jumbotron is not full width but adding this class removes the rounded corners and makes it extend to 100% of its parent Jumbotron
.list-group-flush list-group-flush When adding a list group to a card add this class to the list group to remove the border. Otherwise you will have a double border. Cards
.list-group-item-action Add this class to each anchor in a list-group to remove the default anchor text color List Group
.list-inline list-inline Change ul or ol list to be listed horizontally with a little margin between each li Typography
.m-*-# Sometimes you need to add some margin or padding to element without writing a custom CSS selector. Set margin or padding, the side to apply the spacing, and lastly the size of the spacing (m,p)-(t|r|b|l|x|y|a)-(0,1,2,1.5,3) Utility
.media-bottom media bottom Add this class the div wrapping the media object image to align it to the bottom Media Object
.media-left Add this class the div wrapping the media object image to align it to the left Media Object
.media-middle Add this class the div wrapping the media object image to center it vertically Media Object
.media-right Add this class the div wrapping the media object image to align it to the right Media Object
.nav-item If your nav uses a list add this class to each list item for the proper spacing Navs
.nav-link Each anchor link inside your nav is given this class in order to have the proper styling Navs
.nav-pills Use this class along with .nav to make each nav link into a button Navs
.navbar-light Add this class to your navbar if you would like it to have a light background and dark text Navbar
.navbar-toggler The infamous cheeseburger icon to signify a navigation menu on mobile Navbar
.p-*-# Sometimes you need to add some margin or padding to element without writing a custom CSS selector. Set margin or padding, the side to apply the spacing, and lastly the size of the spacing (m,p)-(t|r|b|l|x|y|a)-(0,1,2,1.5,3) Utilities
.page-item This class is added to each li inside the ul.pagination and floats the li's' Pagination
.page-link This class is added to each anchor link containing the numbers Pagination
.pagination-sm Decreases the font size and spacing of a pagination nav Pagination
.pagination-lg Increases the font size and spacing of a pagination nav Pagination
.pos-f-t n/a Positions an element fixed to the top of the viewport and full width. Utility
.sr-only n/a Hide element to all devices except screen readers Utilities
.sr-only-focusable n/a Combine .sr-only with .sr-only-focusable to show the element again when it’s focused by a user using a keyboard Utilities
.table-bordered Bootstrap 4 table-bordered Adds a 1px stroke around the rows, columns, and table outline Tables
.table-* Bootstrap 4 table classes Contextual classes of different color styles to provide user feedback (active|danger|info|primary|secondary|success|warning) Tables
.table-hover bootstrap table-hover Adds a background color when you hover a table row Tables
.table-inverse bootstrap 4 table-inverse Inverts the entire table to have a dark background and light text Tables
.table-reflow Bootstrap 4 Table Reflow The table header becomes the first column of the table to the left Tables
.table-sm Bootstrap 4 table small Removes vertical padding between table rows so it does not take as much vertical space. Good for tables with a lot of rows. Tables
.table-striped Bootstrap table striped Adds a light background color to every other table row for a striped effect Tables
.text-*-* bootstrap 4 text-right Aligns text left, right or center use choose breakpoint (xs|sm|md|lg|xl) then alignment (left, right, center) Utilities
.thead-default The default table head styling of light background and dark text Tables
.thead-inverse Bootstrap 4 thead-inverse Inverts the table head to have a dark background and light text Tables
.alert bootstrap alert The .alert class adds base styling with padding and margin. Alerts
.alert-* bootstrap alert Change the color of the alert to provide user feedback. (primary, secondary, success, danger, warning, info, light, dark) Alerts
.alert-dismissible bootstrap alert dismissable Similar to a well it is a box with a border and padding. This class and a child element with a .close class lets the user close the alert. Alerts
.alert-link bootstrap alert link When you add links inside alert this class matches the font color to the parent alert class. Alerts
.active bootstrap active Tables contextual class to change row color Tables
.bg-danger bootstrap bg-danger Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Helper Classes
.bg-info bootstrap bg-info Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Helper Classes
.bg-primary bootstrap bg-primary Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Helper Classes
.bg-success bootstrap bg-success Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Helper Classes
.bg-warning bootstrap bg-warning Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Helper Classes
.breadcrumb bootstrap breadcrumbs Indicate the current page's location within a navigational hierarchy. Breadcrumbs
.btn bootstrap btn This class sets the spacing and size of the button. Buttons
.btn-block bootstrap btn block By default buttons are inline this class makes it block to span the full width of its parent. Buttons
.btn-danger bootstrap btn danger Defaults to a red background button Buttons
.btn-group bootstrap btn group Smushes multiple buttons together to make a pill shape. Each button is separated by a vertical line. Button groups
.btn-group-vertical bootstrap btn group vertical Make a set of buttons appear vertically stacked rather than horizontally. Button groups
.btn-info bootstrap btn info Button for information on a topic like terms and conditions. Default is light blue. Buttons
.btn-link bootstrap btn link Keeps the spacing set with the .btn class but removes the outer border. Buttons
.btn-lg bootstrap btn lg Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes. Buttons
.btn-primary bootstrap btn primary Use for the primary action in a set. Buttons
.btn-sm bootstrap btn sm Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes. Buttons
.btn-success bootstrap btn success Defaults to a green background button with dark border. Buttons
.btn-toolbar bootstrap btn toolbar Used to create a row of buttons similar pagination row Button groups
.btn-warning bootstrap btn warning Defaults to a yellow background button with dark border. Buttons
.carousel bootstrap carousel parent carousel class making it position relative Carousel
.carousel-caption bootstrap carousel caption Caption for each slide item Carousel
.carousel-indicators bootstrap carousel indicators parent classed added to an ordered list for the little circles showing what slide you are on Carousel
.carousel-inner bootstrap carousel inner The div wrapper that contains the carousel slide items Carousel
.close bootstrap btn close Use the generic close icon for dismissing content like modals and alerts. Helper Classes
.col-*-* bootstrap col span 1-12 column. Extra small devices Phones ( < 768px), Small devices Tablets (≥768px), Medium devices Desktops (≥992px), Large devices Desktops (≥1200px). Column device Column numeric values can be 1-12. Grid system
.col-*-pull-* bootstrap pull Easily change the order of our built-in grid columns with .col-*-push-* and .col-*-pull-* modifier classes. Pull numeric values can be 0-12. Grid system
.col-*-push-* bootstrap push Easily change the order of our built-in grid columns with .col-*-push-* and .col-*-pull-* modifier classes. Push numeric values can be 0-12. Grid system
.collapse bootstrap collapse hides content on hide and show component Collapse
.collapsing bootstrap collapsing applied during transitions on hide and show component Collapse
.container bootstrap container Fixed width container with widths determined by screen sites. Equal margin on the left and right. Grid system
.container-fluid bootstrap container fluid Spans the full width of the screen Grid system
.dropdown bootstrap 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. Dropdowns
.dropdown-header bootstrap dropdown header Used to add headers inside the dropdown menu Dropdown
.dropdown-menu bootstrap dropdown menu Adds the default styles for the dropdown menu container Dropdown
.dropdown-toggle bootstrap dropdown toggle This class is added to the button that will have the toggle action applied that will hide and show the dropdown menu Dropdown
.embed-responsive bootstrap responsive embed The default responsive iframe embed styles Responsive embed
.embed-responsive-16by9 bootstrap responsive embed Div wrapper class to make child iframe responsive Responsive embed
.embed-responsive-4by3 bootstrap responsive embed Div wrapper class to make child iframe responsive Responsive embed
.fade bootstrap form control To have your alerts use animation when closing, make sure they have the .fade and .in classes already applied to them. Alerts
.form-control bootstrap form control Class added input, textarea, and select to make them 100% and responsive Forms
.form-control-feedback bootstrap form control feedback A form validation class Forms
.form-group bootstrap form group A div wrapper class that goes around a form input and label Forms
.h1 - .h6 bootstrap h1-h6 Apply heading styles to other elements. Make a paragraph look like an h1 Typography
.has-feedback bootstrap has feedback You can also add optional feedback icons with the addition of .has-feedback and the right icon. Forms
.img-thumbnail bootstrap image thumbnail Adds rounded corners and an inset border to an image Images
.info bootstrap info Tables contextual class to change row color" target="_blank" href="https://getbootstrap.com/docs/4.0/content/tables/#contextual-classes Tables
.initialism bootstrap innitialism Add .initialism to an abbreviation for a slightly smaller font-size. Typography
.input-group bootstrap input group Wrapper class used to enhance an input and label group by adding a button in front or behind as help text Input groups
.input-group-addon bootstrap input group addon The class added to an icon or help text in an form .input-group Input groups
.input-group-btn bootstrap input group btn Attaches a button next to a text input. Would work for a search bar or email optin form. Input groups
.invisible bootstrap Make something invisible Helper Classes
.jumbotron bootstrap jumbotron A content section that is used to showcase important content. Commonly used on home pages and category pages. Jumbotron
.lead bootstrap Increase the font size and line height of a paragraph. Good to use on the first paragraph of an article to improve readability. Typography
.list-group bootstrap list group Wrapper ul class that contains li with borders List group
.list-group-item bootstrap list group item Class added to each li in a list-group List group
.list-group-item-text bootstrap list group text Class added to an anchor or p for a .list-group-item text under a heading List group
.list-group-item-* bootstrap list group color Change color of list group item by adding one of the following: default, warning, info, danger, primary List group
.list-inline bootstrap list inline Overrides a lists default style to be inline and block Typography
.list-unstyled bootstrap list unstyled Removes all bullet styling from a ul or ol list Typography
.mark bootstrap For highlighting a run of text due to its relevance in another context, use the mark tag. Typography
.media bootstrap media list Media components are image heading and description text items. Blog comments, portfolio projects, album covers, etc. Media object
.media-body bootstrap media body The class added for the media description copy block Media object
.modal bootstrap The parent wrapper class of modal content Modal
.modal-backdrop Bootstrap classes list with description Added by the modal javascript to make the area around the modal clickable to hide the modal Modal
.modal-body bootstrap The modal body content class : Header - Body - Footer Modal
.modal-content bootstrap modal-content contains modal-body, modal-header, and modal-footer Modal
.modal-dialog bootstrap dialog The secondary wrapper class of the entire modal content Modal
.modal-footer bootstrap The footer of the modal that contains action buttons or help text Modal
.modal-header bootstrap The header section of the modal that contains the title and close button Modal
.modal-lg bootstrap modal large Makes a modal wider Modal
.modal-open Bootstrap classes list with description Javascript adds this class to the body tag to prevent scrolling with the modal is open Modal
.modal-sm bootstrap modal small Makes the modal not as wide Modal
.modal-title bootstrap The title of the modal Modal
.nav bootstrap nav nav base class added all types of navigation: tabs, pills, justified, disabled links Navs
.nav-tabs bootstrap tabs Class added to enable Bootstrap tabs Tab
.navbar bootstrap navbar Navigation header class Navbar
.navbar-brand bootstrap navbar brand Most navbars contain a logo or brand. This class is added to the anchor Navbar
.navbar-nav bootstrap navbar nav The wrapper class of the navigation elements excluding the brand Navbar
.next bootstrap Used in the carousel control to identity the next control Carousel
.pagination bootstrap pagination The wrapper class that contains all of the page navigation Pagination
.pre-scrollable bootstrap You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar. Code
.progress bootstrap progress bar The parent class wrapper of a progress bar Progress bars
.progress-bar bootstrap progress bar The class applied to the progress bar graphic that moves Progress bars
.progress-bar-striped bootstrap progress bar striped Changes progress to a striped version Progress bars
.row bootstrap row used a parent wrapper of any vertical columns Grid system
.small bootstrap small Create lighter, secondary text in any heading with a generic tag or the .small class. Typography
.sr-only Bootstrap classes list with description Hide an element to all devices except screen readers with .sr-only. Helper Classes
.success bootstrap success Tables contextual class to change row color Tables
.tab-pane bootstrap tab-pane Class added to the div that will act as a tab content area Tab
.table bootstrap table Adding this class to a HTML table applies the Bootstrap styles Tables
.table-condensed bootstrap table condensed Removes some padding from the table cells Tables
.table-bordered bootstrap Adds borders to a table and its cells Tables
.table-responsive bootstrap Makes a table responsive by cropping a wide table and makes it scrollable horizontally Tables
.text-capitalize bootstrap text transform Capitalize the text or title case Typography
.text-danger bootstrap text danger Changes text color to danger variable color Typography
.text-hide Bootstrap classes list with description hides the text - useful for replacing text with a background image Typography
.text-info bootstrap text info Changes text color to info variable color Typography
.text-justify bootstrap text alignment Full justifys the text Typography
.text-lowercase bootstrap text transform Changes text to lowercase Typography
.text-muted bootstrap text muted Changes text color to gray Typography
.text-nowrap bootstrap text alignment Prevents the text from wrapping Typography
.text-primary bootstrap text primary Changes text color to your primary color Typography
.text-success bootstrap text success Changes text color to green or your "success" variable color Typography
.text-uppercase bootstrap text transform Makes text uppercase Typography
.text-warning bootstrap text warning Changes a text color to your default "warning" color Typography
.tooltip bootstrap This class is used by the tooltip javascript as the wrapper of the toolitp Tooltip
.tooltip-inner bootstrap The wrapper class of tooltip text. This is generated by the Bootstrap javascript
Some tooltip text!
Tooltip

Pixels to Rem Conversion Table

If you are working with a PSD file set in pixels you will often need to convert this to Rems. In Bootstrap 4 the default font size is 16px or 1 Rem

Pixels Rems
Pixels Rems
1 0.0625
2 0.125
3 0.1875
4 0.25
5 0.3125
6 0.375
7 0.4375
8 0.5
9 0.5625
10 0.625
11 0.6875
12 0.75
13 0.8125
14 0.875
15 0.9375
16 1
17 1.0625
18 1.125
19 1.1875
20 1.25
21 1.3125
22 1.375
23 1.4375
24 1.5
25 1.5625
26 1.625
27 1.6875
28 1.75
29 1.8125
30 1.875
31 1.9375
32 2
33 2.0625
34 2.125
35 2.1875
36 2.25
37 2.3125
38 2.375
39 2.4375
40 2.5
41 2.5625
42 2.625
43 2.6875
44 2.75
45 2.8125
46 2.875
47 2.9375
48 3
49 3.0625
50 3.125

Common Units of Measure - 15px, 16px (1rem), and 30px Multiples List

The Bootstrap grid defaults to 15px padding on the left and right of each column. So that makes a 30px gutter between two columns. When you are working on a design you will probably want to work with these common units of measure to determine heights of objects.

Multiples of 15px Multiples of 30px Multiples of 16px
2
15 30 16
3
30 60 32
4
45 90 48
5
60 120 64
6
75 150 80
7
90 180 96
8
105 210 112
9
120 240 128
10
135 270 144
11
150 300 160
12
165 330 176
13
180 360 192
14
195 390 208
15
210 420 224
16
225 450 240
17
240 480 256
18
255 510 272
19
270 540 288
20
285 570 304
21
300 600 320
22
315 630 336
23
330 660 352
24
345 690 368
25
360 720 384
26
375 750 400
27
390 780 416
28
405 810 432
29
420 840 448
30
435 870 464
31
450 900 480
32
465 930 496
33
480 960 512
34
495 990 528
35
510 1020 544
36
525 1050 560
37
540 1080 576
38
555 1110 592
39
570 1140 608
40
585 1170 624
41
600 1200 640
42
615 1230 656
43
630 1260 672
44
645 1290 688
45
660 1320 704
46
675 1350 720
47
690 1380 736
48
705 1410 752
49
720 1440 768
50
735 1470 784
51
750 1500 800
52
765 1530 816
53
780 1560 832
54
795 1590 848
55
810 1620 864
56
825 1650 880
57
840 1680 896
58
855 1710 912
59
870 1740 928
60
885 1770 944
61
900 1800 960
62
915 1830 976
63
930 1860 992
64
945 1890 1008
65
960 1920 1024
66
975 1950 1040
67
990 1980 1056
68
1005 2010 1072
69
1020 2040 1088
70
1035 2070 1104
71
1050 2100 1120
72
1065 2130 1136
73
1080 2160 1152
74
1095 2190 1168
75
1110 2220 1184
76
1125 2250 1200
77
1140 2280 1216
78
1155 2310 1232
79
1170 2340 1248
80
1185 2370 1264
81
1200 2400 1280
82
1215 2430 1296
83
1230 2460 1312
84
1245 2490 1328
85
1260 2520 1344
86
1275 2550 1360
87
1290 2580 1376
88
1305 2610 1392
89
1320 2640 1408
90
1335 2670 1424
91
1350 2700 1440
92
1365 2730 1456
93
1380 2760 1472
94
1395 2790 1488
95
1410 2820 1504
96
1425 2850 1520
97
1440 2880 1536
98
1455 2910 1552
99
1470 2940 1568
100
1485 2970 1584

Learn Bootstrap 4 Layout Basics... Step by Step

Update Your Resumé/CV and Learn Responsive Web Design Basics.

Learn More
Sources: Bootstrap 4 Classes List