Bottom Containers

This is the Header.

All div and section elements have my-3 and border-3 applied to them.

Progress Bars - use Width property on child.

Add border to parent.

Use height property on parent. Default 1rem(~16px).

Labels - add label to child prop.

50% finished

Colored Progress Bar - add bg contextual class to child.

Striped Progress Bar - add .progress-bar-striped to child.

Animated Progress Bar - add progress-bar-animated to child.

Note: must be striped!

Multiple Progress Bars

Free Space
Warning
Danger

Spinners

Default - add .spinner-border to container.

Colored - add text color utilities (e.g. .text-primary)

Growing Spinners - use .spinner-grow to container.

Spinner Buttons - see above.

Pagination

Basic - add .pagination to <ul> and .page-item to <li> and .page-link to <a>.

Active - add .active to <li>.

Disabled - add .disabled to <li>.

Size - add .pagination-lg|sm to <ul>.

Alignment - use .justify-content.

Breadcrumbs - indicate current pages location in a hieracrchy.

Use .breadcrumb and .breadcrumb-item with child prop.

List Groups

Basic uses <ul> with .list-group and <li> with .list-group-item.

Use .active or .disabled.

List Group with Linked Items

Use <div> with <a>.

For grey background on hover, add .list-group-item-action.

First item Second item Third item

Use .list-group-flush on container to remove most borders.

Numbered Lists - use .list-group-numbered on container.

Horizontal List Group - use .list-group-horizontal on container.

Contextual Classes - add .list-group-item-* to child.

This example with hover.

Link Items with Contextual Classes - add same class as above

First item Second item Third item

List Group with Badges - add <span class="badge bg-* rounded-pill> to child.

Note: Add .d-flex .justify-content-between .align-items-center to <li> to space correctly.

Cards

Basic - use .card on the container and .card-header .card-body .card-footer on <div> with content in child prop.

Basic Card
Content goes here!
Footer

Contextual Cards - use .bg-* on container.

Basic Card
Content goes here!
Footer

Titles, text and links

Use .card-title on header tag inside of body.

Use .card-text on <p> inside of body.

Use .card-link inside <a> inside of body.

Basic Card

TITLE

This is the card text.

Here is a link
Footer

Card Images - Add .card-img-top|bottom to an <img>.

Note: Add image outside of card body.

Big Ben
Basic Card

TITLE

This is the card text.

See Details
Footer

Card Image Overlays - Add a <div> as sibling of <img> with .card-img-overlay.

Big Ben
Basic Card

TITLE

This is the card text.

See Details
Footer

Dropdowns

Add .dropdown to container.

Add <button> with .dropdown-toggle and attribute of data-bs-toggle="dropdown".

Add .dropdown-menu as <ul> and .dropdown-item to each element.

Dropdown Divider - add <hr class="dropdown-divider"> inside a <li> to create a divider.

Dropdown Header - add .dropdown-header to a header inside of a <li> to create a header.

Diasble and Active

Dropdown Position - Add .dropend|dropstart to container.

This changes where dropdown menu appears.

Dropdown Menu Right - align dropdown menu to right on long button text.

Add .dropdown-menu-end to element with .dropdown-menu.

Dropup - Replace .dropdown with .dropup.

Dropdown Text - add <span> with .dropdown-item-text to <li>.

Adds plain text to a dropdown (no link)

Grouped Buttons with Dropdowns

See Example Here

Vertical Button Group with Dropdown

Add a Dropdown to a Vertical Button Group

Collapsibles

Used to hide/show large amount of content.

Add a button/link with href/data-bs-target to ID of your collapsible element and data-bs-toggle="collapse" attribute. Then add .collapse to your collapsible element. Use .show to show content initially.

This is some text that is shown/hidden by a button press.

Build an accordion by extending the card component.

Navs

Basic

Add .nav to <ul>, .nav-item to <li> and .nav-link to links.

Aligned

