Searchable Table of Bootstrap Classes

class_name description category URLs
0 .alert-link When you add links inside alert this class matches the font color to the parent alert class. Alerts bootstrap docs
1 .alert-heading This class is added to headings inside alerts. It applies color:inherit so the colors match. Alerts bootstrap docs
2 .fade To have your alerts use animation when closing, make sure they have the .fade and .in classes already applied to them. Alerts bootstrap docs
3 .alert The .alert class adds base styling with padding and margin. Alerts bootstrap docs
4 .alert-* Change the color of the alert to provide user feedback. (primary, secondary, success, danger, warning, info, light, dark) Alerts bootstrap docs
5 .alert-dismissible 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 bootstrap docs
6 .badge-* Used for labels and counters in applications Badge bootstrap docs
7 .blockquote Add to blockquote elements to apply the proper spacing and bottom margin to seperate it from other text. Blockquotes None
8 .blockquote-footer Wrapping class for citation text underneath a blockquote. Used to lighten the text color. Blockquotes None
9 .breadcrumb Indicate the current page's location within a navigational hierarchy. Breadcrumbs bootstrap docs
10 .btn-group-toggle This class replaces an input checkbox with a custom style that is toggable on click Button Group bootstrap docs
11 .btn-group-lg Increases the default button group size Button Group bootstrap docs
12 .btn-group-sm Decreases the default button group size Button Group bootstrap docs
13 .btn-group Smushes multiple buttons together to make a pill shape. Each button is separated by a vertical line. Button groups bootstrap docs
14 .btn-group-vertical Make a set of buttons appear vertically stacked rather than horizontally. Button groups bootstrap docs
15 .btn-toolbar Used to create a row of buttons similar pagination row Button groups bootstrap docs
16 .btn-lg Increases the default button size Buttons bootstrap docs
17 .btn-outline-* Transparent background with colored text and border (danger|info|primary|secondary|success|warning) Buttons bootstrap docs
18 .btn-success Defaults to a green background button with dark border. Buttons bootstrap docs
19 .btn-warning Defaults to a yellow background button with dark border. Buttons bootstrap docs
20 .disabled Add this class to anchor tags to disable the click functionality but still have them visible. Buttons bootstrap docs
21 .btn-info Button for information on a topic like terms and conditions. Default is light blue. Buttons bootstrap docs
22 .btn-sm Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes. Buttons bootstrap docs
23 .btn This class sets the spacing and size of the button. Buttons bootstrap docs
24 .btn-primary Use for the primary action in a set. Buttons bootstrap docs
25 .btn-block By default buttons are inline this class makes it block to span the full width of its parent. Buttons bootstrap docs
26 .btn-lg Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes. Buttons bootstrap docs
27 .btn-link Keeps the spacing set with the .btn class but removes the outer border. Buttons bootstrap docs
28 .btn-danger Defaults to a red background button Buttons bootstrap docs
29 .btn-outline-* A button variation to have outlined buttons instead of a solid background. Buttons bootstrap docs
30 .card-header-tabs Class added in combination with .nav-pills to add tab navigation to a card header Cards bootstrap docs
31 .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 bootstrap docs
32 .card-img Add this class to the image you would like to have as a card background image. Used with creating cards with image overlays. Cards bootstrap docs
33 .card-* First add .card-inverse and then add one of the contextual background colors (danger|info|primary|secondary|success|warning) Cards bootstrap docs
34 .card The class added to the div that wraps each individual card Cards bootstrap docs
35 .card-body This class is added to the first child div inside the div.card parent Cards bootstrap docs
36 .card-columns The .card-columns class is added to the wrapping div of of masonry-like collection of cards Cards bootstrap docs
37 .card-deck Similar to columns Bootstrap card decks are equal height and width Cards bootstrap docs
38 .card-footer Wrap class for a card footer content area Cards bootstrap docs
39 .card-text This class wraps the container around card text Cards bootstrap docs
40 .card-title The class added to titles inside cards. It applies the proper spacing. Cards bootstrap docs
41 .card-img-overlay Wrapper class used to create a card that has a background image overlay Cards bootstrap docs
42 .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 bootstrap docs
43 .card-img-bottom Similar to a card footer you can cap the bottom of a card with an image Cards bootstrap docs
44 .card-header Wrap class for a card header content area Cards bootstrap docs
45 .card-subtitle Class added to card subtitles that adjusts the default heading styles Cards bootstrap docs
46 .card-header-pills Class added in combination with .nav-pills to add pill navigation to a card header Cards bootstrap docs
47 .card-link Adds spacing around links added inside cards Cards bootstrap docs
48 .card-inverse Inverts the default colors to use light text on a dark background color Cards bootstrap docs
49 .card-img-top Similar to a card header you can cap the top of a card with an image Cards bootstrap docs
50 .carousel-item The wrapper class applied to each individual carousel item Carousel bootstrap docs
51 .carousel-indicators parent classed added to an ordered list for the little circles showing what slide you are on Carousel bootstrap docs
52 .carousel-inner The div wrapper that contains the carousel slide items Carousel bootstrap docs
53 .carousel parent carousel class making it position relative Carousel bootstrap docs
54 .carousel-caption Caption for each slide item Carousel bootstrap docs
55 .carousel-control-* When you have an image carousel with pagination you will use this class on the previous and next anchor links. Carousel bootstrap docs
56 .next Used in the carousel control to identity the next control Carousel bootstrap docs
57 .pre-scrollable You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar. Code None
58 .collapsing applied during transitions on hide and show component Collapse bootstrap docs
59 .collapse hides content on hide and show component Collapse bootstrap docs
60 .text-* Changes text color to a contextual color or grayscale value Color bootstrap docs
61 .figure-caption Added to a figure figcaption element to apply font styling Content None
62 .figure-img Classed added to images inside a figure to apply some margin Content None
63 .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 None
64 .dropdown-header Used to add headers inside the dropdown menu Dropdown None
65 .dropdown-menu Adds the default styles for the dropdown menu container Dropdown None
66 .dropdown-divider Class adds a horizontal line between dropdown link items Dropdowns bootstrap docs
67 .dropdown-item This class is added to each link item shown in a dropdown menu Dropdowns bootstrap docs
68 .dropdown-toggle-split Class added to the notched dropdown navigation. Great for providing additional actions but still having a primary action. Dropdowns bootstrap docs
69 .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 bootstrap docs
70 .dropleft Dropdown menu that opens left of the button Dropdowns bootstrap docs
71 .dropright Dropdown menu that opens right of the button Dropdowns bootstrap docs
72 .dropup Displays the dropdown menu above the button instead of below. Dropdowns bootstrap docs
73 .embed-responsive-4by3 Div wrapper class to make child iframe responsive Embed bootstrap docs
74 .embed-responsive-16by9 Div wrapper class to make child iframe responsive Embed bootstrap docs
75 .embed-responsive The default responsive iframe embed styles Embed bootstrap docs
76 .input-group-text This class adds the background color and text styles to the text inside an input group Forms bootstrap docs
77 .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 bootstrap docs
78 .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 bootstrap docs
79 .form-inline Use this class to have a series of labels and form elements on a single horizontal row Forms bootstrap docs
80 .form-control-* Apply this class to form elements to increase or decrease its size relative to the default sizing .form-control-(lg, sm) Forms bootstrap docs
81 .form-control-file The class added to input type="file" to apply font and spacing Forms bootstrap docs
82 .form-check-label This class is added to checkbox and radio button labels Forms bootstrap docs
83 .form-check-input This class is added to the input tag for checkboxes and radio buttons. Adds styles for positioning and margins. Forms bootstrap docs
84 .form-check-inline Class used for a horizontal group of checkmarks or radio buttons Forms bootstrap docs
85 .form-check The parent class of form checkboxes Forms bootstrap docs
86 .custom-switch Creates a custom form element that looks like a toggle switch found on touch devices. Forms bootstrap docs
87 .custom-select-lg Increases the relative size of a custom form select Forms bootstrap docs
88 .col-form-label-sm Decreases the font size and spacing of a form label Forms bootstrap docs
89 .custom-select Class added to a select tag to create a custom select menu Forms bootstrap docs
90 .form-group A div wrapper class that goes around a form input and label Forms bootstrap docs
91 .form-control Class added input, textarea, and select to make them 100% and responsive Forms bootstrap docs
92 .form-control-plaintext Use the Forms bootstrap docs
93 .form-row Works similar to a grid Forms bootstrap docs
94 .custom-select-sm Decreases the font size and padding on a custom select Forms bootstrap docs
95 .is-* If you do server side form validation you can use this class to set feedback colors on inputs or error message. Forms bootstrap docs
96 .was-validated This class is set by Bootstrap's javascript to apply sub class validation styles to the form inputs. Forms bootstrap docs
97 .col-form-label Class added to form labels to apply consistent padding and margins Forms bootstrap docs
98 .col-form-label-lg Increases the font size and spacing of a form label Forms bootstrap docs
99 .invalid-feedback This class can be added with server side form validation to add a feedback message to an invalid field Forms bootstrap docs
100 .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 bootstrap docs
101 .custom-control Used on all custom form inputs and adds base styles like padding and display:inline Forms bootstrap docs
102 .custom-control-inline Custom form checkboxes are set to be display:block. Use this class to make the checkbox inline Forms bootstrap docs
103 .custom-control-input 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 bootstrap docs
104 .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 bootstrap docs
105 .custom-file-label When creating a custom form file browser, this class replaces the default file browser with custom elements using :after Forms bootstrap docs
106 .custom-file-input This class is added to the default input type="file" and hides it using CSS Forms bootstrap docs
107 .custom-control-label When creating a custom form checkbox, this class replaces the default checkbox with custom elements using :before and :after Forms bootstrap docs
108 .custom-file Class added to a label of grouped elements to create a custom file upload input Forms bootstrap docs
109 .custom-checkbox Parent class that converts a default form checkbox into a custom HTML/CSS checkbox Forms bootstrap docs
110 .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 None
111 .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 None
112 .no-gutters Removes the negative margin on the Grid None
113 .col-* 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. Grid None
114 .offset-*-* Used to offset a grid column from its original position Grid System None
115 .row used a parent wrapper of any vertical columns Grid system None
116 .col-xl-* Set column width for anything greater than 1200px. Specify the column span by adding 1-12 at the end Grid system None
117 .col-*-* span 1-12 column. Extra small devices Phones (\n < 768px), Small devices Tablets (≥768px), Medium devices Desktops (≥992px), Large devices Desktops (≥1200px). Column device Column numeric values can be 1-12. Grid system None
118 .container-fluid Spans the full width of the screen Grid system None
119 .col-*-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 None
120 .container Fixed width container with widths determined by screen sites. Equal margin on the left and right. Grid system None
121 .col-*-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 None
122 .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 None
123 .invisible Make something invisible Helper Classes None
124 .close Use the generic close icon for dismissing content like modals and alerts. Helper Classes None
125 .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 None
126 .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 None
127 .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 None
128 .sr-only Hide an element to all devices except screen readers with .sr-only. Helper Classes None
129 .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 None
130 .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. You can also add Images None
131 .img-thumbnail Adds rounded corners and an inset border to an image Images None
132 .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 None
133 .input-group-* 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 bootstrap docs
134 .input-group-prepend This class adds margin-right: -1px; to the input set to right of the group to compensate for the 1px border Input Group bootstrap docs
135 .input-group-append This class adds margin-left: -1px; to the input set to left of the group to compensate for the 1px border Input Group bootstrap docs
136 .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 bootstrap docs
137 .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 bootstrap docs
138 .jumbotron A content section that is used to showcase important content. Commonly used on home pages and category pages. Jumbotron bootstrap docs
139 .list-group-item-action Add this class to each anchor in a list-group to remove the default anchor text color List Group bootstrap docs
140 .list-group Wrapper ul class that contains li with borders List group bootstrap docs
141 .list-group-horizontal The list group items are positioned horizontal intead of vertically. Be careful of long lists because they can break the layout. List group bootstrap docs
142 .list-group-item-* Change color of list group item by adding one of the following: default, warning, info, danger, primary List group bootstrap docs
143 .list-group-item-text Class added to an anchor or p for a .list-group-item text under a heading List group bootstrap docs
144 .list-group-item Class added to each li in a list-group List group bootstrap docs
145 .media-middle Add this class the div wrapping the media object image to center it vertically Media Object bootstrap docs
146 .media-left Add this class the div wrapping the media object image to align it to the left Media Object bootstrap docs
147 .media-bottom Add this class the div wrapping the media object image to align it to the bottom Media Object bootstrap docs
148 .media-right Add this class the div wrapping the media object image to align it to the right Media Object bootstrap docs
149 .media-body The class added for the media description copy block Media object bootstrap docs
150 .media Media components are image heading and description text items. Blog comments, portfolio projects, album covers, etc. Media object bootstrap docs
151 .modal-lg Makes a modal wider Modal bootstrap docs
152 .modal-dialog-centered Vertically and horizontally centers a modal dialog Modal bootstrap docs
153 .modal-header The header section of the modal that contains the title and close button Modal bootstrap docs
154 .modal-dialog The secondary wrapper class of the entire modal content Modal bootstrap docs
155 .modal-open Javascript adds this class to the body tag to prevent scrolling with the modal is open Modal bootstrap docs
156 .modal-sm Makes the modal not as wide Modal bootstrap docs
157 .modal The parent wrapper class of modal content Modal bootstrap docs
158 .modal-title The title of the modal Modal bootstrap docs
159 .modal-backdrop Added by the modal javascript to make the area around the modal clickable to hide the modal Modal bootstrap docs
160 .modal-body The modal body content class : Header - Body - Footer Modal bootstrap docs
161 .modal-footer The footer of the modal that contains action buttons or help text Modal bootstrap docs
162 .modal-content modal-content contains modal-body, modal-header, and modal-footer Modal bootstrap docs
163 .navbar-light Add this class to your navbar if you would like it to have a light background and dark text Navbar bootstrap docs
164 .navbar-toggler The infamous cheeseburger icon to signify a navigation menu on mobile Navbar bootstrap docs
165 .navbar-brand Most navbars contain a logo or brand. This class is added to the anchor Navbar bootstrap docs
166 .navbar-toggler-icon The cheeseburger navigation icon is set using an svg background image of three horizontal lines Navbar bootstrap docs
167 .navbar-text Vertically centers text inside a navbar Navbar bootstrap docs
168 .navbar-expand-* Since the navbar is displayed collapse on mobile first, this class specifies what breakpoint you want the navbar to not be collapsed Navbar bootstrap docs
169 .navbar-collapse The nav links that are collapsed and shown when toggled on mobile widths. Navbar bootstrap docs
170 .navbar-nav The wrapper class of the navigation elements excluding the brand Navbar bootstrap docs
171 .navbar Navigation header class Navbar bootstrap docs
172 .nav-justified Makes all nav items equal width and use all available horizontal space. Navs bootstrap docs
173 .nav-fill Makes all nav items use all available horizontal space. Nav items are different widths baded on their content. Navs bootstrap docs
174 .nav nav base class added all types of navigation: tabs, pills, justified, disabled links Navs bootstrap docs
175 .nav-item If your nav uses a list add this class to each list item for the proper spacing Navs bootstrap docs
176 .nav-pills Use this class along with .nav to make each nav link into a button Navs bootstrap docs
177 .nav-link Each anchor link inside your nav is given this class in order to have the proper styling Navs bootstrap docs
178 None Animates the slide transition with a crossfade instead of a slide None None
179 None Changes the default styling of a form input range None None
180 None Removes the interactivity from a dropdown so it does not appear clickable None None
181 None Changes the display of elements when you print the document. None None
182 None Add to all sibling elements you would like to force into equal widths and fill all available horizontal space. None None
183 None Forces an element to grow or shrink to use more or less of the space available None None
184 None Adds a black CSS box shadow to an element. None None
185 .pagination The wrapper class that contains all of the page navigation Pagination bootstrap docs
186 .pagination-lg Increases the font size and spacing of a pagination nav Pagination bootstrap docs
187 .page-item This class is added to each li inside the ul.pagination and floats the li's' Pagination bootstrap docs
188 .pagination-sm Decreases the font size and spacing of a pagination nav Pagination bootstrap docs
189 .page-link This class is added to each anchor link containing the numbers Pagination bootstrap docs
190 .progress-bar-animated When this class is added to a progressbar the progress will be animated using css3 animations Progress bootstrap docs
191 .progress-bar-striped Changes progress to a striped version Progress bars bootstrap docs
192 .progress The parent class wrapper of a progress bar Progress bars bootstrap docs
193 .progress-bar The class applied to the progress bar graphic that moves Progress bars bootstrap docs
194 .nav-tabs Class added to enable Bootstrap tabs Tab None
195 .tab-pane Class added to the div that will act as a tab content area Tab None
196 .table-responsive-* Makes a table responsive by cropping a wide table and makes it scrollable horizontally. .table-responsive or .table-responsive-(lg, md, sm, xl) Tables None
197 .table-bordered Adds borders to a table and its cells Tables None
198 .table-sm Removes some padding from the table cells Tables None
199 .table Adding this class to a HTML table applies the Bootstrap styles Tables None
200 .info Tables contextual class to change row color" target="_blank" href="https://getbootstrap.com/docs/4.3/content/tables/#contextual-classes Tables None
201 .table-* Adds a 1px stroke around the rows, columns, and table outline. You can also remove the borders entirely. Tables None
202 .active Tables contextual class to change row color Tables None
203 .table-striped Adds a light background color to every other table row for a striped effect Tables None
204 .table-reflow The table header becomes the first column of the table to the left Tables None
205 .thead-dark The default table head styling of light background and dark text Tables None
206 .thead-light Inverts the table head to have a dark background and light text Tables None
207 .table-hover Adds a background color when you hover a table row Tables None
208 .table-* Contextual classes of different color styles to provide user feedback (active|danger|info|primary|secondary|success|warning) Tables None
209 .success Tables contextual class to change row color Tables None
210 .table-sm Removes vertical padding between table rows so it does not take as much vertical space. Good for tables with a lot of rows. Tables None
211 .tooltip-inner The wrapper class of tooltip text. This is generated by the Bootstrap javascript Tooltip None
212 .tooltip This class is used by the tooltip javascript as the wrapper of the toolitp Tooltip None
213 .initialism Add .initialism to an abbreviation for a slightly smaller font-size. Typography None
214 .lead Increase the font size and line height of a paragraph. Good to use on the first paragraph of an article to improve readability. Typography None
215 .text-capitalize Capitalize the text or title case Typography bootstrap docs
216 .display-* 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 bootstrap docs
217 .text-justify Full justifys the text Typography bootstrap docs
218 .text-lowercase Changes text to lowercase Typography bootstrap docs
219 .text-nowrap Prevents the text from wrapping Typography bootstrap docs
220 .small Create lighter, secondary text in any heading with a generic Typography None
221 .text-uppercase Makes text uppercase Typography bootstrap docs
222 .list-inline Change ul or ol list to be listed horizontally with a little margin between each li Typography None
223 .h1 - .h6 Apply heading styles to other elements. Make a paragraph look like an h1 Typography None
224 .list-inline Overrides a lists default style to be inline and block Typography None
225 .list-unstyled Removes all bullet styling from a ul or ol list Typography None
226 .mark For highlighting a run of text due to its relevance in another context, use the mark tag. Typography None
227 .position-* Not responsive, but a group of utility classes to add common position values. .position-(absolute, fixed, relative, static, sticky) Utilities bootstrap docs
228 .bg-* Background color utility classes: Utilities None
229 .sr-only Hide element to all devices except screen readers Utilities None
230 .text-break When you are building applications that have long strings or user generated content, this class breaks the long text so that it does not break the layout. Without this, the text would be as wide as the string itself. Utilities bootstrap docs
231 .stretched-link This class extends the clickable area of an anchor link to fill the parent container. The parent container must have a position:relative for this to work properly. Utilities None
232 .sr-only-focusable Combine .sr-only with .sr-only-focusable to show the element again when it’s focused by a user using a keyboard Utilities None
233 .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 None
234 .text-*-* Aligns text left, right or center use choose breakpoint (xs|sm|md|lg|xl) then alignment (left, right, center) Utilities bootstrap docs
235 .align-content-* Added to the parent flexbox container to determing how the elements are aligned horizontally. Utility None
236 .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 None
237 .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 None
238 .align-text-* A set of utility classes that are equivelant to writing the css property Utility bootstrap docs
239 .border-* A versatile border utility class that lets you add/remove borders on a side or change a border color. Utility None
240 .d-flex Sets the element to have have the style property Utility bootstrap docs
241 .d-none Sets the element to have have the style property Utility None
242 .d-*-* A responsive display utility class that lets you specify when a display property is applied to the element. Utility None
243 .visible Hides the visibility of an element but does not change their display property. Utility None
244 .flex-*-*-* Change the flexbox items layout, alignment, or size. Utility bootstrap docs
245 .float-*-* Responsive utility to float an element. Utility bootstrap docs
246 .h-* Height utility class that makes the element a percentage height of its parent element. Utility None
247 .justify-content-*-* Class specifies where the flex items will be positioned inside the container. Utility None
248 .m*-*-* Applies margin to an element using responsive breakpoints {property}{sides}-{breakpoint}-{size} Utility None
249 .p*-*-* Applies padding to an element using responsive breakpoints {property}{sides}-{breakpoint}-{size} Utility None
250 .w-* Width utility class that makes the element a percentage width of its parent element. Utility None
251 .clearfix Clears the floats of any child elements. Add this class to the parent element wrapping the floating elements. Utility bootstrap docs
252 .d-* Append the following to change the element display property (block, inline, inline-block) Utility None
253 .embed-responsive-* Class used to adjust responsive embed aspect ratio. Append one of the following for the desired aspect ratio (21by9, 16by9, 4by3, 1by1) Utility bootstrap docs
254 .embed-responsive-item 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 bootstrap docs
255 .font-* (italic, weight-bold, weight-light, weight-normal, monospace) Utility None
256 .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 None
257 .pos-f-t Positions an element fixed to the top of the viewport and full width. Utility None
258 .fixed-* This class makes an element fixed to the top/bottom of the browser window. Here is what the CSS ruleset looks like. Utility None
259 .align-* A set of utility classes that are equivelant to writing the css property Utility None