You made it, now what? Is there more? Well, yes, in this section we reference all the other.
More on Bootstrap classes below, class ALPHA-NUMERICAL. Filterts coming soon.
| Element | Class | Example | Notes |
|---|---|---|---|
| Typography | .active | Active | Active Link with color - includes Navbar, List Groups, Buttons, Dropdowns, Pagination and Carousels |
| Alert | .alert | Alerts | Alert container |
| Alert | .alert-* | Alerts | Alert container with multiple subclasses for styling Color (Dark, Light, Danger, Info, Primary, etc. |
| Alert | .alert-dismissiable | Alerts | Close alert container |
| Alert | .alert-heading | Alerts | Color added to alert container element, specific to the class or the element the class has been 'defined' |
| Utilities | .align-baseline | Align | default alignment along the baseline of the containing element |
| Utilities | .align-* | Align | Alignment type: top, middle, bottom or text-top, text-bottom |
| Utilities | .align-content-* | Align | Alignment content type: around, *-around, center, *-center, end, *-end, start, *-start, end, *-end |
| Utilities | .align-items-* | Align | Alignment items type: baseline, stretch, *-stretch, around, *-around, center, *-center, end, *-end, start, *-start, end, *-end |
| Utilities | .align-self-* | Align | Alignment items type: baseline, stretch, *-stretch, around, *-around, center, *-center, end, *-end, start, *-start, end, *-end |
| Badge | .badge | Badges | Default class, creates a badge element with color and rounded border |
| Badge | .badge-* | Badges | Color included: danger, dark, info, light, pill, primary, secondary, success, warning |
| Color | .bg-* | Background Color | Color background, included: danger, dark, info, light, pill, primary, secondary, success, warning |
| Typography | .blockquote | Blockquote | Quoted content or text container, padding and color added to highlight container quote |
| Typography | .blockquote-footer | Blockquote | Quoted footer area, separate from the quote itself. Typically, we(subjective/objective) use blockquote/blockquote-footer to distinguish between quoted content and author. Giving meaning through space, color and contextual weight. |
| Utilities | .border | # | Border class adds borders/subtracts borders to a container such a div elment or image element. |
| Utilities | .border-* | # | Borders include: danger, dark, info, light, primary, secondary, success, warning, white, 0, top, right, bottom, left, -0 (meaning no border i.e. .border-top-0) |
| Pagination | .breadcrumb | # | Pagination element giving guidance or location within the web architecture visible to the browser. |
| Pagination | .breadcrumb-item | # | Pagination styling or treament within the pagination class. An item within the breadcrumb navigation |
| Buttons | .btn | # | Class to create a button element |
| Buttons | .btn-block | # | Class to create a button element within the block element |
| Buttons | .btn-* | # | Button treament includes: dark, danger, primary, secondary, info, light, success, warning, etc. |
| Buttons | .btn-* (size) | # | Button size includes: small, medium and large |
| Buttons | .btn-outline-* | # | Button outline treament includes: dark, danger, primary, secondary, info, light, success, warning, etc. |
| Button Groups | .btn-group-* | # | Button group element, which group buttons together both on the x-axis or y-axis if you so desire |
| Cards | .cards | # | creates a card container for which card containers/items will live |
| Cards | .card-* | # | Cards include:dark, danger, primary, secondary, info, light, success, warning, etc. |
| Cards | .card-body | # | Card body (container element) |
| Cards | .card-columns | # | Card (container element) for which cards are created in grid form in 'columns' |
| Cards | .card-deck | # | Card (container element) for which cards are created in grid form that are both equal in height and width |
| Cards | .card-group | # | Card (container element) for which cards are equal height/width without x-axis margins |
| Cards | .card-header | # | Card (container element) header |
| Cards | .card-header-* | # | Card (container element) header tabs and pills, which might offer a navigational treatment within the header |
| Cards | .card-img-* | # | Card (container element) Image is placed in within the card container. Includes: top, bottom, overlay |
| Cards | .card-title | # | Card (container element) title or heading |
| Cards | .card-subtitle | # | Card (container element) subtitle element with styling, placed after the initial title or heading |
| Carousel | .carousel | # | Carouseled container with sub containers containing visible and hidden elements, virtually creating a flipbook or slideshow treatment |
| Carousel | .carousel-caption | # | Carousel text provided on each subcontainer, indicating purpose or describing each visible container. |
| Carousel | .carousel-control-* | # | Carousel navigation container and direction element. Includes: control-next, control-next-icon, control-prev, control-prev-icon |
| Carousel | .carousel-control-* | # | Carousel sub navigational elements to again describe to the user where the content lives within the parent container |
| Carousel | .carousel-inner | # | Carousel sub container, or slide |
| Carousel | .carousel-item | # | Carousel sub container content, or slide content |
| Utilities | .clearfix | # | Clears fixed elements, i.e. floats |
| Utilities | .close | # | Close function, treatment typically reserved for modals and alerts which require user interaction to move passed the prompt or sub-modal overlay of the primary interaction |
| Grid | .col-* | # | Column created within the Grid container which includes: auto, -* (column number, between 1 and 12), small-*, medium-*, large-*, xlarge-*. |
| Collapse | .collapse | # | Show/Hide Container, known as collapse. Collapse can be used in an accordion treament as well where multiple collapsible containers can be tied together. |
| Container | .container | # | Generic container class in Bootstrap, fixed widths and x-axis margins. Breakpoint screen widths. |
| Container | .container-fluid | # | Generic container class in Bootstrap, full width; 100%. Regardless of screen/screenwidth. |
| Container | .container-* | # | Generic container options, widths defined as: small, medium, large, xlarge |
| Custom Forms | .custom-control | # | Base class, creates a generic container for forms or custom forms |
| Custom Forms | .custom-control-* | # | Form control elements, including input, inline and label |
| Custom Forms | .custom-file | # | File upload feature |
| Custom Forms | .custom-file-* | # | File upload feature includes: input and label. |
| Custom Forms | .custom-* | # | Custom form elements include, radio, range, select, select-* (sm,lg) and switch. |
| Typography | .disabled | # | Disabled treatment renders element disabled, adds contextual shadow/text tweaks to show 'disabled'. Applicable across the following elements, buttons, dropdowns, pagination, list groups. Each element is handled slightly different, however, text, text color, weight and opacity remain domainant 'style' changes for the disabled treatment, including removing a:hover on links and list items treated as such. |
| Dropdowns | .dropdown | # | Menu container, where a menu 'flys out' to show child/subchild navigational elements. |
| Dropdowns | .dropdown-# | # | Container parts, header, divider |
| Dropdowns | .dropdown-item | # | Link or button within the dropdown container |
| Dropdowns | .dropdown-item-text | # | Plain text, contained within the dropdown container |
| Dropdowns | .dropdown-menu | # | Dropdown menu treatment, default |
| Dropdowns | .dropdown-menu-right | # | Dropdown menu treatment, right aligned |
| Dropdowns | .dropdown-toggle | # | Toggle switch allowing the user to preselect or show/hide menu items |
| Dropdowns | .drop* | # | Drop down menu direction: down, left, right up |
| Utilities | .d-block | # | Block element |
| Utilities | .d-*-block | # | Block element, element includes a width defined |
| Utilities | .d-inline | # | Inline element |
| Utilities | .d-*-inline | # | Inline element, element includes a width defined |
| Utilities | .d-inline-block | # | Inline block element |
| Utilities | .d-*-inline-block | # | Inline block element, element includes a width defined |
| Utilities | .d-flex | # | Flex/flexbox element |
| Utilities | .d-*-flex | # | Flex element, element includes a width defined |
| Utilities | .d-inline-flex | # | Inline flex/flexbox element |
| Utilities | .d-*-inline-flex | # | Inline flex element, element includes a width defined |
| Utilities | .d-none | # | Hidden element |
| Utilities | .d-*-none | # | Hidden element, element hidden at specific widths |
| Utilities | .d-table | # | Table element |
| Utilities | .d-*-table | # | Table element, element includes a width defined |
| Utilities | .d-table-cell | # | Table cell element |
| Utilities | .d-*-table-cell | # | Table cell element, element includes a width defined |
| Utilities | .d-table-row | # | Table row element |
| Utilities | .d-*-table-row | # | Table rowl element, element includes a width defined |
| Media | .embed-responsive | # | Embedded media scales with screen size; mobile first |
| Media | .embed-responsive-* | # | Embedded media scales at the following ratios: 1by1, 3by4, 16by9 and 21by9 |
| Media | .embed-responsive-item | # | Embedded media to be 'responsive' or scale, grow according to the ratios defined in the parent class. |
| Typography | .fade | # | Treatment or effects used to highlight said element, and those include: alerts, containers, embedded media, modals etc. |
| Utilities | .fixed-* | # | Element fixed top or bottom which will 'force' element top or bottom |
| Flex | .flex-column | # | Flex element on the y-axis |
| Flex | .flex-*-column | # | Flex element on the y-axis, element includes a width defined |
| Flex | .flex-column-reverse | # | Reversed Flex element on the y-axis |
| Flex | .flex-*-column-reverse | # | Reversed Flex element on the y-axis, element includes a width defined |
| Flex | .flex-fill | # | Flex element displays columns with equal widths |
| Flex | .flex-*-fill | # | Flex element displays columsn with equal widths, element includes a width defined |
| Flex | .flex-grow-0|1 | # | Flex container consumes available space |
| Flex | .flex-nowrap | # | Flex element will not wrap to next line |
| Flex | .flex-*-nowrap | # | Flex element will not wrap to next line, element includes a width defined |
| Flex | .flex-shrink-0|1 | # | Flex container shrinks where necessary, when space is not available |
| Flex | .flex-row | # | Flex row element |
| Flex | .flex-*-row | # | Flex row element, element includes a width defined |
| Flex | .flex-row-reverse | # | Reversed flex row element |
| Flex | .flex-*-row-reverse | # | Reversed flex row element, element includes a width defined |
| Flex | .flex-wrap | # | Flex wrap element |
| Flex | .flex-*-wrap | # | Flex wrap element, element includes a width defined |
| Flex | .flex-wrap-reverse | # | Reversed flex wrap element |
| Flex | .flex-*-wrap-reverse | # | Reversed flex wrap element, element includes a width defined |
| Flex | .float-* | # | Float elements left, right or none |
| Flex | .float-*-* | # | Float elements left or right, position determined by screen type |
| Typography | .font-italic | # | Italized text |
| Typography | .font-weight-* | # | Text weight: normal light, lighter, bold, and bolder |
| Forms | .form-check | # | Checkbox container |
| Forms | .form-check-* | # | Elements contained within the forms container, include: inline, input, label |
| Forms | .form-control | # | Container for which form elements live in a responsive state |
| Forms | .form-control-* | # | Container elements include: file, small, large, range, plaintext |
| Forms | .form-group | # | Form element container |
| Forms | .form-inline | # | Form element container defined as inline and left-aligned |
| Forms | .form-row | # | Form element container defined as responsive columns with margin sizes which modify column treatment |
| Typography | .h* | # | Title Text; headline elements defined as h1, h2, h3, h4, h5, h6 |
| Utilities | .h-* | # | Height sizing defined as 25%, 50%, 75%, 100% |
| Images | .img-fluid | # | Image container, responsive or full width |
| Images | .img-thumbnail | # | Image container, thumbnail treatment or with borders |
| Typography | .initialism | # | Building on the Abbreviation style, this treatment is smaller in size and acts as a 'secondary' styling treatment to the abbreviation |
| Input Group | .input-group | # | Input container containing contextual elements inline with the textual elements. |
| Input Group | .input-group-* | # | Input container containing types: append, small, large, prepend, text. |
| Input Group | .input-* | # | Input types: small, large |
| Forms | .invalid-* | # | Validation triggers feedback or tooltips when form are invalid |
| Forms | .is-* | # | Valid or invalid form elements, this 'is' reference is generated on the post or get response coming back from the server; deeming an input valid or invalid |
| Jumbotron | .jumbotron | # | Main 'billboard' for a website, treatment is such that it draws the attention of the user as the main interaction or conversion (provided feedback, sign up, login, purchase, view more details etc.) point. |
| Jumbotron | .jumbotron-fluid | # | Responsive, full width, main 'billboard' treatment |
| Flex | .justify-content-*-* | # | Flexbox alignment types, default (.justify-content-*), around, between, center, end, start |
| Typography | .lead | # | Leading, leading class allows the dev to modify both the font size and baseline/line height when appended as a class modifier |
| List Group | .list-group | # | List grouping and treatment |
| List Group | .list-group-* | # | List grouping item along with treatment variations, flush, horizontal, item, item-action, item-danger, item-dark, item-info, item-light, item-primary, item-success, item-warning |
| Typography | .list-inline | # | List grouping placed items 'inline' left-to-right within the same row |
| Typography | .list-inline-item | # | List grouping item which is then placed inline |
| Typography | .list-unstyled | # | List grouping 'unstyled' item fall where they may, which is then placed inline |
| Typography | .mark | # | Highlighted/highlighting treatment |
| Media Objects | .media | # | Media objects are contained within the media class |
| Media Objects | .media-body | # | Media object content container |
| Modals | .modal | # | Modal container which will sit above the main or primary content when clicked. Modal comes to the forfront of the page pushing primary content to a secondary position. |
| Modals | .modal-body | # | Secondary Modal container where markup lives |
| Modals | .modal-content | # | Primary Modal container and treatment where the modals header, body, footer and complmentary markup lives |
| Modals | .modal-dialog-* | # | Two variations, centered and scrollable, one allows content to fall in the center of the page, where the other allows scrollers or scrollable content to be added to the modal. |
| Modals | .modal-footer | # | Secondary Modal container where a secondary close button might live or another actionable link to drive the user to some featured content. |
| Modals | .modal-header | # | Secondary Modal container where the modal title lives and a primary close button might live to drive the user back to the primary content; closing the modal |
| Modals | .modal-* | # | Modal sizing, small, large, xlarge |
| Utilities | .m-* / m-*-# | # | Margin classes are as follows, m (all), mt, mr, mb, ml (top, right, bottom and left). Mx - margin x-axis, my - margin y-axis and mx-auto which is margin on both sides of the container forcing the container to the center. |
| Tabs | .nav nav-tabs | # | Tabbed Menu, tabbed container |
| Tabs | .nav nav-pills | # | Navigation pills, pills container |
| Tabs | .nav-justified | # | Navigation tab or pills, justified |
| Navbar | .navbar | # | Navigation bar container |
| Navbar | .navbar-nav | # | Navigation links contained within the navbar container |
| Navbar | .navbar-brand | # | Brand or Logo included within the navbar container |
| Navbar | .navbar-expand-* | # | Navbar container collapse at defined width or breakpoints |
| Navbar | .navbar-* | # | Dark, light treatment, text will complement background color defined in the navbar |
| Navbar | .navbar-text | # | Vertical alignment/padding for elements that are in 'plaintext' holding true to the treatment with those that are links. |
| Navbar | .navbar-toggler | # | Navbar button (taking the mobile first approach) 'hamburger menu' treatment for smaller screens |
| Navbar | .nav-* | # | Link or Items; Nav links and items within the navbar container |
| Navbar | .needs-validation | # | Upon submission, validation treatment |
| Grid | .no-gutters | # | Gutters and gutter treatment spacing for columns are removed |
| Pagination | .page-item | # | Item within the Pagination container |
| Pagination | .page-link | # | Link within the Pagination container |
| Pagination | .pagination-* | # | Pagination container including various sizes, default, small and large |
| Helpers | .pre-scrollable | # | Scrollable element, scroll featuer attached on the y-axis |
| Progress Bar | .progress | # | Progress bar container |
| Progress Bar | .progress-bar | # | Progress bar feature created within the container |
| Progress Bar | .progress-bar-animated | # | Adds 'animation' treatment to the progress bar |
| Progress Bar | .progress-bar-striped | # | Adds 'striped' treatment to the progress bar |
| Utilities | .p-* / p-*-# | # | Padding classes are as follows, p (all), pt, pr, pb, pl (top, right, bottom and left). Px - padding x-axis, py - padding y-axis and px-auto which is padding on both sides of the container. |
| Utilities | .rounded | # | Rounded corner treatment added to an element |
| Utilities | .rounded-* | # | Rounded corner treatment default and the following variations: bottom, circle, left, right, top, 0 (none) |
| Grid | .row | # | Responsive columns container |
| Grid | .row-cols-* | # | Note number of columns that shall be presented within the container |
| Utilities | .shadow-* | # | Shadow treatment, including the following variants: default, none, small, large |
| Typography | .small | # | Small text, typically called out in title text and display text where a smaller font might be used to draw out the main headline or title. Providing color to support the headline, title text or display text. |
| Spinners | .spinner-border | # | Spinner feature created |
| Spinners | .spinner-border-* | # | Spinner feature with the followin variations, grow, grow-sm, border-small |
| Utilities | .sr-only | # | Screen reader device specific, browser will not display that with which is contained within the class container. |
| Utilities | .sr-only-focusable | # | Screen reader device specific, browser will not display that with which is contained within the class container. |
| Utilities | .sticky-top | # | Sticky element 'fixed' to the top of the page |
| Utilities | .stretched-link | # | Parent specific link only clickable within the parent element |
| Tabs | .tab-content | # | Tab element where the 'tab content' which is clickable, presents the content within this tab when selected |
| Tabs | .tab-pane | # | Tab element pane, along with 'tab content' which again is clickable content. This creates the show/hide tabbed content, presents the content within this tab when selected |
| Table | .table | # | Table container and container treatment |
| Table | .table-* | # | Table container and container treatment including the following: active, bordered, borderless, condensed, dark, hover, responsive-* (breakpoint specific), striped |
| Typography | .text-break | # | Break along text, ultimately preserving the responsive framework |
| Colors | .text-* | # | Other variations for the text class, danger, dark, info, light, muted, primary, secondary, success, warning, white |
| Typography | .text-* | # | Other variations for the text class, capitalize, center, *-center, decoration-none, hide, justify, *-left, lowercase, nowrap, reset, right, *-right, uppercase |
| Table | .thead-* | # | Table header styles include dark and light |
| Toast | .toast | # | Toast container |
| Toast | .toast-* | # | Toast body and/or header |
| Forms | .valid-* | # | Form validation, feedback and tooltip |
| Utilities | .visible | # | Visible element |
| Forms | .was-validated | # | Form validation treatment |
| Utilities | .w-* | # | Width sizing defined as 25%, 50%, 75%, 100% |
Perhaps utilities might be better suited here in the reference section, or under the advanced section of content... the reason we are calling this out here is more for those who might not be a proficient in CSS (Cascading Stylesheets) and would like to see the current classes included in the framework. Again, perhaps we move this around in the near/far future. Today, however, we add this as a reference as though you (the developer) might have more than the layman's experience with CSS and choose to create and modify your own styles. In any case, let's begin...
Borders, Non-Borders, Border Radius, Rounded Square/Circles
.border - Border class, default black border, 1px weight.border border-0 - Border class, no border or border size=0.border border-primary - Border with Primary Color.border border-secondary - Border with Secondary Color.rounded - Border with rounded cornersPrimary Color.rounded-circle - Border with rounded corners which makes a circle Code Snippet - Borders
<div class='example border p-5'>
<div class='container-fluid'>
<span class='border logo3 p-3'><i class='fas fa-user'></i></span>
<span class='border border border-0 logo3 p-3'><i class='fas fa-user'></i></span>
<span class='border border-primary logo3 p-3'><i class='fas fa-user'></i></span>
<span class='border border-secondary logo3 p-3'><i class='fas fa-user'></i></span>
<span class='border rounded-circle logo3 p-3'><i class='fas fa-user'></i></span>
</div>
</div>
Floats, Clearfix
.clearfix - clears floats, both left and right..float-left - floats container left.float-right - floats container right.float-sm-right - floats container right, small breakpoint.float-none - no float.mx-auto - margin x-axis - auto Code Snippet - Floats
<div class='example border p-5'>
<div class='container-fluid'>
<div class='clearfix'>
<span class='float-left'><i class='fas fa-ghost logo'></i> Left</span>
<span class='float-right'><i class='fas fa-ghost logo'></i> Right</span>
</div>
<div class='mx-auto' style='width:250px'>
<span class='float-none'><i class='fas fa-ghost logo'></i> Margin Auto</span>
</div>
</div>
</div>
Widths, Heights, Padding, Margin, Negative Margin
.w-25 - width 25%.w-50 - width 50%.w-75 - width 75%.w-100 - width 10%.h-25 - height 25%.h-50 - height 50%.h-75 - height 75%.h-100 - height 100%.m-1 - margin set at 1 or .25rem (~4px).p-1 - padding set at 1 or .25rem (~4px).mt-1 - margin top set at .25rem.pt-1 - padding top set at .25rem.mb-1 - margin bottom set at .25rem.pb-1 - padding bottom set at .25rem.n1 - negative margin set at 1 or .25rem (~4px).n2 - negative margin set at 1 or .5rem (~8px)Code Snippet - Floats
<div class='example border p-5'>
<div class='container-fluid'>
<div class='w-25 bg-primary'> 25% </div>
<div class='w-50 bg-secondary'> 50% </div>
<div class='w-75 bg-primary'> 75% </div>
<div class='w-100 bg-secondary'> 100% </div>
<div class='mw-100 bg-dark'> Max Height </div>
</div>
</div>
Shadow
.shadow - shadow class, default proportions.shadow p-4 mb-4 bg-white - shadow with padding and margin.shadow-sm p-4 mb-4 bg-white - shadow small, with padding and margin.shadow-lg p-4 mb-4 bg-white - shadow large, with padding and marginLorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum id metus ac nisl purus in suspendisse.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum id metus ac nisl purus in suspendisse.
Vestibulum id metus ac nisl purus in suspendisse.
Code Snippet - Shadows
<div class='example border p-5'>
<div class='container-fluid'>
<div class='row d-flex justify-content-center'>
<div class='card-deck'>
<div class='card mb-2 shadow p-4 mb-4 bg-white'>
<div class='card-body'>
<h5 class='card-title'><i class='fas fa-clipboard'></i> Card: <small>Secondary title text</small></h5>
<p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class='card-footer'>
<small class='text-muted'>Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
Alignment
.align-baseline - align elements (inline, inline-block, inline-table and table cells) .align-top - align 'ditto' elements, top.align-bottom - align 'ditto' elements bottomLet's start with a new paragraph with no meaning.
Absolutely no meaning whatsoever. Meaning only derived from the words flowing from brain to fingers to keys. Not sure this is enough text just yet, so we will carry on as if we have a meaning for this paragraph text. We chose not to use our favorite 'all letter' sentence "The Quick Brown Fox Jumps Over The Lazy Dog",only because we've used the example enough times to simply to make anoter choice. A wise choice that is! So, wrap up this meaningless paragraph with 'Happy Alignment Class Testing'.Code Snippet - Alignment
<div class='example border p-5'>
<div class='container-fluid'>
<p>Let's start with a new paragraph with no meaning.<p>
<span class='align-baseline'>Absolutely no meaning whatsoever. Meaning only derived from the words</span>
<span class='align-top'>flowing from brain to fingers to keys. Not sure this is enough text just yet, so we will carry on as if we have a meaning for this paragraph text.</span>
<span class='align-bottom'>We chose not to use our favorite 'all letter' sentence</span>
<span class='align-text-top'>'The Quick Brown Fox Jumps Over The Lazy Dog', only because we've used the example enough times to simply to make anoter choice.</span>
<span class='align-text-bottom'>A wise choice that is! So, wrap up this meaningless paragraph with 'Happy Alignment Class Testing'.</span>
</div>
</div>
Embedded Media (Responsive)
.embed-responsive embed-responsive-1by1 - .embed-responsive-item - .embed-responsive embed-responsive-16by9 - Code Snippet - Embedded Media
<div class='example border p-5'>
<div class='container-fluid'>
<div class='embed-responsive border embed-responsive-16by9'>
<span class='sr-only'>loading...</span>
<video preload='' controls='' class='embed-responsive-item' src='http://1fyr.com/assets/video/fire6102021.mp4'>
</video>
</div>
</div>
</div>
Visibility, Screen Readers
.visible - .invisible - .sr-only - Code Snippet - Visibility
<div class='example border p-5'>
<div class='container-fluid'>
<div class='visible'>This is a great visible message showing the 'visible' class.</div>
<div class='visible'>I'm a class just about the invisible class which will not be visible to the browser. To view, check the source code.</div>
<div class='invisible'>Yes, I'm the class that can't be seen or displated by the browser. However, like we mentioned above, to see what we have written here; check the source code!</div>
<div class='visible'>One final sentence for spacing as there is an 'invisible' class container just above this which has been masked by the 'invisible' class.</div>
</div>
</div>
Fixed Classes
.fixed-top - .fixed-bottom - .sticky-top - Code Snippet - Fixed Classes
<div class='example border p-5'>
<div class='container-fluid shadow-lg noSpace'>
<iframe style='width:100%; height:800px; border:0px;' src='navElements.php'></iframe>
</div>
</div>
Close
.close - close class, create a container for close and close iconography. Helpful for show/hide elements such as Toast, Collapse and ModalsCode Snippet - Close
<div class='example border p-5'>
<div class='container-fluid shadow-lg noSpace'>
<div class='container limitedSpace'>
<button type='button' class='btn btn-fireRed btn-lg' data-toggle='modal' data-target='#myModal'><i class='fas fa-window-restore logo4' aria-hidden='true'></i> Click Modal
</button>
<div class='modal' id='myModal'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<h4 class='modal-title'>Lorem Ipsum</h4>
<button type='button' class='close btn btn-fireRed' data-dismiss='modal'>×</button>
</div>
<div class='modal-body'>
<h5>Presenting Lorem Ipsum</h5>
<h6>1/2/2021</h6>
<p>Sed sed risus pretium quam vulputate. Porttitor eget dolor morbi non arcu risus quis varius quam. Ac turpis egestas sed tempus urna et pharetra pharetra massa. Sed viverra ipsum nunc aliquet bibendum.</p>
<h6><small>Updated 3 mins ago</small></h6>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-fireRed' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
Block, Flex
.d-block - .d-block-sm - .d-block-xl - .d-flex - .d-inline-flex - . - Code Snippet - Block, Flex
<div class='example border p-5'>
<div class='container bg-dark text-white'>
<span class='d-sm-block bg-lightTurquoise m-1 p-3'> ||D-Block Small </span>
<span class='d-sm-block bg-lightTurquoise m-1 p-3'> ||D-Block Small </span>
<span class='d-xl-block bg-turquoise m-1 p-3'> ||D-Block xLarge </span>
<span class='d-xl-block bg-turquoise m-1 p-3'> ||D-Block xLarge </span>
<span class='d-flex bg-fireRed m-2 p-3'> ||D-Flex </span>
<span class='d-inline-flex bg-secondary p-3'> ||D-Inline-Flex </span>
<span class='d-inline-flex bg-secondary p-3'> ||D-Inline-Flex </span>
<span class='d-inline-flex bg-secondary p-3'> ||D-Inline-Flex </span>
<span class='d-inline-flex bg-secondary p-3'> ||D-Inline-Flex </span>
</div>
</div>
Need Help? How might we help? Connect with us, reach out via email, phone or contact form