Add .justify-content-center|end to <ul>.

Vertical

Add .flex-column to <ul>.

Tabs

Add .nav-tabs to <ul>.

Note: Use .active.

Pills

Add nav-pills to <ul>.

Justify Tabs/Pills

Add .nav-justified to <ul>.

Pills with Dropdown

Tabs with Dropdown

Toggleable/Dynamic Tabs

Add data-bs-toggle="tab" attribute to each link. Add .tab-pane with a unique ID for every tab and wrap them inside a <div> element with .tab-content.

Use .fade on .tab-pane to fade in and out when clicked.

Toggleable/Dynamic Pills

Add data-bs-toggle="pill" attribute to each link. Add .tab-pane with a unique ID for every tab and wrap them inside a <div> element with .tab-content.

Use .fade on .tab-pane to fade in and out when clicked.

Navbars

A navigation header placed at the top of the page that can extend or collapse based on screen size.

Basic

Add .navbar and .navbar-expand-xxl|xl|lg|md|sm to <nav>.

Note: Don't forget to add bg-* here!

Add .navbar-nav to <ul>.

Add <li> elements with .nav-item followed by an <a> with .nav-link.

Vertical

Remove .navbar-expand-*.

Centered

Add .justify-content-center to <nav>.

Note: Previous two examples used a <div> with .container-fluid around the <ul>. .justify-content-* will not work in those cases.

Justify Content Between

Add .justify-content-around to <ul> and add .w-100.

Colors

Use contextual bg colors on nav, as well as .navbar-dark|light to change text color.

Brand/Logo

Use .navbar-brand in an <a> child of a div right below the <nav>.

When used with images, BS5 will auto style the image to fit vertically.

Use .navbar-text when adding text to navbar to ensure proper styling.

NOTE: Use text-decoration-none on parent to remove underline.

Collapsible Navigation Bar (Hamburger)

Add a button after the Logo with .navbar-toggler , data-bs-toggle="collapse" and data-bs-target="#ID". Use a <span> .navbar-toggler-icon for icon.

Then wrap the navbar links with a <div> .collapse navbar-collapse with an ID that matches the target of the button.

Navbars with Dropdown

Simply add a Dropdown.

Navbar Forms and Buttons

You can add Forms in the Navbar.

NOTE: Use .me-auto on <ul> to right justify Search box/button.

Fixed and Sticky Navigation Bars

Add .fixed-top|bottom or .sticky-top to <nav>.

NOTE: Sticky only works inside it's parent container!


Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Some example text. Some example text. Some example text. Some example text. Some example text.

Carousel/Slideshow

Basic

Carousels have 3 parts: Indicators/Dots, Carousel/Slideshow and Control Icons.

Modal - dialog box/popup displayed on top of the current page.

Basic

Modals have 3 parts: Header, Body and Footer.

Size

Add .modal-sm|lg|xl to .modal-dialog.

NOTE: Small (300px), Default (500px), Large (800px) and Extra Large (1140px).

Fullscreen Modals

Add .modal-fullscreen to .modal-dialogue.

Responsive Fullscreen Modals

Add .modal-fullscreen-*-down to .modal-dialogue, where * indicates screensize below the modal should be fullsize.

Centered Modal

Add .modal-dialog-centered to .modal-dialog.

Scrolling Modal

By default, the entire modal box scrolls with the page. To have a scroll bar inside the modal, add .modal-dialog-scrollable to .modal-dialog .

Tooltips - small pop-up box that appears on hover.

Basic

Add data-bs-toggle="tooltip" attribute to an element, then use title attribute to specify tooltip text.

NOTE: Requires JS initilization to work correctly.

Hover over me to see a tooltip.

Positioning

Appears on top by default. Use data-bs-placement="top|bottom|left|right" to change.

NOTE: Put tooltip element inside a container when trying to center.

Hover

Popovers - A tooltip that respondes to clicks instead of hover.

