Complete List of All Bootstrap 4 Classes


Looking for a Bootstrap 3 Cheat Sheet?  Go Now

Click each column header to sort alphabetically.

Class NamePreviewDescriptionCategory
.alert-headingBootstrap 4 alert headingNew This class is added to headings inside alerts. It applies color:inherit so the colors match.Alerts
.bg-fadedBootstrap 4 background fadedNew applies a light gray background to elements. Commonly used on navbars.Utility Classes
.bg-inversebootstrap 4 bg-inverseNew When added to a navbar with .navbar-dark you can have a dark background and light link textNavbar
.blockquotebootstrap .blockquoteNew Add to blockquote elements to apply the proper spacing and a left gray borderBlockquotes
.blockquote-footerbootstrap blockquote footerNew Wrapping class for citation text underneath a blockquote. Used to lighten the text color.Blockquotes
.blockquote-reverseblockquote reverse bootstrapNew Aligns the blockquote's text to the right instead of the leftBlockquotes
.btn-group-lgbtn group largeNew Increases the default button group sizeButton Group
.btn-group-sm.btn-group-smNew Decreases the default button group sizeButton Group
.btn-lgbutton largeNew Increases the default button sizeButtons
.btn-outline-*btn outline bootstrapNew Transparent background with colored text and border (danger|info|primary|secondary|success|warning)Buttons
.cardbootstrap .cardNew The class added to the div that wraps each individual cardCards
.card-blockbootstrap 4 card-blockNew This class is added to the first child div inside the div.card parentCards
.card-blockquotecard-blockquoteNew This class is added to a blockquote tag and removes the margin below to keep the spacing consistentCards
.card-columns.card-columnsNew The .card-columns class is added to the wrapping div of of masonry-like collection of cardsCards
.card-*bootstrap card-dangerNew First add .card-inverse and then add one of the contextual background colors (danger|info|primary|secondary|success|warning)Cards
.card-deckbootstrap card-deckNew Similar to columns Bootstrap card decks are equal height and widthCards
.card-deck-wrapperbootstrap card-deck-wrapperNew The parent wrapping element for a deck of cardsCards
.card-footerbootstrap card footerNew Wrap class for a card footer content areaCards
.card-groupbootstrap .card-groupNew The parent wrapping class around a group of cards. Groups are similar to decks but they have no margin between each card.Cards
.card-headerbootstrap .card-headerNew Wrap class for a card header content areaCards
.card-header-pillscard-header-pills.pngNew Class added in combination with .nav-pills to add pill navigation to a card headerCards
.card-header-tabscard-header-tabs.pngNew Class added in combination with .nav-pills to add tab navigation to a card headerCards
.card-imgcard-image.pngNew 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-bottomcard-img-bottom.pngNew Similar to a card footer you can cap the bottom of a card with an imageCards
.card-img-overlaycard-img-overlayNew Wrapper class used to create a card that has a background image overlayCards
.card-img-topcard-img-top.pngNew Similar to a card header you can cap the top of a card with an imageCards
.card-inversecard-inverse.pngNew Inverts the default colors to use light text on a dark background colorCards
.card-linkcard-link.pngNew Adds spacing around links added inside cardsCards
.card-outline-*card-outline.pngNew You can add contextual classes to colors to change the border color (danger|info|primary|secondary|success|warning)Cards
.card-subtitlecard-subtitleNew Class added to card subtitles that adjusts the default heading stylesCards
.card-textcard-textNew This class wraps the container around card textCards
.card-titlecard-titleNew The class added to titles inside cards. It applies the proper spacing.Cards
.carousel-itembootstrap carousel-itemNew The wrapper class applied to each individual carousel itemCarousel
.clearfixn/aNew Clears the floats of any child elements. Add this class to the parent element wrapping the floating elements.Utility
.col-form-label.col-form-labelNew Class added to form labels to apply consistent padding and marginsForms
.col-form-label-lgNew Increases the font size and spacing of a form labelForms
.col-form-label-sm New Decreases the font size and spacing of a form labelForms
.col-form-legendNew Add this class to form legend elements so they look like labelsForms
.col-xl-*n/aNew Set column width for anything greater than 1200px. Specify the column span by adding 1-12 at the endGrid system
.custom-checkboxcustom checkboxNew Parent class that converts a default form checkbox into a custom HTML/CSS checkboxForms
.custom-controln/aNew Used on all custom form inputs and adds base styles like padding and display:inlineForms
.custom-control-descriptionNew When this class is added to description text it can pick the contextual class colors like warning and alertForms
.custom-control-indicator.custom-control-indicatorNew 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/aNew 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-stackedNew Custom checkboxes and radios are inline by default. When you add a wrapping div.custom-controls-stacked they become display:block;Forms
.custom-filecustom-fileNew Class added to a label of grouped elements to create a custom file upload inputForms
.custom-file-controlcustom-file-controlNew 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/aNew This class is added to the default input type="file" and hides it using CSSForms
.custom-radiocustom-radioNew This class is added to the parent label tag along with .custom-control class to specify what kind of custom input it will beForms
.custom-selectcustom-selectNew Class added to a select tag to create a custom select menuForms
.custom-select-smcustom-select-smNew Decreases the font size and padding on a custom selectForms
.d-* inline-inline-blockNew Append the following to change the element display property (block, inline, inline-block)Utility
.disableddisabledNew Add this class to anchor tags to disable the click functionality but still have them visible.Buttons
.display-*display-headingsNew 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-dividerdropdown-dividerNew Class adds a horizontal line between dropdown link itemsDropdowns
.dropdown-itemdropdown-itemNew This class is added to each link item shown in a dropdown menuDropdowns
.dropdown-toggle-splitdropdown-toggle-splitNew Class added to the notched dropdown navigation. Great for providing additional actions but still having a primary action.Dropdowns
.dropupdrop-upNew Displays the dropdown menu above the button instead of below.Dropdowns
.embed-responsive-* n/aNew 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/aNew 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 appliedUtility
.figure-captionfigure-captionNew Added to a figure figcaption element to apply font stylingContent
.figure-imgfigure-imgNew Classed added to images inside a figure to apply some marginContent
.font-*font-weight-italicNew (italic, bold, normal)Utility
.form-checkform-checkNew The parent class of form checkboxesForms
.form-check-inlineform-check-inlineNew Class used for a horizontal group of checkmarks or radio buttonsForms
.form-check-inputform-check-inputNew This class is added to the input tag for checkboxes and radio buttons. Adds styles for positioning and margins.Forms
.form-check-labelform-check-labelNew This class is added to checkbox and radio button labelsForms
.form-control-file form-control-fileNew The class added to input type="file" to apply font and spacingForms
.form-control-* form-control-lgNew 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-inlineNew Use this class to have a series of labels and form elements on a single horizontal rowForms
.form-text form-textNew This class is used for help text alongside form elements. You can add .text-muted to make the text lighter in colorForms
.has-* has-*New The .has-(success, warning, danger) is added to the parent form element container to apply visual feedback to the user on form validation.Forms
.hidden-*-* New Add this class to elements you would like to apply display:none and on what breakpoints .hidden-(xs|sm|md|lg|xl)-(up|down)Responsive Utilities
.img-fluid New This class is applied to images you would like to be responsive or fluid width across various screen sizes. This was .img-responsive in v3Images
.input-group-* input-group-addonNew 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-fluidNew A default jumbotron is not full width but adding this class removes the rounded corners and makes it extend to 100% of its parentJumbotron
.list-group-flush list-group-flushNew 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 New Add this class to each anchor in a list-group to remove the default anchor text colorList Group
.list-inline list-inlineNew Change ul or ol list to be listed horizontally with a little margin between each liTypography
.m-*-# New 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 bottomNew Add this class the div wrapping the media object image to align it to the bottomMedia Object
.media-left New Add this class the div wrapping the media object image to align it to the leftMedia Object
.media-middle New Add this class the div wrapping the media object image to center it verticallyMedia Object
.media-right New Add this class the div wrapping the media object image to align it to the rightMedia Object
.nav-inline New This sets a series of navigation links in a horizontal bandNavs
.nav-item New If your nav uses a list add this class to each list item for the proper spacingNavs
.nav-link New Each anchor link inside your nav is given this class in order to have the proper stylingNavs
.nav-pills New Use this class along with .nav to make each nav link into a buttonNavs
.nav-stacked New By default .nav-pills are horizontal. This class makes them stackedNavs
.navbar-full n/aNew This class makes your navbar full widthNavbar
.navbar-light New Add this class to your navbar if you would like it to have a light background and dark textNavbar
.navbar-toggleable-* n/aNew This class is used with the .navbar-toggler to specify when you want the mobile navigation to appear .navbar-toggleable-(md|sm|xs)Navbar
.navbar-toggler New The infamous cheeseburger icon to signify a navigation menu on mobileNavbar
.offset-*-# New This class lets you move columns right by increasing the left margin by a set number of columns you specify like .offset-(xs|sm|md|lg|xl)-(1-11)Grid system
.p-*-# New 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 New This class is added to each li inside the ul.pagination and floats the li's'Pagination
.page-link New This class is added to each anchor link containing the numbersPagination
.pagination-sm New Decreases the font size and spacing of a pagination navPagination
.pagination-lgNew Increases the font size and spacing of a pagination navPagination
.pos-f-t n/aNew Positions an element fixed to the top of the viewport and full width.Utility
.progress-animatedprogress animatedNew Animates the progress bars left to rightProgress
.pull-*-*New Change the order of grid columns and for various breakpoints (xs|sm|md|lg|xl)-(0-12)Grid system
.push-*-* New Change the order of grid columns and for various breakpoints (xs|sm|md|lg|xl)-(0-12)Grid system
.sr-only n/aNew Hide element to all devices except screen readersUtilities
.sr-only-focusable n/aNew Combine .sr-only with .sr-only-focusable to show the element again when it’s focused by a user using a keyboardUtilities
.table-borderedBootstrap 4 table-borderedNew Adds a 1px stroke around the rows, columns, and table outlineTables
.table-*Bootstrap 4 table classesNew Contextual classes of different color styles to provide user feedback (active|danger|info|primary|secondary|success|warning)Tables
.table-hoverbootstrap table-hoverNew Adds a background color when you hover a table rowTables
.table-inversebootstrap 4 table-inverseNew Inverts the entire table to have a dark background and light textTables
.table-reflowBootstrap 4 Table ReflowNew The table header becomes the first column of the table to the leftTables
.table-smBootstrap 4 table smallNew 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-stripedBootstrap table stripedNew Adds a light background color to every other table row for a striped effectTables
.text-*-*bootstrap 4 text-rightNew Aligns text left, right or center use choose breakpoint (xs|sm|md|lg|xl) then alignment (left, right, center)Utilities
.thead-defaultNew The default table head styling of light background and dark textTables
.thead-inverseBootstrap 4 thead-inverseNew Inverts the table head to have a dark background and light textTables
.w-100bootstrap 4 100% width classNew make an element as wide as its parent using the .w-100 utility class, which sets width: 100%.Utilities
.alert bootstrap alertSimilar to a well it is a box with a border and padding. The .alert class adds the padding and margin.Alerts
.alert-danger bootstrap alert dangerSimilar to a well it is a box with a border and padding. The .alert class adds the padding and margin. Defaults as red background color.Alerts
.alert-dismissible bootstrap alert dismissableSimilar 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-info bootstrap alertSimilar to a well it is a box with a border and padding. The .alert class adds the padding and margin. Defaults as blue background color.Alerts
.alert-link bootstrap alert linkWhen you add links inside alert this class matches the font color to the parent alert class.Alerts
.alert-success bootstrap alert successSimilar to a well it is a box with a border and padding. The .alert class adds the padding and margin. Defaults as green background color.Alerts
.alert-warning bootstrap alert warningSimilar to a well it is a box with a border and padding. The .alert class adds the padding and margin. Defaults as yellow background color.Alerts
.active bootstrap activeTables contextual class to change row colorTables
.dl-horizontal bootstrap horizontal definition listMakes terms and definitions line up with a center gutterBadges
.bg-danger bootstrap bg-dangerSimilar 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-infoSimilar 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-primarySimilar 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-successSimilar 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-warningSimilar 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 breadcrumbsIndicate the current page's location within a navigational hierarchy.Breadcrumbs
.btn bootstrap btnThis class sets the spacing and size of the button.Buttons
.btn-block bootstrap btn blockBy default buttons are inline this class makes it block to span the full width of its parent.Buttons
.btn-danger bootstrap btn dangerDefaults to a red background buttonButtons
.btn-group bootstrap btn groupSmushes multiple buttons together to make a pill shape. Each button is separated by a vertical line.Button groups
.btn-group-vertical bootstrap btn group verticalMake a set of buttons appear vertically stacked rather than horizontally.Button groups
.btn-info bootstrap btn infoButton for information on a topic like terms and conditions. Default is light blue.Buttons
.btn-link bootstrap btn linkKeeps the spacing set with the .btn class but removes the outer border.Buttons
.btn-lg bootstrap btn lgFancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.Buttons
.btn-primary bootstrap btn primaryUse for the primary action in a set.Buttons
.btn-sm bootstrap btn smFancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.Buttons
.btn-success bootstrap btn successDefaults to a green background button with dark border.Buttons
.btn-toolbar bootstrap btn toolbarUsed to create a row of buttons similar pagination rowButton groups
.btn-warning bootstrap btn warningDefaults to a yellow background button with dark border.Buttons
.carousel bootstrap carouselparent carousel class making it position relativeCarousel
.carousel-caption bootstrap carousel captionCaption for each slide itemCarousel
.carousel-control bootstrap controlAdded to each next and previous anchorsCarousel
.carousel-indicators bootstrap carousel indicatorsparent classed added to an ordered list for the little circles showing what slide you are onCarousel
.carousel-inner bootstrap carousel innerThe div wrapper that contains the carousel slide itemsCarousel
.checkbox bootstrap checkboxform checkbox wrapper - Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.Forms
.checkbox-inline bootstrap checkbox inlineCheckboxes are for selecting one or several options in a list, while radios are for selecting one option from many.Forms
.close bootstrap btn closeUse the generic close icon for dismissing content like modals and alerts.Helper Classes
.col-*-* bootstrap colspan 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-*-offset-* bootstrap col offsetMove columns to the right using .col-lg-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-lg-offset-4 moves .col-lg-4 over four columns. Offset numeric values can be 0-12Grid system
.col-*-pull-* bootstrap pullEasily 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 pushEasily 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 collapsehides content on hide and show componentCollapse
.collapsing bootstrap collapsingapplied during transitions on hide and show componentCollapse
.container bootstrap containerFixed width container with widths determined by screen sites. Equal margin on the left and right.Grid system
.container-fluid bootstrap container fluidSpans the full width of the screenGrid system
.danger bootstrap dangerTables contextual class to change row colorTables
.dropdown bootstrap dropdownThis 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-backdropBootstrap classes list with description On mobile devices, opening a dropdown adds a .dropdown-backdrop as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.Dropdown
.dropdown-header bootstrap dropdown header Used to add headers inside the dropdown menuDropdown
.dropdown-menu bootstrap dropdown menu Adds the default styles for the dropdown menu containerDropdown
.dropdown-toggle bootstrap dropdown toggleThis class is added to the button that will have the toggle action applied that will hide and show the dropdown menuDropdown
.embed-responsive bootstrap responsive embed The default responsive iframe embed stylesResponsive embed
.embed-responsive-16by9 bootstrap responsive embedDiv wrapper class to make child iframe responsiveResponsive embed
.embed-responsive-4by3 bootstrap responsive embedDiv wrapper class to make child iframe responsiveResponsive embed
.fade bootstrap form controlTo 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 controlClass added input, textarea, and select to make them 100% and responsiveForms
.form-control-feedback bootstrap form control feedbackA form validation classForms
.form-control-static bootstrap form control staticLets you add plain text to the right of a label. For example, Email label could have help textForms
.form-group bootstrap form groupA div wrapper class that goes around a form input and labelForms
.h1 - .h6 bootstrap h1-h6Apply heading styles to other elements. Make a paragraph look like an h1Typography
.has-feedback bootstrap has feedbackYou can also add optional feedback icons with the addition of .has-feedback and the right icon.Forms
.hidden-print bootstrap hidden printSimilar to the regular responsive classes, use these for toggling content for print.Utility
.icon-next bootstrap nextGlyphicon icons not necessary - The .glyphicon .glyphicon-chevron-left and .glyphicon .glyphicon-chevron-right classes are not necessarily needed for the controls. Bootstrap provides .icon-prev and .icon-next as plain unicode alternatives.Carousel
.icon-prev bootstrap nextGlyphicon icons not necessary - The .glyphicon .glyphicon-chevron-left and .glyphicon .glyphicon-chevron-right classes are not necessarily needed for the controls. Bootstrap provides .icon-prev and .icon-next as plain unicode alternatives.Carousel
.img-circle bootstrap image circleCrops an image to be a circleImages
.img-rounded bootstrap image roundedAdds rounded corners to an imageImages
.img-thumbnail bootstrap image thumbnailAdds rounded corners and an inset border to an imageImages
.in bootstrap inTo make tabs http://v4-alpha.getbootstrap.com/components/alerts/#dismissing in, add .http://v4-alpha.getbootstrap.com/components/alerts/#dismissing to each .tab-pane. The first tab pane must also have .in to make the initial content visible.Tab
.info bootstrap infoTables contextual class to change row color" target="_blank" href="http://v4-alpha.getbootstrap.com/content/tables/#contextual-classesTables
.initialism bootstrap innitialismAdd .initialism to an abbreviation for a slightly smaller font-size.Typography
.input-group bootstrap input groupWrapper class used to enhance an input and label group by adding a button in front or behind as help textInput groups
.input-group-addon bootstrap input group addonThe class added to an icon or help text in an form .input-groupInput groups
.input-group-btn bootstrap input group btnAttaches a button next to a text input. Would work for a search bar or email optin form.Input groups
.invisible bootstrap Make something invisibleHelper Classes
.jumbotron bootstrap jumbotronA 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
.left bootstrap Used to identify the left carousel controlCarousel
.list-group bootstrap list groupWrapper ul class that contains li with bordersList group
.list-group-item bootstrap list group itemClass added to each li in a list-groupList group
.list-group-item-heading bootstrap list group headingClass added to an anchor or p for a .list-group-item headingList group
.list-group-item-text bootstrap list group textClass added to an anchor or p for a .list-group-item text under a headingList group
.list-group-item-* bootstrap list group colorChange color of list group item by adding one of the following: default, warning, info, danger, primaryList group
.list-inline bootstrap list inlineOverrides a lists default style to be inline and blockTypography
.list-unstyled bootstrap list unstyledRemoves all bullet styling from a ul or ol listTypography
.mark bootstrap For highlighting a run of text due to its relevance in another context, use the mark tag.Typography
.media bootstrap media listMedia components are image heading and description text items. Blog comments, portfolio projects, album covers, etc.Media object
.media-body bootstrap media bodyThe class added for the media description copy blockMedia object
.media-heading bootstrap media headingThe class applied to a heading in a media componentMedia object
.media-list bootstrap media objectNested media lists would be good used as commentsMedia object
.media-object bootstrap Class added to a media component imageMedia object
.modal bootstrap The parent wrapper class of modal contentModal
.modal-backdropBootstrap classes list with descriptionAdded by the modal javascript to make the area around the modal clickable to hide the modalModal
.modal-body bootstrap The modal body content class : Header - Body - FooterModal
.modal-content bootstrap modal-content contains modal-body, modal-header, and modal-footerModal
.modal-dialog bootstrap dialogThe secondary wrapper class of the entire modal contentModal
.modal-footer bootstrap The footer of the modal that contains action buttons or help textModal
.modal-header bootstrap The header section of the modal that contains the title and close buttonModal
.modal-lg bootstrap modal largeMakes a modal widerModal
.modal-openBootstrap classes list with descriptionJavascript adds this class to the body tag to prevent scrolling with the modal is openModal
.modal-sm bootstrap modal smallMakes the modal not as wideModal
.modal-title bootstrap The title of the modalModal
.nav bootstrap navnav base class added all types of navigation: tabs, pills, justified, disabled linksNavs
.nav-tabs bootstrap tabsClass added to enable Bootstrap tabsTab
.navbar bootstrap navbarNavigation header classNavbar
.navbar-brand bootstrap navbar brandMost navbars contain a logo or brand. This class is added to the anchorNavbar
.navbar-fixed-bottom bootstrap navbar fixed footerFixes the footer to the bottom of the windowNavbar
.navbar-fixed-top bootstrap navbar static topAffixes the navbar to the top of the windowNavbar
.navbar-nav bootstrap navbar navThe wrapper class of the navigation elements excluding the brandNavbar
.next bootstrap Used in the carousel control to identity the next controlCarousel
.pagination bootstrap paginationThe wrapper class that contains all of the page navigationPagination
.popover bootstrap A popover is similar to a tooltip but activated on clickPopover
.popover-content bootstrap A popover is similar to a tooltip but activated on clickPopover
.popover-title bootstrap A popover is similar to a tooltip but activated on clickPopover
.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
.prev bootstrap used in the carousel component for previous linkCarousel
.progress bootstrap progress barThe parent class wrapper of a progress barProgress bars
.progress-bar bootstrap progress barThe class applied to the progress bar graphic that movesProgress bars
.progress-bar-striped bootstrap progress bar stripedChanges progress to a striped versionProgress bars
.right bootstrap Used in the carouselCarousel
.row bootstrap rowused a parent wrapper of any vertical columnsGrid system
.small bootstrap smallCreate lighter, secondary text in any heading with a generic tag or the .small class. Typography
.sr-onlyBootstrap classes list with descriptionHide an element to all devices except screen readers with .sr-only.Helper Classes
.success bootstrap successTables contextual class to change row colorTables
.tab-pane bootstrap tab-paneClass added to the div that will act as a tab content areaTab
.table bootstrap tableAdding this class to a HTML table applies the Bootstrap stylesTables
.table-condensed bootstrap table condensedRemoves some padding from the table cellsTables
.table-bordered bootstrap Adds borders to a table and its cellsTables
.table-responsive bootstrap Makes a table responsive by cropping a wide table and makes it scrollable horizontallyTables
.text-capitalize bootstrap text transformCapitalize the text or title caseTypography
.text-danger bootstrap text dangerChanges text color to danger variable colorTypography
.text-hideBootstrap classes list with descriptionhides the text - useful for replacing text with a background imageTypography
.text-info bootstrap text infoChanges text color to info variable colorTypography
.text-justify bootstrap text alignmentFull justifys the textTypography
.text-lowercase bootstrap text transformChanges text to lowercaseTypography
.text-muted bootstrap text mutedChanges text color to grayTypography
.text-nowrap bootstrap text alignmentPrevents the text from wrappingTypography
.text-primary bootstrap text primaryChanges text color to your primary colorTypography
.text-success bootstrap text successChanges text color to green or your "success" variable colorTypography
.text-uppercase bootstrap text transformMakes text uppercaseTypography
.text-warning bootstrap text warningChanges a text color to your default "warning" colorTypography
.tooltip bootstrap This class is used by the tooltip javascript as the wrapper of the toolitpTooltip
.tooltip-arrow bootstrap This is the arrow pointer on tooltips that can be positionedTooltip
.tooltip-inner bootstrap The wrapper class of tooltip text. This is generated by the Bootstrap javascript
Some tooltip text!
Tooltip
.visible-print-block bootstrap Use a single or combination of the available classes for toggling content across viewport breakpoints.Utility
.visible-print-inline bootstrap Use a single or combination of the available classes for toggling content across viewport breakpoints.Utility
.visible-print-inline-block bootstrap Use a single or combination of the available classes for toggling content across viewport breakpoints.Utility
.warning bootstrap Tables contextual class to change row colorTables

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

