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 |