Basic

Add data-bs-toggle="popover" atrribute to an element. Use title to specify header text and data-bs-content for body text.

NOTE: Popovers are contained in a single button.

NOTE: Popovers require JS initialization to work correctly.

Positioning

Appears on the right side by default. Use data-bs-placement="top|bottom|left|right" to change.

Closing

To close by clicking outside the element, add data-bs-trigger="focus".

Hoverable

Add data-bs-trigger="hover".

Toast - a Modal that disappears after a short while.

Basic

Toasts include a header and a body inside of a container.

NOTE: Toasts require JS initialization to work correctly if you want to open it with a button. Alternatively, use .show to always show toast.

Start with a <div> with .toast. Add a button to close the toast using data-bs-dismiss="toast".

Add a <div> with .toast-header.

Add a <div> with .toast-body.

My Toast to You!

I hope you have a wonderful and prosperous New Year!

Scrollspy - Used to automatically update active link based on scroll position.

Add data-bs-spy="scroll", data-bs-target=".navbar", data-bs-offset="50" to the body element.

See Fixed-top Navbar example here.

Offcanvas - Often used as sidebar navigation and hidden by default.

Basic

Add a container with .offcanvas .offcanvas-start|end|top|bottom and an ID.

Add a container with .offcanvas-header which contains an h1 with .offcanvas-title and a button to close the offcanvas.

Add a container with .offcanvas-body that contains your main content (links/buttons).

Add a button outside the offcanva to open it with data-bs-toggle="offcanvas", data-bs-target="#ID".

NOTE: DO NOT use buttons to open the Offcanvas; use anchor elements instead with type="button". Otherwise, the position will reset when the Offcanvas is closed!

My Offcanvas

Open Sidebar

Responsive - control when to show/hide offcanvas on different screen widths.

Add .offcanvas-sm|md|lg|xl|xxl to main container.

NOTE: Hide the Offcanvas Button by using .d-md-none.

Responsive Offcanvas

Open Responsive Offcanvas

Dark Offcanvas

Add .text-bg-dark to main container to create a dark offcanvas menu.

NOTE: Add .btn-close-whie to your closing button.

Dark Offcanvas

Open Dark Offcanvas

Utilities/Helper Classes

Borders

.border adds a standard grey border.

Adding .border-top|bottom|start|end puts a border only on that side.

Adding .border-*-0 removes that border segment.

Add .border-* where * is 1-5 to increase border width.

Use .border-*, where * is a contextual class, to add color.

Add .rounded-* to add border-radius. * can be between 0 and 5.

Add .rounded-circle for a circle.

Add .rounded-pill for a large border-radius.

Floats

Float Start, Float End and Clearfix

Use .float-start|end to justify text.

Use .clearfix on container to make floats stay in their parent container.

Float Right Float Left

Responsive Floats

Use .float-sm|md|lg|xl|xxl|none-start|end.

Float right on small screens or wider.

Float rigth on medium screens or wider.

Float rigth on large screens or wider.

Float rigth on extra large screens or wider.

Float rigth on XXL screens or wider.

Float none.

Formatting

Centering

Use .mx-auto to center a block.

NOTE: You need to specify a width.

Center

Width

Use .w-25|50|75|100|auto or .mw-100 to set the width.

Width: 25%
Width: 50%
Width: 75%
Width: 100%
Width: Auto
Max Width: 100%

Height

Use .h-25|50|75|100|auto or .mh-100 to set the height.

NOTE: Your container needs a specified height.

Height: 25%
Height: 50%
Height: 75%
Height: 100%
Height: Auto
Max Height: 100%

Spacing

Use format: {property}{sides}-{breakpoint}-{size}

NOTE: Sides and Breakpoint are optional.

NOTE: Size can also be set to auto for margin.

Margin (.m)