PixelsRems
PixelsRems
10.0625
20.125
30.1875
40.25
50.3125
60.375
70.4375
80.5
90.5625
100.625
110.6875
120.75
130.8125
140.875
150.9375
161
171.0625
181.125
191.1875
201.25
211.3125
221.375
231.4375
241.5
251.5625
261.625
271.6875
281.75
291.8125
301.875
311.9375
322
332.0625
342.125
352.1875
362.25
372.3125
382.375
392.4375
402.5
412.5625
422.625
432.6875
442.75
452.8125
462.875
472.9375
483
493.0625
503.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 15pxMultiples of 30pxMultiples of 16px
2
153016
3
306032
4
459048
5
6012064
6
7515080
7
9018096
8
105210112
9
120240128
10
135270144
11
150300160
12
165330176
13
180360192
14
195390208
15
210420224
16
225450240
17
240480256
18
255510272
19
270540288
20
285570304
21
300600320
22
315630336
23
330660352
24
345690368
25
360720384
26
375750400
27
390780416
28
405810432
29
420840448
30
435870464
31
450900480
32
465930496
33
480960512
34
495990528
35
5101020544
36
5251050560
37
5401080576
38
5551110592
39
5701140608
40
5851170624
41
6001200640
42
6151230656
43
6301260672
44
6451290688
45
6601320704
46
6751350720
47
6901380736
48
7051410752
49
7201440768
50
7351470784
51
7501500800
52
7651530816
53
7801560832
54
7951590848
55
8101620864
56
8251650880
57
8401680896
58
8551710912
59
8701740928
60
8851770944
61
9001800960
62
9151830976
63
9301860992
64
94518901008
65
96019201024
66
97519501040
67
99019801056
68
100520101072
69
102020401088
70
103520701104
71
105021001120
72
106521301136
73
108021601152
74
109521901168
75
111022201184
76
112522501200
77
114022801216
78
115523101232
79
117023401248
80
118523701264
81
120024001280
82
121524301296
83
123024601312
84
124524901328
85
126025201344
86
127525501360
87
129025801376
88
130526101392
89
132026401408
90
133526701424
91
135027001440
92
136527301456
93
138027601472
94
139527901488
95
141028201504
96
142528501520
97
144028801536
98
145529101552
99
147029401568
100
148529701584

Work Less and Earn More.

Bootstrap 4 will help you build beautiful responsive websites... fast. It will make you more efficient and productive. My Bootstrap 4 Quick Start will guide you step by step as you learn what's new.

Get a Book Sample
Sources: Bootstrap 4 Classes List