I have a .25rem (size 1) margin on all sides (.m-1).
I have a .50rem (size 2) margin on the top (.mt-2).
I have a 1rem (size 3) margin on the bottom (.mb-3).
I have a 1.5rem (size 4) margin on the left (.ms-4).
I have a 3rem (size 5) margin on the right (.me-5).
I have a 1rem (size 3) margin on the left and right (.mx-3).
I have a 1 rem (size 3) margin on the top and bottom (.my-3).
I have margin left set to auto [w:400px] (.ms-auto).
I have a 1rem (size 3) margin on all sides on md screens (.m-md-3).

Padding (.p)

I have a .25rem (size 1) margin on all sides (.m-1).
I have a .50rem (size 2) margin on the top (.mt-2).
I have a 1rem (size 3) margin on the bottom (.mb-3).
I have a 1.5rem (size 4) margin on the left (.ms-4).
I have a 3rem (size 5) margin on the right (.me-5).
I have a 1rem (size 3) margin on the left and right (.mx-3).
I have a 1 rem (size 3) margin on the top and bottom (.my-3).
I have a 1rem (size 3) margin on all sides on md screens (.p-md-3).

Shadows

Add a shadow to an element by using .shadow-none|sm|blank|lg.

No Shadow
Small Shadow
Default Shadow
Large Shadow

Vertical Align

Use align-baseline|top|middle|bottom|text-top|text-bottom.

NOTE: ONLY works on inline and table cell elements!

Baseline Top Middle Bottom
Default Text-Top Text-Bottom

Aspect Ratio

Creates responsive video or slideshows based on width of parent.

Add .ratio .ratio-1x1|4x3|16x9|21x9 to container.

1:1

4:3

16:9

21:9

>

Visibility

Add .invisible|.visible to control an elements visibility.

NOTE: This does not change the CSS display value.

There is a hidden in the middle.

Screenreaders

Add .visually-hidden to hide an element on all devices except screen readers.

I have a hidden except on screenreaders.

Close Icon

Use .btn-close to style a close icon - for alerts and modals mostly.

Colors (Text and Background)

See Colors

Dark Mode

Add data-bs-theme="dark" to <html> or a specific component.

Change Global Theme

Card with a Dark Theme applied

Big Ben
Big Ben

Dark Themed Card

This is a Dark Themed Card. Notice how only this component changes theme, not the entire web page.

Robert

This is just a container that has a dark background with white text.

Flex

Basic

Add .d-flex to a container.

Flex Item 1
Flex Item 2
Flex Item 3

Inline Flex

To create an inline flex container, use .d-inline-flex.

Flex Item 1
Flex Item 2
Flex Item 3

Horizontal Direction

To right align and reverse order of flex items, use .flex-row-reverse.

NOTE: Default is .flex-row.

Flex Item 1
Flex Item 2
Flex Item 3

Vertical Direction

To display the flex items vertically, use .flex-column or .flex-column-reverse.

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3

Justify Content

Use .justify-content-start|end|center|between|around to change the alignment of flex items on the main axis.

Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 1
Flex Item 2
Flex Item 3

Fill/Equal Widths

Use .flex-fill on each flex-item.

Flex Item 1
Flex Item 2
Flex Item 3

Grow

Use .flex-grow-1 on a single flex-item to make it take up the rest of the space.

Flex Item 1
Flex Item 2
Flex Item 3

Shrink

Use .flex-shrink-1 to make a flex item shrink if necessary.

NOTE: I used padding to fix the vertical alignment.

Flex Item 1
Shrink Item 2
Shrink Item 3

Order

Use .order-0|1|2|3|4|5 to change the order. The lower number is shown first.

Flex Item 1 (order-3)
Shrink Item 2 (order-1)
Shrink Item 3 (order-2)

Auto Margins

Use .ms-auto to right justify flex items, and .me.auto to left justify flex items. These classes get applied to the flex items.

Flex Item 1
Shrink Item 2
Shrink Item 3
Flex Item 1
Shrink Item 2
Shrink Item 3

.ms-auto applied to 2nd flex item.

Flex Item 1
Shrink Item 2
Shrink Item 3

Wrap

Change how the flex items wrap in a flex container by using .flex-wrap, flex-wrap-reverse or flex-nowrap (default).

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25
Flex item 26
Flex item 27
Flex item 28

Align Content/Items

Control the vertical alignment of mutliple rows of flex items by adding .align-content- start|end|center|between|around|stretch.

NOTE: Stretch is default.

NOTE: Use .align-items-* for single rows of flex items. Valid classes are start|end|center|baseline|stretch.

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25
Flex item 26
Flex item 27
Flex item 28

Align Self

Use align-self-start|end|center|baseline|stretch to chance the vertical alignment of a single flex item.

NOTE: Stretch is default.

Flex item 1
Flex item 2
Flex item 3

Responsive Flex Classes

NOTE: All flex classes come with additional responsive classes, so you can set a specific flex class on a specific screen size.

Forms

Stacked Form

Add .form-control to <input> and <textarea>.

Add .form-label to each label element.

NOTE: Checkboxes have different markup and will be discussed later.

Inline Forms (Row/Grid)

Use .row and .col to make form elements appear side by side.

Form Control Size

Add form-control-sm|lg to .form-control.

Disabled and Readonly

Use attributes disabled and readonly in addition to .form-control.

Plain Text Inputs

Use .form-control-plaintext on fields to remove borders but keep margins and padding.

Color Picker

Use an input with type="color", .form-control .form-control-color and value="#CCCCCC" to create a color picker.

You chose the color: #FF0000

Select Inputs

Select Menu

Add .form-select to the <select> element.

NOTE: Add multiple attribute to allow several items to be picked.

Size

Add .form-select-sm|lg to change the select menu size.

Disabled

Add disabled to the select menu.

Data Lists

Use Bootstrap to style data lists, which is a list of pre-defined options for an <input> element.

NOTE: Data Lists allow for typed entries!

Checkboxes and Radio Buttons

Checkboxes - used for multiple selections

Start with a wrapper element with .form-check.

Add a label element with .form-check-label.

Finish by adding an input element with .form-check-input.

NOTE: Use checked to have an option checked by default.

NOTE: Use disabled to have an option disabled.

Radio Buttons - used for single selections

Same as checkboxes but change input type to radio.

NOTE: Radio buttons in a set must share the same name attribute.

Toggle Switches

Use .form-switch on the main wrapper (.form-check)

Range

Custom

Add .form-range to the input with type="range".

50

Steps

Change the interval between range numbers by adding step="#" to input.

NOTE: Default step is 1.

50

Min and Max

Change the range by using min and max attributes.

NOTE: Default min is 1 and default max is 100.

15

Input Groups

Basic

Add icons, text or buttons in front of or behind an input field as "help text".

Use .input-group on a wrapper and .input-group-text on a <span>.

NOTE: I have used multiple helpers in this example.

https://www. .com

Size

Add .input-group-sm|lg to .input-group to change the size of an input group.

NOTE: I have used multiple inputs and helpers in this example.

https://www. .

Input Groups with Checkboxes and Radios

You can use Checkboxes and Radios as helpers.

Wrap your Checkbox/Radio in a <div> with .input-group-text followed by your <input>.

NOTE: I have disabled these inputs.

Input Group Buttons

Add buttons to input groups.

Input Groups with Dropdowns

Place the Dropdown inside the Button Group.

www.

Floating/Animated Labels

Basic

You can have your labels replace the placeholder text inside an input and float/animate when you focus on the input field.

NOTE: The <label> element must come after the <input> element and the placeholder attribute is required even though it is not shown.

Textarea

Select Menus

You can use "floating-labels" on select menus.

NOTE: The label will always appear in the top left corner, inside the select menu.

Form Validation

Basic

Use .was-validated (before) or .needs-validation (after) to the <form> element depending on if you want feedback to occur before or after form submission.

You can also use .valid-feedback or .invalid-feedback in a <div> to tell the user what's missing or needs to be done before submission.

Valid
Please enter a valid email address - hover over the exlamation mark for details.
Valid
Please fill out this field.
Valid
Check this box to submit form.

Grid System

Basic

Based on a 12 column system (sum must be <= to 12). Grid is responsive.

Has six classes: .col-|sm|md|lg|xl|xxl.

NOTE: This example is responsive on sizes lg and above.

Span 1
Span 1
Span 1
Span 1
Span 1
Span 1
Span 1
Span 1
Span 1
Span 1
Span 1
Span 1
Span 4
Span 4
Span 4
Span 4
Span 8
Span 6
Span 6
Span 12

Grid Stacked to Horizontal

Example

Starts out stacked on XS devices and becomes horizontal on larger devices.

This is the first column.
This is the second column.

Auto Columns

Don't specify the column width and Bootstrap will calculate equal size columns automatically for you.

1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4

Responsive Grid Examples

X-Small

A grid with two columns split 25/75% on all devices.

25%
75%

Small

A grid with two columns split 33/66% on small devices and larger.

NOTE: This example uses @media query to change the display setting of <div>'s to render the correct percentages.

100%
100%
33%
66%
33%
66%
33%
66%
33%
66%
33%
66%

Medium

A grid with two columns split 50/50% on medium devices and larger, but 25/75% on small devices and 100% on xsmall devices.

NOTE: This example uses @media query to change the display setting of <div>'s to render the correct percentages.

100%
100%
25%
75%
50%
50%
50%
50%
50%
50%
50%
50%

Large

A grid with two columns split 33/66% on large devices and larger, 50/50% on medium devices, 25/75% on small devices and 100% on xsmall devices.

NOTE: This example uses @media query to change the display setting of <div>'s to render the correct percentages.

100%
100%
25%
75%
50%
50%
33%
66%
33%
66%
33%
66%

X-Large

A grid with two columns split 20/80% on x-large devices and larger, 33/66% on large devices, 50/50% on medium devices, 25/75% on small devices and 100% on xsmall devices.

NOTE: This example uses @media query to change the display setting of <div>'s to render the correct percentages.

100%
100%
25%
75%
50%
50%
33%
66%
20%
80%
20%
80%

XX-Large

A grid with two columns split 8/92% on xx-large devices, 20/80% on x-large devices, 33/66% on large devices, 50/50% on medium devices, 25/75% on small devices and 100% on xsmall devices.

NOTE: This example uses @media query to change the display setting of <div>'s to render the correct percentages.

100%
100%
25%
75%
50%
50%
33%
66%
20%
80%
8%
92%

Grid Examples

Three Equal Columns

NOTE: You can have 2, 3, 4 and 6 equal width columns.

col
col
col

Three Equal Columns Using Numbers

col-4
col-4
col-4

Three Unequal Columns (25/50/25)

col-3
col-6
col-3

Setting One Column Width

col
col-6
col

Row Cols

You can control how many items appear in a row adding .row-cols-* to .row.

row-cols-1
row-cols-1
row-cols-1
row-cols-2
row-cols-2
row-cols-2
row-cols-3
row-cols-3
row-cols-3

Unequal Columns

NOTE: Column numbers must be <= 12.

col-3
col-6
col (1.5)
col (1.5)

Equal Height

The grid sizes vertically to the largest item in the row, whether because of text or CSS height.

col
col p-5
col

Nested Columns

The second grid must be the child of the selected column (i.e. before the closing of the column div).

col-8
col-6
col-6
col-4

Gutters

Change the gutters (space between columns) by adding .g-1|2|3|4|5 to the row.

NOTE: Default is .g-4.

NOTE: Changing the gutter does not affect any borders you have applied!

g-0
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
g-4
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
g-5
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Bottom