Design System

h1 tag in a page must be unique. The six heading elements, H1 through H6, denote section headings. These elements have a rank given by the number in their name.

h1. Lorem Ipsum

h2. Lorem Ipsum

h3. Lorem Ipsum

h4. Lorem Ipsum

h5. Lorem Ipsum

h6. Lorem Ipsum

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

h1. Lorem Ipsum

h2. Lorem Ipsum

h3. Lorem Ipsum

h4. Lorem Ipsum

h5. Lorem Ipsum

h6. Lorem Ipsum

Display Headings

Click on text to copy class name

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Display Headings Instant Preview

Default Display-6

Display with Font Weight 400 - Normal

Font Size

Click on text to copy class name

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

Default Paragraph (Default Font Size: 16px - 1rem)

Small (tag small)

Initialism (class initialism)

Font Size Instant Preview

Preview with Font Weight 400 - Normal

Font Weight

Click on text to copy class name

Lighter weight text (relative to the parent element)

Light weight text

Normal weight text (Default)

Medium weight text

Semibold weight text

Bolder weight text (relative to the parent element)

Bold text

Font Weight Instant Preview

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi facere doloribus quaerat quas, quisquam aperiam assumenda eveniet id consectetur similique. Saepe praesentium consequatur. Eos asperiores odio sequi quae aliquam fugiat in! Officiis, sint reprehenderit voluptatum itaque necessitatibus voluptates odit vel libero nam consequuntur culpa sed. Repudiandae, rerum eligendi provident quod necessitatibus reiciendis molestias enim itaque, ducimus recusandae quia numquam ex? Libero ad corporis est, iusto doloribus quaerat sequi.

Available Classes

fw-lighter fw-light fw-normal fw-medium fw-semibold fw-bolder fw-bold

Text Transform

Click on text to copy class name

Lowercased text.

Uppercased text.

CapiTaliZed text.

Italic text

Text with normal font style

Available Classes

text-lowercase text-uppercase text-capitalize fst-italic fst-normal

Text Colors and Effects

Click on text to copy class name

Please consider the Accessibility best practices when using colors in text. Use the Contrast Checker before choosing a color.

Text Color

Primary

Secondary

Primary Light

Secondary Light

Service colors

Success

Danger

Dark

Link

Structural

Black

Gray

Primary Transparent

Secondary Transparent

Service colors

Info

Warning

Light

Structural

White

Available Classes

text_primary text_secondary text_gray text_primary_light text_primary_transparent text_secondary_light text_secondary_transparent text_success text_info text_warning text_danger text_light text_dark text_link text_black text_white

text_important_primary text_important_secondary text_important_gray text_important_primary_light text_important_primary_transparent text_important_secondary_light text_important_secondary_transparent text_important_success text_important_info text_important_warning text_important_danger text_important_light text_important_dark text_important_link text_important_black text_important_white

Text Hover

Hover Text Primary

Hover Text Secondary

Hover Text Primary Light

Hover Text Secondary Light

Service colors

Hover Text Success

Hover Text Danger

Hover Text Dark

Hover Text Link

Structural

Hover Text Black

Hover Text Gray

Hover Text Primary Transparent

Hover Text Secondary Transparent

Service colors

Hover Text Info

Hover Text Warning

Hover Text Light

Structural

Hover Text White

Available Classes

text_primary_hover text_secondary_hover text_gray_hover text_primary_light_hover text_primary_transparent_hover text_secondary_light_hover text_secondary_transparent_hover text_success_hover text_info_hover text_warning_hover text_danger_hover text_light_hover text_dark_hover text_link_hover text_black_hover text_white_hover

text_important_primary_hover text_important_secondary_hover text_important_gray_hover text_important_primary_light_hover text_important_primary_transparent_hover text_important_secondary_light_hover text_important_secondary_transparent_hover text_important_success_hover text_important_info_hover text_important_warning_hover text_important_danger_hover text_important_light_hover text_important_dark_hover text_important_link_hover text_important_black_hover text_important_white_hover

Text Shadow

Text Shadow Primary

Text Shadow Secondary

Text Shadow Primary Light

Text Shadow Secondary Light

Service colors

Text Shadow Success

Text Shadow Danger

Text Shadow Dark

Text Shadow Link

Structural

Text Shadow Black

Text Shadow Gray

Text Shadow Primary Transparent

Text Shadow Secondary Transparent

Service colors

Text Shadow Info

Text Shadow Warning

Text Shadow Light

Structural

Text Shadow White

Available Classes

text_shadow_primary text_shadow_secondary text_shadow_gray text_shadow_primary_light text_shadow_primary_transparent text_shadow_secondary_light text_shadow_secondary_transparent text_shadow_success text_shadow_info text_shadow_warning text_shadow_danger text_shadow_light text_shadow_dark text_shadow_link text_shadow_black text_shadow_white

text_shadow_important_primary text_shadow_important_secondary text_shadow_important_gray text_shadow_important_primary_light text_shadow_important_primary_transparent text_shadow_important_secondary_light text_shadow_important_secondary_transparent text_shadow_important_success text_shadow_important_info text_shadow_important_warning text_shadow_important_danger text_shadow_important_light text_shadow_important_dark text_shadow_important_link text_shadow_important_black text_shadow_important_white

Text Decoration

Click on text to copy class name

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed

Available Classes

text-decoration-underline text-decoration-line-through text-decoration-none

Text Decoration Colors

To be used in combination with .text-decoration-underline Bootstrap class.

This text has a text decoration color primary.

This text has a text decoration color secondary.

This text has a text decoration color gray.

This text has a text decoration color primary light.

This text has a text decoration color primary transparent.

This text has a text decoration color secondary light.

This text has a text decoration color secondary transparent.

Service colors

This text has a text decoration color success.

This text has a text decoration color info.

This text has a text decoration color warning.

This text has a text decoration color danger.

This text has a text decoration color light.

This text has a text decoration color dark.

This text has a text decoration color link.

Structural

This text has a text decoration color black.

This text has a text decoration color white.

Available Classes

text_decoration_color_primary text_decoration_color_secondary text_decoration_color_gray text_decoration_color_primary_light text_decoration_color_primary_transparent text_decoration_color_secondary_light text_decoration_color_secondary_transparent text_decoration_color_success text_decoration_color_info text_decoration_color_warning text_decoration_color_danger text_decoration_color_light text_decoration_color_dark text_decoration_color_link text_decoration_color_black text_decoration_color_white

text_decoration_color_important_primary text_decoration_color_important_secondary text_decoration_color_important_gray text_decoration_color_important_primary_light text_decoration_color_important_primary_transparent text_decoration_color_important_secondary_light text_decoration_color_important_secondary_transparent text_decoration_color_important_success text_decoration_color_important_info text_decoration_color_important_warning text_decoration_color_important_danger text_decoration_color_important_light text_decoration_color_important_dark text_decoration_color_important_link text_decoration_color_important_black text_decoration_color_important_white

Text Underline

Underline Primary

Underline Secondary

Underline Primary Light

Underline Secondary Light

Service colors

Underline Success

Underline Danger

Underline Dark

Underline Link

Structural

Underline Black

Underline Gray

Underline Primary Transparent

Underline Secondary Transparent

Service colors

Underline Info

Underline Warning

Underline Light

Structural

Underline White

Text Hover Underline

Underline Primary Hover

Underline Secondary Hover

Underline Primary Light Hover

Underline Secondary Light Hover

Service colors

Underline Success Hover

Underline Danger Hover

Underline Dark Hover

Underline Link Hover

Structural

Underline Black Hover

Underline Gray Hover

Underline Primary Transparent Hover

Underline Secondary Transparent Hover

Service colors

Underline Info Hover

Underline Warning Hover

Underline Light Hover

Structural

Underline White Hover

Available Classes

underline_primary underline_secondary underline_gray underline_primary_light underline_primary_transparent underline_secondary_light underline_secondary_transparent underline_success underline_info underline_warning underline_danger underline_light underline_dark underline_link underline_black underline_white

underline_important_primary underline_important_secondary underline_important_gray underline_important_primary_light underline_important_primary_transparent underline_important_secondary_light underline_important_secondary_transparent underline_important_success underline_important_info underline_important_warning underline_important_danger underline_important_light underline_important_dark underline_important_link underline_important_black underline_important_white

underline_primary_hover underline_secondary_hover underline_gray_hover underline_primary_light_hover underline_primary_transparent_hover underline_secondary_light_hover underline_secondary_transparent_hover underline_success_hover underline_info_hover underline_warning_hover underline_danger_hover underline_light_hover underline_dark_hover underline_link_hover underline_black_hover underline_white_hover

Text Decoration Thickness

To be used in combination with .text-decoration-underline and a .text_decoration_color_lorem class as needed.

This text has a text decoration Thickness 1px.

This text has a text decoration Thickness 2px.

This text has a text decoration Thickness 3px.

This text has a text decoration Thickness 4px.

This text has a text decoration Thickness 5px.

This text has a text decoration Thickness 6px.

This text has a text decoration Thickness 7px.

This text has a text decoration Thickness 8px.

This text has a text decoration Thickness 9px.

This text has a text decoration Thickness 10px.

Available Classes

text_decoration_thickness_1 text_decoration_thickness_2 text_decoration_thickness_3 text_decoration_thickness_4 text_decoration_thickness_5 text_decoration_thickness_6 text_decoration_thickness_7 text_decoration_thickness_8 text_decoration_thickness_9 text_decoration_thickness_10

text_decoration_thickness_important_1 text_decoration_thickness_important_2 text_decoration_thickness_important_3 text_decoration_thickness_important_4 text_decoration_thickness_important_5 text_decoration_thickness_important_6 text_decoration_thickness_important_7 text_decoration_thickness_important_8 text_decoration_thickness_important_9 text_decoration_thickness_important_10

Underline Offset

Available Classes

link-offset-1

link-offset-2

link-offset-3

Text Lines

Click on text to copy class name

Apply to text tag the .underline_bicolor class to have a color/gray underline line.

COLOR/GRAY UNDERLINED

Apply to text tag .line_after_text class to have a primary 120px line after text.

TEXT WITH A LINE AFTER

Text Inline Elements

Click on text to copy class name

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine, small print.

This line rendered as bold text.

This line rendered as italicized text.

HTML Example

                                <p>You can use the mark tag to <mark>highlight</mark> text.</p>
                                <p><del>This line of text is meant to be treated as deleted text.</del></p>
                                <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
                                <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
                                <p><u>This line of text will render as underlined.</u></p>
                                <p><small>This line of text is meant to be treated as fine print.</small></p>
                                <p><strong>This line rendered as bold text.</strong></p>
                                <p><em>This line rendered as italicized text.</em></p>

Text Alignment

Click on text to copy class name

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

Start aligned text on viewports sized SM (small) or wider.

Start aligned text on viewports sized MD (medium) or wider.

Start aligned text on viewports sized LG (large) or wider.

Start aligned text on viewports sized XL (extra large) or wider.

Start aligned text on viewports sized XXL (extra extra large) or wider.

End aligned text on viewports sized SM (small) or wider.

End aligned text on viewports sized MD (medium) or wider.

End aligned text on viewports sized LG (large) or wider.

End aligned text on viewports sized XL (extra large) or wider.

End aligned text on viewports sized XXL (extra extra large) or wider.

Available Classes

text-center text-sm-center text-md-center text-lg-center text-xl-center text-xxl-center

text-start text-sm-start text-md-start text-lg-start text-xl-start text-xxl-start

text-end text-sm-end text-md-end text-lg-end text-xl-end text-xxl-end

Why avoid right-aligned, justified, and centered text.

Readability & Accessibility: Non-left-aligned text (right, center, justified) disrupts the natural reading flow in left-to-right languages. Justified text often introduces uneven word spacing ("rivers of white space"), while right and center alignment force readers to search for line starts—making it harder for everyone, especially users with dyslexia or cognitive disabilities.

Responsive Design Issues: On smaller screens, centered and justified text can lead to awkward line breaks and inconsistent spacing. These formats often behave unpredictably across browsers and devices, making content less usable and visually unbalanced in responsive layouts.

Best Practice: Use left-aligned text for all body content. It ensures clarity, improves accessibility, and maintains a consistent reading experience across screen sizes.

Exceptions: Centered text may be used for short elements like titles or quotes. Justified text should generally be avoided on the web due to poor browser support and readability concerns.

Text Vertical Alignment

Click on text to copy class name

Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.

With inline elements

baseline top middle bottom text-top text-bottom

HTML Example

                                <span class="align-baseline">baseline</span>
                                <span class="align-top">top</span>
                                <span class="align-middle">middle</span>
                                <span class="align-bottom">bottom</span>
                                <span class="align-text-top">text-top</span>
                                <span class="align-text-bottom">text-bottom</span>

With table cells:

baseline

top

middle

bottom

text-top

text-bottom

HTML Example

                               <table style="height: 100px;">
                                    <tbody>
                                        <tr>
                                        <td class="align-baseline">baseline</td>
                                        <td class="align-top">top</td>
                                        <td class="align-middle">middle</td>
                                        <td class="align-bottom">bottom</td>
                                        <td class="align-text-top">text-top</td>
                                        <td class="align-text-bottom">text-bottom</td>
                                        </tr>
                                    </tbody>
                                </table>

Text Wrapping and Overflow

Click on text to copy class name

Prevent long strings of text from breaking your components’ layout by using .text-break to set word-wrap: break-word and word-break: break-word. We use word-wrap instead of the more common overflow-wrap for wider browser support, and add the deprecated word-break: break-word to avoid issues with flex containers.

This text should wrap.

This text should overflow the parent.

text break mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

Available Classes

text-wrap text-nowrap text-break

Text Truncate

Template Dynamic Truncate

Use the [data-truncate=""] attribute with the needed number of lines.

Truncate Oneline

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, cum ullam voluptas numquam sunt earum maiores optio eaque rem quam.

Truncate Two Lines

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, cum ullam voluptas numquam sunt earum maiores optio eaque rem quam.

Truncate Three Lines

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, cum ullam voluptas numquam sunt earum maiores optio eaque rem quam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt ullam deleniti aperiam molestiae, sequi iusto enim sapiente veniam, similique saepe in repellat ducimus laboriosam culpa rem. Consequuntur quam beatae dolorum!

Truncate Four Lines

Truncate Five Lines

Truncate Six Lines

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, cum ullam voluptas numquam sunt earum maiores optio eaque rem quam. A Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt ullam deleniti aperiam molestiae, sequi iusto enim sapiente veniam, similique saepe in repellat ducimus laboriosam culpa rem. Consequuntur quam beatae dolorum!

Truncate Seven Lines

Truncate Eight Lines

Bootstrap Truncate

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis.

Requires display: inline-block or display: block.

This text is quite long, and will be truncated once displayed.

Line Height

Click on text to copy class name

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex facere voluptatibus voluptatum, labore voluptas quasi, saepe non fuga, doloribus voluptate nisi sint? Magni optio commodi, asperiores veniam mollitia doloribus dignissimos est nostrum doloremque fugit id placeat dolorem possimus ipsam? Minus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio dignissimos fugiat similique, a ex ducimus nostrum est possimus sunt eaque.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex facere voluptatibus voluptatum, labore voluptas quasi, saepe non fuga, doloribus voluptate nisi sint? Magni optio commodi, asperiores veniam mollitia doloribus dignissimos est nostrum doloremque fugit id placeat dolorem possimus ipsam? Minus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem omnis totam temporibus quae! Omnis natus unde ducimus assumenda consequuntur quas?

Available Classes

lh-1 lh-sm lh-base lh-lg

Text Elements

Vertical Rule .vr

Lorem

Ipsum

Monospace

This is in monospace

Reset Color

Muted text with a reset link.

Abbreviations

attr

HTML

Blockquotes

A well-known quote, contained in a blockquote element.

Naming a source

A well-known quote, contained in a blockquote element.

Lists

List Unstyled

This is a list.
It appears completely unstyled.
Structurally, it's still a list.
However, this style only applies to immediate child elements.
Nested lists:
- are unaffected by this style
- will still show a bullet
- and have appropriate left margin
This may still come in handy in some situations.

List Inline

This is a list item.
And another one.
But they're displayed inline.

Description List Alignment

Description lists

A description list is perfect for defining terms.

Term

Definition for the term.

And some more placeholder definition text.

Another term

This definition is short, so no extra paragraphs or anything.

Truncated term is truncated

This can be useful when space is tight. Adds an ellipsis at the end.

Nesting

Nested definition list: I heard you like definition lists. Let me put a definition list inside your definition list.

Tooltips

To apply a Tooltip use these attributes:

data-bs-title=""
data-bs-toggle="tooltip"
data-bs-placement="" (values = top | bottom | left | right)
data-bs-custom-class="" (click on below elements to copy class name for colors)
data-bs-html="true" (if html content is needed)

Colors

Tooltip Default

Tooltip White

Tooltip Primary

Tooltip Secondary

Tooltip Gray

Tooltip Primary Light

Tooltip Primary Transparent

Tooltip Secondary Light

Tooltip Secondary Transparent

Service colors

Tooltip Success

Tooltip Info

Tooltip Warning

Tooltip Danger

Tooltip Light

Tooltip Dark

Tooltip Link

Structural

Tooltip Black

Placement

Placement Top

Placement Bottom

Placement Left

Placement Right

Disclaimers

Use the [data-disclaimer=""] attribute with the needed value: external_brand and external.

External Lorem Ipsum Link

HTML Example

                                <div><a href="#" role="button" title="..." aria-label="Lorem Ipsum" class="text_primary underline_primary_hover" target="_blank" rel="noopener noreferrer" data-disclaimer="external_brand"><strong>Lorem Ipsum</strong></a></div>

External Link

HTML Example

                                <div><a href="#" role="button" title="..." aria-label="Lorem Ipsum" class="text_primary underline_primary_hover" target="_blank" rel="noopener noreferrer" data-disclaimer="external"><strong>Lorem Ipsum</strong></a></div>

References - Notes

References

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, culpa
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, culpa.

HTML Example - Anchor at title

                                        <!-- References Anchors -->
                                        <div>Lorem ipsum dolor sit <a href="#note_ref"><sup>1</sup></a></div>
                                        <div>Lorem ipsum dolor sit <a href="#note_ref"><sup>2</sup></a></div>
        
                                        <!-- References Items -->
                                        <div class="container">
                                            <div class="row">
                                                <div class="col-12">
                                                    <p class="fs-5 fw-semibold mb-4" id="note_ref">References</p>
                                                    <ol class="text-break">
                                                        <li class="fw-medium mb-1" id="note_1"><small>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, culpa</small></li>
                                                        <li class="fw-medium mb-1" id="note_2"><small>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, culpa.</small></li>                                              
                                                    </ol>               
                                                </div>
                                            </div>
                                        </div>

HTML Example - Anchor at each item

                                    <!-- References Anchors -->
                                    <div>Lorem ipsum dolor sit <a href="#note_1"><sup>1</sup></a></div>
                                    <div>Lorem ipsum dolor sit <a href="#note_2"><sup>2</sup></a></div>
    
                                    <!-- References Items -->
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-12">
                                                <p class="fs-5 fw-semibold mb-3">References</p>
                                                <ol class="text-break">
                                                    <li class="fw-medium mb-1" id="note_1"><small>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, culpa</small></li>
                                                    <li class="fw-medium mb-1" id="note_2"><small>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, culpa.</small></li>                                              
                                                </ol>       
                                            </div>
                                        </div>
                                    </div>

References Card ordered List

HTML Example

                                    <div class="row">
                                        <div class="col-12">
                                            <div class="card border-0 rounded-4 bg_gray_silver_4 p-3 p-xl-5">
                                                <div class="card-body">
                                                    <ol class="ol_primary">
                                                        <li class="mb-3"><small><a aria-label="Lorem ipsum" data-disclaimer="external" href="#" rel="noopener noreferrer" target="_blank">Lorem ipsum</a></small></li>
                                                        <li class="mb-3"><small><a aria-label="Lorem ipsum" data-disclaimer="external" href="#" rel="noopener noreferrer" target="_blank">Lorem ipsum</a></small></li>
                                                        <li class="mb-3"><small><a aria-label="Lorem ipsum" data-disclaimer="external" href="#" rel="noopener noreferrer" target="_blank">Lorem ipsum</a></small></li>
                                                        <li class="mb-3"><small><a aria-label="Lorem ipsum" data-disclaimer="external" href="#" rel="noopener noreferrer" target="_blank">Lorem ipsum</a></small></li>
                                                    </ol>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

References Card stretched link

Lorem

HTML Example

                                    <div class="container">
                                        <div class="row">
                                            <div class="col-12">
    
                                                <div class="card border-0 rounded-4 bg_gray_silver_4">
                                                    <div class="card-body p-0">
                                                        <a href="#"
                                                            class="card-link d-block fst-italic p-3 p-xl-5"
                                                            target="_blank"
                                                            rel="noopener noreferrer"
                                                            data-disclaimer="external"
                                                            aria-label="Lorem">
                                                            Lorem
                                                        </a>
                                                    </div>
                                                </div>
    
                                            </div>
                                        </div>
                                    </div>

References Card Link underline

Utilities

Borders

Bootstrap 5 Docs For Border Colors

Additive

Available Classes

border border-top border-end border-bottom border-start

Subtractive

Available Classes

border border-0 border-top-0 border-end-0 border-bottom-0 border-start-0

Width

Available Classes

border border-1 border border-2 border border-3 border border-4 border border-5

Radius

Available Classes

rounded-0 rounded-1 rounded-2 rounded-3 rounded-4 rounded-5 rounded-circle rounded-pill

Sizes

Available Classes

rounded-0 rounded-1 rounded-2 rounded-3 rounded-4 rounded-5 rounded-circle rounded-pill

HTML Example

                                <img src="..." alt="..." class="rounded-0">
                                <img src="..." alt="..." class="rounded-1">
                                <img src="..." alt="..." class="rounded-2">
                                <img src="..." alt="..." class="rounded-3">
                                <img src="..." alt="..." class="rounded-4">
                                <img src="..." alt="..." class="rounded-5">
                                <img src="..." alt="..." class="rounded-circle">
                                <img src="..." alt="..." class="rounded-pill">

HTML Example

                                <img src="..." alt="..." class="rounded-bottom-1">
                                <img src="..." alt="..." class="rounded-start-2">
                                <img src="..." alt="..." class="rounded-end-circle">
                                <img src="..." alt="..." class="rounded-start-pill">
                                <img src="..." alt="..." class="rounded-5 rounded-top-0">

Custom Colors

Service colors

Structural

Available Classes

border_primary border_secondary border_gray border_primary_light border_primary_transparent border_secondary_light border_secondary_transparent border_success border_info border_warning border_danger border_light border_dark border_link border_black border_white

Clippers

Click on Title in Example and click on Images to copy HTML

Available Classes

clip_top_bottom_left clip_xs_top_bottom_left clip_sm_top_bottom_left clip_md_top_bottom_left clip_lg_top_bottom_left clip_xl_top_bottom_left clip_xxl_top_bottom_left

clip_top_bottom_right clip_xs_top_bottom_right clip_sm_top_bottom_right clip_md_top_bottom_right clip_lg_top_bottom_right clip_xl_top_bottom_right clip_xxl_top_bottom_right

clip_top_left clip_xs_top_left clip_sm_top_left clip_md_top_left clip_lg_top_left clip_xl_top_left clip_xxl_top_left

clip_top_right clip_xs_top_right clip_sm_top_right clip_md_top_right clip_lg_top_right clip_xl_top_right clip_xxl_top_right

clip_bottom_left clip_xs_bottom_left clip_sm_bottom_left clip_md_bottom_left clip_lg_bottom_left clip_xl_bottom_left clip_xxl_bottom_left

clip_bottom_right clip_xs_bottom_right clip_sm_bottom_right clip_md_bottom_right clip_lg_bottom_right clip_xl_bottom_right clip_xxl_bottom_right

Examples

Clip Top Bottom Left

Clip Top Bottom Right

Clip Top Left

Clip Top Right

Clip Bottom Left

Clip Bottom Right

Cursors

Utility classes for cursor pointers

Hover the boxes to see in action

Available Classes

crs_alias

crs_all_scroll

crs_auto

crs_cell

crs_col_resize

crs_context_menu

crs_copy

crs_crosshair

crs_default

crs_e_resize

crs_ew_important_resize

crs_grab

crs_grabbing

crs_help

crs_move

crs_n_resize

crs_ne_resize

crs_nesw_important_resize

crs_ns_resize

crs_nw_important_resize

crs_nwse_resize

crs_no_drop

crs_none

crs_not_allowed

crs_pointer

crs_progress

crs_row_important_resize

crs_s_resize

crs_se_resize

crs_sw_important_resize

crs_text

crs_url

crs_w_important_resize

crs_wait

crs_zoom_in

crs_zoom_out

Grid System

Grid system

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container `max-width`	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# of columns	12
Gutter width	1.5rem (.75rem on left and right)
Custom gutters	Yes
Nestable	Yes
Column ordering	Yes

Breakpoints

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	`sm`	≥576px
Medium	`md`	≥768px
Large	`lg`	≥992px
Extra large	`xl`	≥1200px
Extra extra large	`xxl`	≥1400px

Containers

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px
`.container-fluid`	100%	100%	100%	100%	100%	100%

Images Size

List of images size for each element and component.
The images size are in pixels and are the reference for design and development.

Component/Element	Size (px)
Example	1920×500
Hero banner home	1920*800
Immagini pagina x	1920*600

Best Practices

When using images, consider the following:

Use the Naming Conventions utility to correctly name your images.
Use descriptive file names and alt text for accessibility and SEO purposes.
Use the specified image sizes to ensure consistency and optimal loading times.
Always optimize images for web use to reduce file size without compromising quality, use the .webp format preferably under 100Kb weight.
Ensure images are responsive and adapt to different screen sizes.
Test images across different devices and browsers to ensure they display correctly.
Avoid using images that are too large or too small for their intended purpose to maintain visual clarity.

Interactions

Text selection

user-select-all user-select-auto user-select-none

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

Pointer events

Bootstrap provides .pe-none and .pe-auto classes to prevent or add element interactions.

pe-none pe-auto

This link can not be clicked.

This link can be clicked (this is default behavior).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

Responsive Noselect Utilities

noselect noselect_xs noselect_sm noselect_md noselect_lg noselect_xl noselect_xxl

This text can be selected

This text cannot be selected

Disabled Links Utilities

These utilities can be used for stretched-link also.

The class has pointer-events: none and cursor: default as properties.

disabled_link disabled_link_important

These color gray text classes can be added to the disabled_link class.

disabled_link_color_gray disabled_link_color_gray_silver_1 disabled_link_color_gray_silver_2 disabled_link_color_gray_silver_3 disabled_link_color_gray_silver_4

disabled_link_color_gray_important disabled_link_color_gray_silver_1_important disabled_link_color_gray_silver_2_important disabled_link_color_gray_silver_3_important disabled_link_color_gray_silver_4_important

Naming Conventions

Using naming conventions for resources is a foundational best practice. The naming conventions enhance clarity, collaboration, and scalability. It is also a security best practice to avoid server issues, duplicates or unavailable resources.
These rules are valid for any kind of resources: images, files, etc.

Use lowercase letters to prevent case-sensitivity issues
Replace spaces with hyphens (e.g., "seo-friendly-filename.jpg")
Avoid special characters; stick to letters, numbers, and hyphens
Keep filenames short and descriptive (3-5 words max)
Use relevant keywords, placing important ones near the beginning
Use Webp format for images preferably. Use tools like "Squoosh" to convert them
Use under 100KB images preferably. Use tools like "Tinify" to compress them
Implement consistent naming conventions across your site
Include file type for non-image files (e.g., "quarterly-report-2024.pdf")
Use numbers for sequential content (e.g., "tutorial-part-01.html")
Use canonical file extensions (".html" not ".htm", ".jpeg" not ".jpg")
Avoid stop words unless necessary for clarity (a, and, but, etc.)
Include dates in YYYY-MM-DD format when relevant
For images, include alt text in the filename. (smiling-woman.webp has alt text "smiling-woman")
For icons, prefer SVG or Webp format

Following these guidelines will improve your SEO and maintain coding best practices.

Object Fit

Object Fit

Utility classes for object-fit css property

object-fit-contain object-fit-sm-contain object-fit-md-contain object-fit-lg-contain object-fit-xl-contain object-fit-xxl-contain

object-fit-cover object-fit-sm-cover object-fit-md-cover object-fit-lg-cover object-fit-xl-cover object-fit-xxl-cover

object-fit-fill object-fit-sm-fill object-fit-md-fill object-fit-lg-fill object-fit-xl-fill object-fit-xxl-fill

object-fit-scale object-fit-sm-scale object-fit-md-scale object-fit-lg-scale object-fit-xl-scale object-fit-xxl-scale

object-fit-none object-fit-sm-none object-fit-md-none object-fit-lg-none object-fit-xl-none object-fit-xxl-none

Object Position

Utility classes for object-position css property

object_position_center object_position_xs_center object_position_sm_center object_position_md_center object_position_lg_center object_position_xl_center object_position_xxl_center

object_position_left object_position_xs_left object_position_sm_left object_position_md_left object_position_lg_left object_position_xl_left object_position_xxl_left

object_position_right object_position_xs_right object_position_sm_right object_position_md_right object_position_lg_right object_position_xl_right object_position_xxl_right

Opacity

The opacity property sets the opacity level for an element. The opacity level describes the transparency level, where 1 is not transparent at all, .5 is 50% visible, and 0 is completely transparent.

Examples

100%

75%

50%

25%

Available Classes

opacity-100 opacity-75 opacity-50 opacity-25 opacity-0

Overflow

Utility classes for overflow

Overflow x

overflow_x_hidden overflow_x_xs_hidden overflow_x_sm_hidden overflow_x_md_hidden overflow_x_lg_hidden overflow_x_xl_hidden overflow_x_xxl_hidden

overflow_important_x_hidden overflow_important_x_xs_hidden overflow_important_x_sm_hidden overflow_important_x_md_hidden overflow_important_x_lg_hidden overflow_important_x_xl_hidden overflow_important_x_xxl_hidden

overflow_x_auto overflow_x_xs_auto overflow_x_sm_auto overflow_x_md_auto overflow_x_lg_auto overflow_x_xl_auto overflow_x_xxl_auto

overflow_important_x_auto overflow_important_x_xs_auto overflow_important_x_sm_auto overflow_important_x_md_auto overflow_important_x_lg_auto overflow_important_x_xl_auto overflow_important_x_xxl_auto

overflow_x_scroll overflow_x_xs_scroll overflow_x_sm_scroll overflow_x_md_scroll overflow_x_lg_scroll overflow_x_xl_scroll overflow_x_xxl_scroll

overflow_important_x_scroll overflow_important_x_xs_scroll overflow_important_x_sm_scroll overflow_important_x_md_scroll overflow_important_x_lg_scroll overflow_important_x_xl_scroll overflow_important_x_xxl_scroll

Overflow y

overflow_y_hidden overflow_y_xs_hidden overflow_y_sm_hidden overflow_y_md_hidden overflow_y_lg_hidden overflow_y_xl_hidden overflow_y_xxl_hidden

overflow_important_y_hidden overflow_important_y_xs_hidden overflow_important_y_sm_hidden overflow_important_y_md_hidden overflow_important_y_lg_hidden overflow_important_y_xl_hidden overflow_important_y_xxl_hidden

overflow_y_auto overflow_y_xs_auto overflow_y_sm_auto overflow_y_md_auto overflow_y_lg_auto overflow_y_xl_auto overflow_y_xxl_auto

overflow_important_y_auto overflow_important_y_xs_auto overflow_important_y_sm_auto overflow_important_y_md_auto overflow_important_y_lg_auto overflow_important_y_xl_auto overflow_important_y_xxl_auto

overflow_y_scroll overflow_y_xs_scroll overflow_y_sm_scroll overflow_y_md_scroll overflow_y_lg_scroll overflow_y_xl_scroll overflow_y_xxl_scroll

overflow_important_y_scroll overflow_important_y_xs_scroll overflow_important_y_sm_scroll overflow_important_y_md_scroll overflow_important_y_lg_scroll overflow_important_y_xl_scroll overflow_important_y_xxl_scroll

Positioning

Utility classes for positioning

Position Relative

p_re (position relative without important)

position-relative position-sm-relative position-md-relative position-lg-relative position-xl-relative position-xxl-relative

position-relative-top position-sm-relative-top position-md-relative-top position-lg-relative-top position-xl-relative-top position-xxl-relative-top

position-relative-bottom position-sm-relative-bottom position-md-relative-bottom position-lg-relative-bottom position-xl-relative-bottom position-xxl-relative-bottom

position-relative-left position-sm-relative-left position-md-relative-left position-lg-relative-left position-xl-relative-left position-xxl-relative-left

position-relative-right position-sm-relative-right position-md-relative-right position-lg-relative-right position-xl-relative-right position-xxl-relative-right

Position Absolute

p_ab (position absolute without important)

position-absolute position-sm-absolute position-md-absolute position-lg-absolute position-xl-absolute position-xxl-absolute

position-absolute-top position-sm-absolute-top position-md-absolute-top position-lg-absolute-top position-xl-absolute-top position-xxl-absolute-top

position-absolute-bottom position-sm-absolute-bottom position-md-absolute-bottom position-lg-absolute-bottom position-xl-absolute-bottom position-xxl-absolute-bottom

position-absolute-left position-sm-absolute-left position-md-absolute-left position-lg-absolute-left position-xl-absolute-left position-xxl-absolute-left

position-absolute-right position-sm-absolute-right position-md-absolute-right position-lg-absolute-right position-xl-absolute-right position-xxl-absolute-right

Position Initial

position-initial position-sm-initial position-md-initial position-lg-initial position-xl-initial position-xxl-initial

position-initial-top position-sm-initial-top position-md-initial-top position-lg-initial-top position-xl-initial-top position-xxl-initial-top

position-initial-bottom position-sm-initial-bottom position-md-initial-bottom position-lg-initial-bottom position-xl-initial-bottom position-xxl-initial-bottom

position-initial-left position-sm-initial-left position-md-initial-left position-lg-initial-left position-xl-initial-left position-xxl-initial-left

position-initial-right position-sm-initial-right position-md-initial-right position-lg-initial-right position-xl-initial-right position-xxl-initial-right

Position Inherit

position-inherit position-sm-inherit position-md-inherit position-lg-inherit position-xl-inherit position-xxl-inherit

position-inherit-top position-sm-inherit-top position-md-inherit-top position-lg-inherit-top position-xl-inherit-top position-xxl-inherit-top

position-inherit-bottom position-sm-inherit-bottom position-md-inherit-bottom position-lg-inherit-bottom position-xl-inherit-bottom position-xxl-inherit-bottom

position-inherit-left position-sm-inherit-left position-md-inherit-left position-lg-inherit-left position-xl-inherit-left position-xxl-inherit-left

position-inherit-right position-sm-inherit-right position-md-inherit-right position-lg-inherit-right position-xl-inherit-right position-xxl-inherit-right

Position Unset

position-unset position-sm-unset position-md-unset position-lg-unset position-xl-unset position-xxl-unset

position-unset-top position-sm-unset-top position-md-unset-top position-lg-unset-top position-xl-unset-top position-xxl-unset-top

position-unset-bottom position-sm-unset-bottom position-md-unset-bottom position-lg-unset-bottom position-xl-unset-bottom position-xxl-unset-bottom

position-unset-left position-sm-unset-left position-md-unset-left position-lg-unset-left position-xl-unset-left position-xxl-unset-left

position-unset-right position-sm-unset-right position-md-unset-right position-lg-unset-right position-xl-unset-right position-xxl-unset-right

Position Fixed

position-fixed position-sm-fixed position-md-fixed position-lg-fixed position-xl-fixed position-xxl-fixed

position-fixed-top position-sm-fixed-top position-md-fixed-top position-lg-fixed-top position-xl-fixed-top position-xxl-fixed-top

position-fixed-bottom position-sm-fixed-bottom position-md-fixed-bottom position-lg-fixed-bottom position-xl-fixed-bottom position-xxl-fixed-bottom

position-fixed-left position-sm-fixed-left position-md-fixed-left position-lg-fixed-left position-xl-fixed-left position-xxl-fixed-left

position-fixed-right position-sm-fixed-right position-md-fixed-right position-lg-fixed-right position-xl-fixed-right position-xxl-fixed-right

Position Sticky

position-sticky position-sm-sticky position-md-sticky position-lg-sticky position-xl-sticky position-xxl-sticky

position-sticky-top position-sm-sticky-top position-md-sticky-top position-lg-sticky-top position-xl-sticky-top position-xxl-sticky-top

position-sticky-bottom position-sm-sticky-bottom position-md-sticky-bottom position-lg-sticky-bottom position-xl-sticky-bottom position-xxl-sticky-bottom

position-sticky-left position-sm-sticky-left position-md-sticky-left position-lg-sticky-left position-xl-sticky-left position-xxl-sticky-left

position-sticky-right position-sm-sticky-right position-md-sticky-right position-lg-sticky-right position-xl-sticky-right position-xxl-sticky-right

Responsive Top - Bottom - Start - End

Top

top-sm-0 top-sm-50 top-sm-100
top-md-0 top-md-50 top-md-100
top-lg-0 top-lg-50 top-lg-100
top-xl-0 top-xl-50 top-xl-100
top-xxl-0 top-xxl-50 top-xxl-100

Bottom

bottom-sm-0 bottom-sm-50 bottom-sm-100
bottom-md-0 bottom-md-50 bottom-md-100
bottom-lg-0 bottom-lg-50 bottom-lg-100
bottom-xl-0 bottom-xl-50 bottom-xl-100
bottom-xxl-0 bottom-xxl-50 bottom-xxl-100

Start

start-sm-0 start-sm-50 start-sm-100
start-md-0 start-md-50 start-md-100
start-lg-0 start-lg-50 start-lg-100
start-xl-0 start-xl-50 start-xl-100
start-xxl-0 start-xxl-50 start-xxl-100

End

end-sm-0 end-sm-50 end-sm-100
end-md-0 end-md-50 end-md-100
end-lg-0 end-lg-50 end-lg-100
end-xl-0 end-xl-50 end-xl-100
end-xxl-0 end-xxl-50 end-xxl-100

Vertical Aligment

Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.

Choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.

To vertically center non-inline content (like <div>s and more), use our flex box utilities.

With inline elements:

baseline top middle bottom text-top text-bottom

With table cells:

align-baseline align-top align-middle align-bottom align-text-top align-baseline

Ratio

1x1

4x3

16x9

21x9

Available classes

ratio ratio-1x1

ratio ratio-4x3

ratio ratio-16x9

ratio ratio-21x9

ratio ratio-sm-1x1 ratio ratio-md-1x1 ratio ratio-lg-1x1 ratio ratio-xl-1x1 ratio ratio-xxl-1x1

ratio ratio-sm-4x3 ratio ratio-md-4x3 ratio ratio-lg-4x3 ratio ratio-xl-4x3 ratio ratio-xxl-4x3

ratio ratio-sm-16x9 ratio ratio-md-16x9 ratio ratio-lg-16x9 ratio ratio-xl-16x9 ratio ratio-xxl-16x9

ratio ratio-sm-21x9 ratio ratio-md-21x9 ratio ratio-lg-21x9 ratio ratio-xl-21x9 ratio ratio-xxl-21x9

Sizing

Utility classes for sizing

Width and Height Intervals of 10px from 0 up to 1000px

Min and Max Height Intervals of 10px from 0 up to 1000px

Width and Height Percentage | 25% - 50% - 75% - 100%

Min and Max Width Percentage | 25% - 50% - 75% - 100%

View Height Intervals of 10vh up to 1000vh

View Width Intervals of 10vw up to 1000vw

Height

h_auto h_xs_auto h_sm_auto h_md_auto h_lg_auto h_xl_auto h_xxl_auto

h_important_auto h_xs_important_auto h_sm_important_auto h_md_important_auto h_lg_important_auto h_xl_important_auto h_xxl_important_auto

h_0 h_xs_0 h_sm_0 h_md_0 h_lg_0 h_xl_0 h_xxl_0

h_important_0 h_xs_important_0 h_sm_important_0 h_md_important_0 h_lg_important_0 h_xl_important_0 h_xxl_important_0

h_10 h_xs_10 h_sm_10 h_md_10 h_lg_10 h_xl_10 h_xxl_10

Intervals of 10px up to 1000px

h_important_10 h_xs_important_10 h_sm_important_10 h_md_important_10 h_lg_important_10 h_xl_important_10 h_xxl_important_10

Intervals of 10px up to 1000px

Min Height

min_h_10 min_h_xs_10 min_h_sm_10 min_h_md_10 min_h_lg_10 min_h_xl_10 min_h_xxl_10

Intervals of 10px up to 1000px

min_h_important_10 min_h_xl_important_10 min_h_sm_important_10 min_h_md_important_10 min_h_lg_important_10 min_h_xl_important_10 min_h_xxl_important_10

Intervals of 10px up to 1000px

Max Height

max_h_10 max_h_xs_10 max_h_sm_10 max_h_md_10 max_h_lg_10 max_h_xl_10 max_h_xxl_10

Intervals of 10px up to 1000px

max_h_important_10 max_h_xl_important_10 max_h_sm_important_10 max_h_md_important_10 max_h_lg_important_10 max_h_xl_important_10 max_h_xxl_important_10

Intervals of 10px up to 1000px

Height Percentage

h_25prc h_xs_25prc h_sm_25prc h_md_25prc h_lg_25prc h_xl_25prc h_xxl_25prc

h_important_25prc h_xs_important_25prc h_sm_important_25prc h_md_important_25prc h_lg_important_25prc h_xl_important_25prc h_xxl_important_25prc

h_50prc h_xs_50prc h_sm_50prc h_md_50prc h_lg_50prc h_xl_50prc h_xxl_50prc

h_important_50prc h_xs_important_50prc h_sm_important_50prc h_md_important_50prc h_lg_important_50prc h_xl_important_50prc h_xxl_important_50prc

h_75prc h_xs_75prc h_sm_75prc h_md_75prc h_lg_75prc h_xl_75prc h_xxl_75prc

h_important_75prc h_xs_important_75prc h_sm_important_75prc h_md_important_75prc h_lg_important_75prc h_xl_important_75prc h_xxl_important_75prc

h_100prc h_xs_100prc h_sm_100prc h_md_100prc h_lg_100prc h_xl_100prc h_xxl_100prc

h_important_100prc h_xs_important_100prc h_sm_important_100prc h_md_important_100prc h_lg_important_100prc h_xl_important_100prc h_xxl_important_100prc

Min Height Percentage

min_h_25prc min_h_xs_25prc min_h_sm_25prc min_h_md_25prc min_h_lg_25prc min_h_xl_25prc min_h_xxl_25prc

min_h_important_25prc min_h_xs_important_25prc min_h_sm_important_25prc min_h_md_important_25prc min_h_lg_important_25prc min_h_xl_important_25prc min_h_xxl_important_25prc

min_h_50prc min_h_xs_50prc min_h_sm_50prc min_h_md_50prc min_h_lg_50prc min_h_xl_50prc min_h_xxl_50prc

min_h_important_50prc min_h_xs_important_50prc min_h_sm_important_50prc min_h_md_important_50prc min_h_lg_important_50prc min_h_xl_important_50prc min_h_xxl_important_50prc

min_h_75prc min_h_xs_75prc min_h_sm_75prc min_h_md_75prc min_h_lg_75prc min_h_xl_75prc min_h_xxl_75prc

min_h_important_75prc min_h_xs_important_75prc min_h_sm_important_75prc min_h_md_important_75prc min_h_lg_important_75prc min_h_xl_important_75prc min_h_xxl_important_75prc

min_h_100prc min_h_xs_100prc min_h_sm_100prc min_h_md_100prc min_h_lg_100prc min_h_xl_100prc min_h_xxl_100prc

min_h_important_100prc min_h_xs_important_100prc min_h_sm_important_100prc min_h_md_important_100prc min_h_lg_important_100prc min_h_xl_important_100prc min_h_xxl_important_100prc

Max Height Percentage

max_h_25prc max_h_xs_25prc max_h_sm_25prc max_h_md_25prc max_h_lg_25prc max_h_xl_25prc max_h_xxl_25prc

max_h_important_25prc max_h_xs_important_25prc max_h_sm_important_25prc max_h_md_important_25prc max_h_lg_important_25prc max_h_xl_important_25prc max_h_xxl_important_25prc

max_h_50prc max_h_xs_50prc max_h_sm_50prc max_h_md_50prc max_h_lg_50prc max_h_xl_50prc max_h_xxl_50prc

max_h_important_50prc max_h_xs_important_50prc max_h_sm_important_50prc max_h_md_important_50prc max_h_lg_important_50prc max_h_xl_important_50prc max_h_xxl_important_50prc

max_h_75prc max_h_xs_75prc max_h_sm_75prc max_h_md_75prc max_h_lg_75prc max_h_xl_75prc max_h_xxl_75prc

max_h_important_75prc max_h_xs_important_75prc max_h_sm_important_75prc max_h_md_important_75prc max_h_lg_important_75prc max_h_xl_important_75prc max_h_xxl_important_75prc

max_h_100prc max_h_xs_100prc max_h_sm_100prc max_h_md_100prc max_h_lg_100prc max_h_xl_100prc max_h_xxl_100prc

max_h_important_100prc max_h_xs_important_100prc max_h_sm_important_100prc max_h_md_important_100prc max_h_lg_important_100prc max_h_xl_important_100prc max_h_xxl_important_100prc

View Height

vh_10 vh_xs_10 vh_sm_10 vh_md_10 vh_lg_10 vh_xl_10 vh_xxl_10

Intervals of 10vh up to 1000vh

vh_important_10 vh_xs_important_10 vh_sm_important_10 vh_md_important_10 vh_lg_important_10 vh_xl_important_10 vh_xxl_important_10

Intervals of 10vh up to 1000vh

Min View Height

min_vh_10 min_vh_xs_10 min_vh_sm_10 min_vh_md_10 min_vh_lg_10 min_vh_xl_10 min_vh_xxl_10

Intervals of 10vh up to 1000vh

min_vh_important_10 min_vh_important_xs_10 min_vh_important_sm_10 min_vh_important_md_10 min_vh_important_lg_10 min_vh_important_xl_10 min_vh_important_xxl_10

Intervals of 10vh up to 1000vh

Max View Height

max_vh_10 max_vh_xs_10 max_vh_sm_10 max_vh_md_10 max_vh_lg_10 max_vh_xl_10 max_vh_xxl_10

Intervals of 10vh up to 1000vh

max_vh_important_10 max_vh_important_xs_10 max_vh_important_sm_10 max_vh_important_md_10 max_vh_important_lg_10 max_vh_important_xl_10 max_vh_important_xxl_10

Intervals of 10vh up to 1000vh

Width

w_auto w_xs_auto w_sm_auto w_md_auto w_lg_auto w_xl_auto w_xxl_auto

w_important_auto w_xs_important_auto w_sm_important_auto w_md_important_auto w_lg_important_auto w_xl_important_auto w_xxl_important_auto

w_0 w_xs_0 w_sm_0 w_md_0 w_lg_0 w_xl_0 w_xxl_0

w_important_0 w_xs_important_0 w_sm_important_0 w_md_important_0 w_lg_important_0 w_xl_important_0 w_xxl_important_0

w_10 w_xs_10 w_sm_10 w_md_10 w_lg_10 w_xl_10 w_xxl_10

Intervals of 10px up to 1000px

w_important_10 w_xs_important_10 w_sm_important_10 w_md_important_10 w_lg_important_10 w_xl_important_10 w_xxl_important_10

Intervals of 10px up to 1000px

Min Width

min_w_10 min_w_xs_10 min_w_sm_10 min_w_md_10 min_w_lg_10 min_w_xl_10 min_w_xxl_10

Intervals of 10px up to 1000px

min_w_important_10 min_w_xl_important_10 min_w_sm_important_10 min_w_md_important_10 min_w_lg_important_10 min_w_xl_important_10 min_w_xxl_important_10

Intervals of 10px up to 1000px

Max Width

max_w_10 max_w_xs_10 max_w_sm_10 max_w_md_10 max_w_lg_10 max_w_xl_10 max_w_xxl_10

Intervals of 10px up to 1000px

max_w_important_10 max_w_xl_important_10 max_w_sm_important_10 max_w_md_important_10 max_w_lg_important_10 max_w_xl_important_10 max_w_xxl_important_10

Intervals of 10px up to 1000px

Width Percentage

w_25prc w_xs_25prc w_sm_25prc w_md_25prc w_lg_25prc w_xl_25prc w_xxl_25prc

w_important_25prc w_xs_important_25prc w_sm_important_25prc w_md_important_25prc w_lg_important_25prc w_xl_important_25prc w_xxl_important_25prc

w_50prc w_xs_50prc w_sm_50prc w_md_50prc w_lg_50prc w_xl_50prc w_xxl_50prc

w_important_50prc w_xs_important_50prc w_sm_important_50prc w_md_important_50prc w_lg_important_50prc w_xl_important_50prc w_xxl_important_50prc

w_75prc w_xs_75prc w_sm_75prc w_md_75prc w_lg_75prc w_xl_75prc w_xxl_75prc

w_important_75prc w_xs_important_75prc w_sm_important_75prc w_md_important_75prc w_lg_important_75prc w_xl_important_75prc w_xxl_important_75prc

w_100prc w_xs_100prc w_sm_100prc w_md_100prc w_lg_100prc w_xl_100prc w_xxl_100prc

w_important_100prc w_xs_important_100prc w_sm_important_100prc w_md_important_100prc w_lg_important_100prc w_xl_important_100prc w_xxl_important_100prc

Min Width Percentage

min_w_25prc min_w_xs_25prc min_w_sm_25prc min_w_md_25prc min_w_lg_25prc min_w_xl_25prc min_w_xxl_25prc

min_w_important_25prc min_w_xs_important_25prc min_w_sm_important_25prc min_w_md_important_25prc min_w_lg_important_25prc min_w_xl_important_25prc min_w_xxl_important_25prc

min_w_50prc min_w_xs_50prc min_w_sm_50prc min_w_md_50prc min_w_lg_50prc min_w_xl_50prc min_w_xxl_50prc

min_w_important_50prc min_w_xs_important_50prc min_w_sm_important_50prc min_w_md_important_50prc min_w_lg_important_50prc min_w_xl_important_50prc min_w_xxl_important_50prc

min_w_75prc min_w_xs_75prc min_w_sm_75prc min_w_md_75prc min_w_lg_75prc min_w_xl_75prc min_w_xxl_75prc

min_w_important_75prc min_w_xs_important_75prc min_w_sm_important_75prc min_w_md_important_75prc min_w_lg_important_75prc min_w_xl_important_75prc min_w_xxl_important_75prc

min_w_100prc min_w_xs_100prc min_w_sm_100prc min_w_md_100prc min_w_lg_100prc min_w_xl_100prc min_w_xxl_100prc

min_w_important_100prc min_w_xs_important_100prc min_w_sm_important_100prc min_w_md_important_100prc min_w_lg_important_100prc min_w_xl_important_100prc min_w_xxl_important_100prc

Max Width Percentage

max_w_25prc max_w_xs_25prc max_w_sm_25prc max_w_md_25prc max_w_lg_25prc max_w_xl_25prc max_w_xxl_25prc

max_w_important_25prc max_w_xs_important_25prc max_w_sm_important_25prc max_w_md_important_25prc max_w_lg_important_25prc max_w_xl_important_25prc max_w_xxl_important_25prc

max_w_50prc max_w_xs_50prc max_w_sm_50prc max_w_md_50prc max_w_lg_50prc max_w_xl_50prc max_w_xxl_50prc

max_w_important_50prc max_w_xs_important_50prc max_w_sm_important_50prc max_w_md_important_50prc max_w_lg_important_50prc max_w_xl_important_50prc max_w_xxl_important_50prc

max_w_75prc max_w_xs_75prc max_w_sm_75prc max_w_md_75prc max_w_lg_75prc max_w_xl_75prc max_w_xxl_75prc

max_w_important_75prc max_w_xs_important_75prc max_w_sm_important_75prc max_w_md_important_75prc max_w_lg_important_75prc max_w_xl_important_75prc max_w_xxl_important_75prc

max_w_100prc max_w_xs_100prc max_w_sm_100prc max_w_md_100prc max_w_lg_100prc max_w_xl_100prc max_w_xxl_100prc

max_w_important_100prc max_w_xs_important_100prc max_w_sm_important_100prc max_w_md_important_100prc max_w_lg_important_100prc max_w_xl_important_100prc max_w_xxl_important_100prc

View Width

vw_10 vw_xs_10 vw_sm_10 vw_md_10 vw_lg_10 vw_xl_10 vw_xxl_10

Intervals of 10vw up to 1000vw

vw_important_10 vw_xs_important_10 vw_sm_important_10 vw_md_important_10 vw_lg_important_10 vw_xl_important_10 vw_xxl_important_10

Intervals of 10vw up to 1000vw

Min View Width

min_vw_10 min_vw_xs_10 min_vw_sm_10 min_vw_md_10 min_vw_lg_10 min_vw_xl_10 min_vw_xxl_10

Intervals of 10vw up to 1000vw

min_vw_important_10 min_vw_important_xs_10 min_vw_important_sm_10 min_vw_important_md_10 min_vw_important_lg_10 min_vw_important_xl_10 min_vw_important_xxl_10

Intervals of 10vw up to 1000vw

Max View Width

max_vw_10 max_vw_xs_10 max_vw_sm_10 max_vw_md_10 max_vw_lg_10 max_vw_xl_10 max_vw_xxl_10

Intervals of 10vw up to 1000vw

max_vw_important_10 max_vw_important_xs_10 max_vw_important_sm_10 max_vw_important_md_10 max_vw_important_lg_10 max_vw_important_xl_10 max_vw_important_xxt_10

Intervals of 10vw up to 1000vw

Shadows

No shadow

Small shadow

Regular shadow

Larger shadow

Shadow Hover

Utility classes for regular shadow on hover

Hover the box to see in action

shadow_hover shadow_hover_xs shadow_hover_sm shadow_hover_md shadow_hover_lg shadow_hover_xl shadow_hover_xxl

Spacing

Utility classes for spacing

How spacing works

Every element on a webpage is represented as a rectangular box. The CSS box model describes how these boxes are structured.

This is a visual representation of a box model, hover elements to interact:

Box Model Example

Margin

Border

Padding

Content

This is the actual content area

Box Model Properties

Margin: Space outside the border
Use m-* classes (m-1 through m-5)
Border: Border around the padding
Use border, border-* classes
Padding: Space between content and border
Use p-* classes (p-1 through p-5)
Content: The actual content (text, images)

Margin and padding spacing

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

The base spacer is set to 16px/1rem.

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto

Margin and Padding Sizes

Breakpoint	Width	Spacer	REM	Pixels	Example Class
xs <576px	<576px	0	0	0px	`m-0` \| `p-0`
		1	0.25	4px	`m-1` \| `p-1`
		2	0.5	8px	`m-2` \| `p-2`
		3	1.0	16px	`m-3` \| `p-3`
		4	1.5	24px	`m-4` \| `p-4`
		5	3.0	48px	`m-5` \| `p-5`
sm	≥576px	0	0	0px	`m-sm-0` \| `p-sm-0`
		1	0.25	4px	`m-sm-1` \| `p-sm-1`
		2	0.5	8px	`m-sm-2` \| `p-sm-2`
		3	1.0	16px	`m-sm-3` \| `p-sm-3`
		4	1.5	24px	`m-sm-4` \| `p-sm-4`
		5	3.0	48px	`m-sm-5` \| `p-sm-5`
md	≥768px	0	0	0px	`m-md-0` \| `p-md-0`
		1	0.25	4px	`m-md-1` \| `p-md-1`
		2	0.5	8px	`m-md-2` \| `p-md-2`
		3	1.0	16px	`m-md-3` \| `p-md-3`
		4	1.5	24px	`m-md-4` \| `p-md-4`
		5	3.0	48px	`m-md-5` \| `p-md-5`
lg	≥992px	0	0	0px	`m-lg-0` \| `p-lg-0`
		1	0.25	4px	`m-lg-1` \| `p-lg-1`
		2	0.5	8px	`m-lg-2` \| `p-lg-2`
		3	1.0	16px	`m-lg-3` \| `p-lg-3`
		4	1.5	24px	`m-lg-4` \| `p-lg-4`
		5	3.0	48px	`m-lg-5` \| `p-lg-5`
xl	≥1200px	0	0	0px	`m-xl-0` \| `p-xl-0`
		1	0.25	4px	`m-xl-1` \| `p-xl-1`
		2	0.5	8px	`m-xl-2` \| `p-xl-2`
		3	1.0	16px	`m-xl-3` \| `p-xl-3`
		4	1.5	24px	`m-xl-4` \| `p-xl-4`
		5	3.0	48px	`m-xl-5` \| `p-xl-5`
xxl	≥1400px	0	0	0px	`m-xxl-0` \| `p-xxl-0`
		1	0.25	4px	`m-xxl-1` \| `p-xxl-1`
		2	0.5	8px	`m-xxl-2` \| `p-xxl-2`
		3	1.0	16px	`m-xxl-3` \| `p-xxl-3`
		4	1.5	24px	`m-xxl-4` \| `p-xxl-4`
		5	3.0	48px	`m-xxl-5` \| `p-xxl-5`

Negative margins

In CSS, margin properties can utilize negative values (padding cannot).

Available Classes

m-n1 m-n2 m-n3 m-n4 m-n5

mx-n1 mx-n2 mx-n3 mx-n4 mx-n5

my-n1 my-n2 my-n3 my-n4 my-n5

mt-n1 mt-n2 mt-n3 mt-n4 mt-n5

me-n1 me-n2 me-n3 me-n4 me-n5

mb-n1 mb-n2 mb-n3 mb-n4 mb-n5

ms-n1 ms-n2 ms-n3 ms-n4 ms-n5

m-sm-n1 m-sm-n2 m-sm-n3 m-sm-n4 m-sm-n5

mx-sm-n1 mx-sm-n2 mx-sm-n3 mx-sm-n4 mx-sm-n5

my-sm-n1 my-sm-n2 my-sm-n3 my-sm-n4 my-sm-n5

mt-sm-n1 mt-sm-n2 mt-sm-n3 mt-sm-n4 mt-sm-n5

me-sm-n1 me-sm-n2 me-sm-n3 me-sm-n4 me-sm-n5

mb-sm-n1 mb-sm-n2 mb-sm-n3 mb-sm-n4 mb-sm-n5

ms-sm-n1 ms-sm-n2 ms-sm-n3 ms-sm-n4 ms-sm-n5

m-md-n1 m-md-n2 m-md-n3 m-md-n4 m-md-n5

mx-md-n1 mx-md-n2 mx-md-n3 mx-md-n4 mx-md-n5

my-md-n1 my-md-n2 my-md-n3 my-md-n4 my-md-n5

mt-md-n1 mt-md-n2 mt-md-n3 mt-md-n4 mt-md-n5

me-md-n1 me-md-n2 me-md-n3 me-md-n4 me-md-n5

mb-md-n1 mb-md-n2 mb-md-n3 mb-md-n4 mb-md-n5

ms-md-n1 ms-md-n2 ms-md-n3 ms-md-n4 ms-md-n5

m-lg-n1 m-lg-n2 m-lg-n3 m-lg-n4 m-lg-n5

mx-lg-n1 mx-lg-n2 mx-lg-n3 mx-lg-n4 mx-lg-n5

my-lg-n1 my-lg-n2 my-lg-n3 my-lg-n4 my-lg-n5

mt-lg-n1 mt-lg-n2 mt-lg-n3 mt-lg-n4 mt-lg-n5

me-lg-n1 me-lg-n2 me-lg-n3 me-lg-n4 me-lg-n5

mb-lg-n1 mb-lg-n2 mb-lg-n3 mb-lg-n4 mb-lg-n5

ms-lg-n1 ms-lg-n2 ms-lg-n3 ms-lg-n4 ms-lg-n5

m-xl-n1 m-xl-n2 m-xl-n3 m-xl-n4 m-xl-n5

mx-xl-n1 mx-xl-n2 mx-xl-n3 mx-xl-n4 mx-xl-n5

my-xl-n1 my-xl-n2 my-xl-n3 my-xl-n4 my-xl-n5

mt-xl-n1 mt-xl-n2 mt-xl-n3 mt-xl-n4 mt-xl-n5

me-xl-n1 me-xl-n2 me-xl-n3 me-xl-n4 me-xl-n5

mb-xl-n1 mb-xl-n2 mb-xl-n3 mb-xl-n4 mb-xl-n5

ms-xl-n1 ms-xl-n2 ms-xl-n3 ms-xl-n4 ms-xl-n5

m-xxl-n1 m-xxl-n2 m-xxl-n3 m-xxl-n4 m-xxl-n5

mx-xxl-n1 mx-xxl-n2 mx-xxl-n3 mx-xxl-n4 mx-xxl-n5

my-xxl-n1 my-xxl-n2 my-xxl-n3 my-xxl-n4 my-xxl-n5

mt-xxl-n1 mt-xxl-n2 mt-xxl-n3 mt-xxl-n4 mt-xxl-n5

me-xxl-n1 me-xxl-n2 me-xxl-n3 me-xxl-n4 me-xxl-n5

mb-xxl-n1 mb-xxl-n2 mb-xxl-n3 mb-xxl-n4 mb-xxl-n5

ms-xxl-n1 ms-xxl-n2 ms-xxl-n3 ms-xxl-n4 ms-xxl-n5

Gutters

Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.

Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.
Gutters start at 1.5rem (24px) wide. This allows us to match our grid to the padding and margin spacers scale.
Gutters can be responsively adjusted. Use breakpoint-specific gutter classes to modify horizontal gutters, vertical gutters, and all gutters.

Horizontal gutters

.gx-* classes can be used to control the horizontal gutter widths. The .container or .container-fluid parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility.

HTML Example

                                                                            <div class="container px-4 text-center">
                                                                                <div class="row gx-5">
                                                                                    <div class="col">
                                                                                    <div class="p-3">Custom column padding</div>
                                                                                    </div>
                                                                                    <div class="col">
                                                                                    <div class="p-3">Custom column padding</div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

Vertical gutters

.gy-* classes can be used to control the vertical gutter widths within a row when columns wrap to new lines. Like the horizontal gutters, the vertical gutters can cause some overflow below the .row at the end of a page. If this occurs, you add a wrapper around .row with the .overflow-hidden class:

HTML Example

                                                                            <div class="container overflow-hidden text-center">
                                                                                <div class="row gy-5">
                                                                                    <div class="col-6">
                                                                                    <div class="p-3">Custom column padding</div>
                                                                                    </div>
                                                                                    <div class="col-6">
                                                                                    <div class="p-3">Custom column padding</div>
                                                                                    </div>
                                                                                    <div class="col-6">
                                                                                    <div class="p-3">Custom column padding</div>
                                                                                    </div>
                                                                                    <div class="col-6">
                                                                                    <div class="p-3">Custom column padding</div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

Horizontal & vertical gutters

Use .g-* classes to control the horizontal and vertical grid gutters.

HTML Example

                                                                            <div class="container text-center">
                                                                                <div class="row g-2">
                                                                                    <div class="col-6">
                                                                                    <div class="p-3">Custom column padding</div>
                                                                                    </div>
                                                                                    <div class="col-6">
                                                                                    <div class="p-3">Custom column padding</div>
                                                                                    </div>
                                                                                    <div class="col-6">
                                                                                    <div class="p-3">Custom column padding</div>
                                                                                    </div>
                                                                                    <div class="col-6">
                                                                                    <div class="p-3">Custom column padding</div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

Row columns gutters

Gutter classes can also be added to row columns.

HTML Example

                                                                            <div class="container text-center">
                                                                                <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
                                                                                    <div class="col">
                                                                                    <div class="p-3">Row column</div>
                                                                                    </div>
                                                                                    <div class="col">
                                                                                    <div class="p-3">Row column</div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

No gutters

The gutters between columns in our predefined grid classes can be removed with .g-0. This removes the negative margins from .row and the horizontal padding from all immediate children columns.

Need an edge-to-edge design? Drop the parent .container or .container-fluid and add .mx-0 to the .row to prevent overflow.

In practice, here’s how it looks. Note that you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).

HTML Example

                                                                            <div class="row g-0 text-center">
                                                                                <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
                                                                                <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                                                            </div>

Gap

When using display: grid or display: flex, you can make use of gap utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default.

Available Classes

gap-0

Item 1

Item 2

gap-1

Item 1

Item 2

gap-2

Item 1

Item 2

gap-3

Item 1

Item 2

gap-4

Item 1

Item 2

gap-5

Item 1

Item 2

row-gap

row-gap sets the vertical space between children items in the specified container.

Available Classes

row-gap-0

Item 1

Item 2

row-gap-1

Item 1

Item 2

row-gap-2

Item 1

Item 2

row-gap-3

Item 1

Item 2

row-gap-4

Item 1

Item 2

row-gap-5

Item 1

Item 2

column-gap

column-gap sets the horizontal space between children items in the specified container.

Available Classes

column-gap-0

Item 1

Item 2

column-gap--1

Item 1

Item 2

column-gap-2

Item 1

Item 2

column-gap-3

Item 1

Item 2

column-gap-4

Item 1

Item 2

column-gap-5

Item 1

Item 2

Horizontal centering

Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

Centered element

Custom spacers are used extensively in the template design system to maintain consistent vertical spacing across different screen sizes. The spacers adjust automatically for responsiveness, helping to create a cohesive layout at any viewport size.

spacer provides a vertical space of 12vh for viewports smaller than 992px and 8vh for viewports 992px and larger.

half_spacer creates a smaller vertical space, set to 6vh on viewports below 992px and reduced to 3vh on viewports 992px and above.

Spacers are divs with class spacer or half_spacer.

Spacer Type	Below 992px	992px and Above
`spacer`	12vh	8vh
`half_spacer`	6vh	3vh

Using vh (viewport height) units, these spacers automatically scale with the screen size, adapting the layout fluidly on all devices.

Example of spacer

Item 1

This a spacer

Item 2

Example of half spacer

Item 1

This a half_spacer

Item 2

Stacks

Utility classes for stacks

Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap.

Use .vstack to create vertical layouts. Stacked items are full-width by default. Use .gap-* utilities to add space between items.

First item

Second item

Third item

HTML Example

                                                <div class="vstack gap-3">
                                                    <div class="p-2">First item</div>
                                                    <div class="p-2">Second item</div>
                                                    <div class="p-2">Third item</div>
                                                </div>

Use .hstack for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use .gap-* utilities to add space between items.

First item

Second item

Third item

HTML Example

                                                <div class="hstack gap-3">
                                                    <div class="p-2">First item</div>
                                                    <div class="p-2">Second item</div>
                                                    <div class="p-2">Third item</div>
                                                </div>

Using horizontal margin utilities like .ms-auto as spacers:

First item

Second item

Third item

HTML Example

                                                <div class="hstack gap-3">
                                                    <div class="p-2">First item</div>
                                                    <div class="p-2 ms-auto">Second item</div>
                                                    <div class="p-2">Third item</div>
                                                </div>

And with vertical rules:

First item

Second item

Third item

HTML Example

                                                <div class="hstack gap-3">
                                                    <div class="p-2">First item</div>
                                                    <div class="p-2 ms-auto">Second item</div>
                                                    <div class="vr"></div>
                                                    <div class="p-2">Third item</div>
                                                </div>

Transitions

Utility classes for transitions

Hover the box to see in action

transition transition_xs transition_sm transition_md transition_lg transition_xl transition_xxl

Transition

transition_slow transition_slow_xs transition_slow_sm transition_slow_md transition_slow_lg transition_slow_xl transition_slow_xxl

Transition Slow

Visibility

Utility classes for visibility

Set the visibility of elements with our visibility utilities. These utility classes do not modify the display value at all and do not affect layout – .invisible elements still take up space in the page.

Elements with the .invisible class will be hidden both visually and for assistive technology/screen reader users.

Apply.visible or.visible as needed.

visible invisible

Visually hidden

Utility classes for visually hide elements

Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with .visually-hidden. Use .visually-hidden-focusable to visually hide an element by default, but to display it when it’s focused (e.g. by a keyboard-only user). .visually-hidden-focusable can also be applied to a container–thanks to :focus-within, the container will be displayed when any child element of the container receives focus.

visually-hidden visually-hidden-focusable

                <h2 class="visually-hidden">Title for screen readers</h2>
                <a class="visually-hidden-focusable" href="#content">Skip to main content</a>
                <div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>

Z-index

Use z-index utilities to stack elements on top of one another. Requires a position value other than static, which can be set with custom styles or using our position utilities.

These are “low-level” z-index utilities because of their default values of -1 through 3, which we use for the layout of overlapping components. High-level z-index values are used for overlay components like modals and tooltips.

Available Classes

z-3 z-2 z-1 z-0 z-n1

Examples

z-3

z-2

z-1

z-0

z-n1

Backgrounds

Background Colors

Background Primary

Background Primary Transparent

Background Secondary

Background Secondary Transparent

Background Gray

Background Gray Transparent

Background Primary Light

Background Primary Light Transparent

Background Primary Transparent

Background Primary Transparent Transparent

Background Secondary Light

Background Secondary Light Transparent

Background Secondary Transparent

Background Secondary Transparent Transparent

Service colors

Background Success

Background Success Transparent

Background Info

Background Info Transparent

Background Warning

Background Warning Transparent

Background Danger

Background Danger Transparent

Background Light

Background Light Transparent

Background Dark

Background Dark Transparent

Background Link

Background Link Transparent

Structural

Background Black

Background Black Transparent

Background White

Background White Transparent

Available Classes

bg_primary bg_primary_transparent bg_secondary bg_secondary_transparent bg_gray bg_gray_transparent bg_primary_light bg_primary_light_transparent bg_primary_transparent bg_primary_transparent_transparent bg_secondary_light bg_secondary_light_transparent

bg_secondary_transparent bg_secondary_transparent_transparent bg_success bg_success_transparent bg_info bg_info_transparent bg_warning bg_warning_transparent bg_danger bg_danger_transparent bg_light bg_light_transparent

bg_dark bg_dark_transparent bg_link bg_link_transparent bg_black bg_black_transparent bg_white bg_white_transparent

bg_important_primary bg_important_primary_transparent bg_important_secondary bg_important_secondary_transparent bg_important_gray bg_important_gray_transparent bg_important_primary_light bg_important_primary_light_transparent bg_important_primary_transparent bg_important_primary_transparent_transparent bg_important_secondary_light bg_important_secondary_light_transparent

bg_important_secondary_transparent bg_important_secondary_transparent_transparent bg_important_success bg_important_success_transparent bg_important_info bg_important_info_transparent bg_important_warning bg_important_warning_transparent bg_important_danger bg_important_danger_transparent bg_important_light bg_important_light_transparent

bg_important_dark bg_important_dark_transparent bg_important_link bg_important_link_transparent bg_important_black bg_important_black_transparent bg_important_white bg_important_white_transparent

Background Hover

Click on buttons to copy class

Add class transition or transition_slow to give smooth transition

Background Primary Hover

Background Primary Transparent Hover

Background Secondary Hover

Background Secondary Transparent Hover

Background Gray Hover

Background Gray Transparent Hover

Background Primary Light Hover

Background Primary Light Transparent Hover

Background Primary Transparent Hover

Background Primary Transparent Transparent Hover

Background Secondary Light Hover

Background Secondary Light Transparent Hover

Background Secondary Transparent Hover

Background Secondary Transparent Transparent Hover

Service colors

Background Success Hover

Background Success Transparent Hover

Background Info Hover

Background Info Transparent Hover

Background Warning Hover

Background Warning Transparent Hover

Background Danger Hover

Background Danger Transparent Hover

Background Light Hover

Background Light Transparent Hover

Background Dark Hover

Background Dark Transparent Hover

Background Link Hover

Background Link Transparent Hover

Structural

Background Black Hover

Background Black Transparent Hover

Background White Hover

Background White Transparent Hover

Preview

Available Classes

bg_primary_hover bg_primary_transparent_hover bg_secondary_hover bg_secondary_transparent_hover bg_gray_hover bg_gray_transparent_hover bg_primary_light_hover bg_primary_light_transparent_hover bg_primary_transparent_hover bg_primary_transparent_transparent_hover bg_secondary_light_hover bg_secondary_light_transparent_hover

bg_secondary_transparent_hover bg_secondary_transparent_transparent_hover bg_success_hover bg_success_transparent_hover bg_info_hover bg_info_transparent_hover bg_warning_hover bg_warning_transparent_hover bg_danger_hover bg_danger_transparent_hover bg_light_hover bg_light_transparent_hover

bg_dark_hover bg_dark_transparent_hover bg_link_hover bg_link_transparent_hover bg_black_hover bg_black_transparent_hover bg_white_hover bg_white_transparent_hover

bg_important_primary_hover bg_important_primary_transparent_hover bg_important_secondary_hover bg_important_secondary_transparent_hover bg_important_gray_hover bg_important_gray_transparent_hover bg_important_primary_light_hover bg_important_primary_light_transparent_hover bg_important_primary_transparent_hover bg_important_primary_transparent_transparent_hover bg_important_secondary_light_hover bg_important_secondary_light_transparent_hover

bg_important_secondary_transparent_hover bg_important_secondary_transparent_transparent_hover bg_important_success_hover bg_important_success_transparent_hover bg_important_info_hover bg_important_info_transparent_hover bg_important_warning_hover bg_important_warning_transparent_hover bg_important_danger_hover bg_important_danger_transparent_hover bg_important_light_hover bg_important_light_transparent_hover

bg_important_dark_hover bg_important_dark_transparent_hover bg_important_link_hover bg_important_link_transparent_hover bg_important_black_hover bg_important_black_transparent_hover bg_important_white_hover bg_important_white_transparent_hover

Background Overlays

Click on boxes to copy class

To apply overlay on hover, add [ _hover ] to class name

BLACK AND WHITE

Top Black - Bottom White

Top White - Bottom Black

BLACK

Black

Top Black - Bottom None

Top None - Bottom Black

WHITE

White

Top White - Bottom None

Top None - Bottom White

GRAY

Gray

Top Gray - Bottom None

Top None - Bottom Gray

PRIMARY

Top Primary - Bottom None

Top None - Bottom Primary

Top Black - Bottom Primary

Top Primary - Bottom Black

Top White - Bottom Primary

Top Primary - Bottom White

SECONDARY

Top Secondary - Bottom None

Top None - Bottom Secondary

Top Black - Bottom Secondary

Top Secondary - Bottom Black

Top White - Bottom Secondary

Top Secondary - Bottom White

GRAY

Top Gray - Bottom None

Top None - Bottom Gray

Top Black - Bottom Gray

Top Gray - Bottom Black

Top White - Bottom Gray

Top Gray - Bottom White

PRIMARY LIGHT

Top Primary Light - Bottom None

Top None - Bottom Primary Light

Top Black - Bottom Primary Light

Top Primary Light - Bottom Black

Top White - Bottom Primary Light

Top Primary Light - Bottom White

PRIMARY TRANSPARENT

Top Primary Transparent - Bottom None

Top None - Bottom Primary Transparent

Top Black - Bottom Primary Transparent

Top Primary Transparent - Bottom Black

Top White - Bottom Primary Transparent

Top Primary Transparent - Bottom White

SECONDARY LIGHT

Top Secondary Light - Bottom None

Top None - Bottom Secondary Light

Top Black - Bottom Secondary Light

Top Secondary Light - Bottom Black

Top White - Bottom Secondary Light

Top Secondary Light - Bottom White

SECONDARY TRANSPARENT

Top Secondary Transparent - Bottom None

Top None - Bottom Secondary Transparent

Top Black - Bottom Secondary Transparent

Top Secondary Transparent - Bottom Black

Top White - Bottom Secondary Transparent

Top Secondary Transparent - Bottom White

Service colors

SUCCESS

Top Success - Bottom None

Top None - Bottom Success

Top Black - Bottom Success

Top Success - Bottom Black

Top White - Bottom Success

Top Success - Bottom White

INFO

Top Info - Bottom None

Top None - Bottom Info

Top Black - Bottom Info

Top Info - Bottom Black

Top White - Bottom Info

Top Info - Bottom White

WARNING

Top Warning - Bottom None

Top None - Bottom Warning

Top Black - Bottom Warning

Top Warning - Bottom Black

Top White - Bottom Warning

Top Warning - Bottom White

DANGER

Top Danger - Bottom None

Top None - Bottom Danger

Top Black - Bottom Danger

Top Danger - Bottom Black

Top White - Bottom Danger

Top Danger - Bottom White

LIGHT

Top Light - Bottom None

Top None - Bottom Light

Top Black - Bottom Light

Top Light - Bottom Black

Top White - Bottom Light

Top Light - Bottom White

DARK

Top Dark - Bottom None

Top None - Bottom Dark

Top Black - Bottom Dark

Top Dark - Bottom Black

Top White - Bottom Dark

Top Dark - Bottom White

LINK

Background Overlay Custom on Image

Use the data-overlay attribute to set your custom overlay

Wrap the image in a div with class j_image_w_overlay_wrapper overflow-hidden position-relative rounded-4
Add a div with class j_overlay_for_image inside the wrapper div and before the image tag
Add a data-overlay attribute to the j_overlay_for_image div with the gradient (data-overlay="linear-gradient(90deg, rgba(0,0,0,0.938813025210084) 0%, rgba(255,255,255,0) 100%)"). or whatever gradient is needed.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci, et.

HTML Example

                        <div class="j_image_w_overlay_wrapper overflow-hidden position-relative rounded-4">
                            <div class="j_overlay_for_image" data-overlay="linear-gradient(90deg, rgba(0,0,0,0.938813025210084) 0%, rgba(255,255,255,0) 100%)"></div>
                            <img src="..." alt="..." class="img-fluid object-fit-cover w-100 h_600">
                            <div class="row position-absolute top-50 start-0 translate-middle-y p-5">
                                <div class="col-lg-6">
                                    <p class="fs-3 text_white text_shadow_black">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci, et.</p>
                                </div>
                            </div>
                        </div>

Animations

Click on boxes to copy the [data-gsap] attribute

Available Animations

data-gsap="fromOpacity" data-gsap="fromOpacityScale"

data-gsap="fromScale" data-gsap="fromScaleX" data-gsap="fromScaleY"

data-gsap="fromClipHorizontal" data-gsap="fromClipVertical" data-gsap="fromClipOpacityScale"

data-gsap="fromX" data-gsap-x="300" data-gsap="fromX" data-gsap-x="-300"

data-gsap="fromY" data-gsap-y="50" data-gsap="fromY" data-gsap-y="-50"

data-gsap="fromRotate" data-gsap="fromOpacityRotateScale"

From Opacity

From Opacity

From Opacity Scale

From Scale

From Scale

From Scale Horizontal

From Scale Vertical

From Clip

From Clip Horizontal

From Clip Vertical

From Clip Opacity Scale

From Horizontal

From Horizontal Right
(xPercent positive)

From Horizontal Left
(xPercent negative)

From Vertical

From Vertical Bottom
(yPercent positive)

From Vertical Top
(yPercent negative)

From Rotate

From Rotate

From Fade Rotate Scale

Zoom on Hover in Container

Lorem Ipsum

HTML Example

                                <div class="container">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="overflow-hidden position-relative rounded" data-gsap="zoomOnHoverInContainer">
                                                <picture>
                                                    <source srcset="..." media="(max-width: 576px)">
                                                    <img src="..." class="object-fit-cover rounded-4 w-100 h_450 img-fluid" loading="lazy" title="..." alt="...">
                                                </picture>
                                                <a class="overlay_black_primary position-absolute top-0 start-0 w-100 h-100 rounded-4 d-flex flex-column justify-content-end align-items-end flex-wrap p-4" href="..." title="..." rel="noopener noreferrer" target="_blank" data-disclaimer="external_brand">
                                                    <p data-truncate="2" class="fs-4 fw-semibold text_white text_shadow_black mb-lg-4 mb-2">Lorem Ipsum <i class="bi bi-arrow-right" aria-hidden="true"></i></p>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

Change colors on scroll

Lorem

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit aliquam voluptate quaerat ad, voluptas libero consectetur blanditiis, cumque magnam maiores numquam beatae laudantium aut temporibus doloremque magni illum consequuntur totam!

HTML Example

                            <div class="container-fluid h_450 d-flex align-items-center" data-gsap="changeColorsOnScroll" data-gsap-bgcolor-leave="#ffffff" data-gsap-bgcolor-enter="#464e7e" data-gsap-textcolor-enter="#ffffff" data-gsap-textcolor-leave="#000000">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-12">
                                            <h2 class="fw-light">Lorem</h2>
                                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus magni, eaque aspernatur officiis eligendi consequatur beatae. Voluptatem omnis voluptate reiciendis et vel praesentium veniam maxime animi velit, aliquid alias ad.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

Text From Opacity Scale

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, dolorem deleniti magni ea dolorum illo iure officiis quo optio saepe, ad libero! Quidem quaerat aspernatur porro officiis similique odio quam?

HTML Example

                                <p data-gsap="fromOpacityScale">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, dolorem deleniti magni ea dolorum illo iure officiis quo optio saepe, ad libero! Quidem quaerat aspernatur porro officiis similique odio quam?</p>

Components

Template Components for Lorem Ipsum Design System with Bootstrap 5.3 Toolkit

NOTE: When copying HTML content, remove any inline styles generated by rendered code.

Functional Components

Icons

Bootstrap Icon Set

Alerts

Examples

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Live Example

Link Color

Use the .alert-link utility class to quickly provide matching colored links within any alert.

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

Additional Content

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Icons

An example alert with an icon

Dismissing

When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the closed.bs.alert event and programmatically sets focus() to the most appropriate location in the page. If you’re planning to move focus to a non-interactive element that normally does not receive focus, make sure to add tabindex="-1" to the element.

Test Dismissing Alert Element removed from the DOM. Refresh the page to see it again.

Badges

Headings

Example heading New

HTML Example

                            <h1>Example heading <span class="badge text-bg-secondary">New</span></h1>
                            <h2>Example heading <span class="badge text-bg-secondary">New</span></h2>
                            <p class="fs-3 fw-medium">Example heading <span class="badge text-bg-secondary">New</span></p>
                            <h4>Example heading <span class="badge text-bg-secondary">New</span></h4>
                            <h5>Example heading <span class="badge text-bg-secondary">New</span></h5>
                            <h6>Example heading <span class="badge text-bg-secondary">New</span></h6>

Buttons

HTML Example

                            <button type="button" class="btn btn-primary rounded-pill">
                                Notifications <span class="badge text-bg-secondary">4</span>
                            </button>

Positioned

HTML Example

                           <button type="button" class="btn btn-primary rounded-pill position-relative">
                                Inbox
                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                    99+
                                    <span class="visually-hidden">unread messages</span>
                                </span>
                            </button>

HTML Example

                            <button type="button" class="btn btn-primary rounded-pill position-relative">
                                Profile
                                <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
                                    <span class="visually-hidden">New alerts</span>
                                </span>
                            </button>

Background Colors

Primary

Secondary

Success

Warning

Info

Light

Dark

HTML Example

                            <span class="badge text-bg-primary">Primary</span>
                            <span class="badge text-bg-secondary">Secondary</span>
                            <span class="badge text-bg-success">Success</span>
                            <span class="badge text-bg-danger">Danger</span>
                            <span class="badge text-bg-warning">Warning</span>
                            <span class="badge text-bg-info">Info</span>
                            <span class="badge text-bg-light">Light</span>
                            <span class="badge text-bg-dark">Dark</span>

Pill Badges

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

HTML Example

                            <span class="badge rounded-pill text-bg-primary">Primary</span>
                            <span class="badge rounded-pill text-bg-secondary">Secondary</span>
                            <span class="badge rounded-pill text-bg-success">Success</span>
                            <span class="badge rounded-pill text-bg-danger">Danger</span>
                            <span class="badge rounded-pill text-bg-warning">Warning</span>
                            <span class="badge rounded-pill text-bg-info">Info</span>
                            <span class="badge rounded-pill text-bg-light">Light</span>
                            <span class="badge rounded-pill text-bg-dark">Dark</span>

Collapse

Example

Link with href

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

HTML Example

                            <p class="d-inline-flex gap-1">
                                <a class="btn btn-primary rounded-pill" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                                    Link with href
                                </a>
                                <button class="btn btn-primary rounded-pill" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                    Button with data-bs-target
                                </button>
                            </p>
                            <div class="collapse" id="collapseExample">
                                <div class="card card-body">
                                    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
                                </div>
                            </div>

Horizontal

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.

HTML Example

                            <p>
                                <button class="btn btn-primary rounded-pill" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
                                    Toggle width collapse
                                </button>
                            </p>
                            <div style="min-height: 120px;">
                                <div class="collapse collapse-horizontal" id="collapseWidthExample">
                                    <div class="card card-body" style="width: 300px;">
                                    This is some placeholder content for a horizontal collapse. It’s hidden by default and shown when triggered.
                                    </div>
                                </div>
                            </div>

Multiple Targets

Toggle first element

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.

HTML Example

                           <p class="d-inline-flex gap-1">
                                <a class="btn btn-primary rounded-pill" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
                                <button class="btn btn-primary rounded-pill" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
                                <button class="btn btn-primary rounded-pill" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
                            </p>
                            <div class="row">
                                <div class="col">
                                    <div class="collapse multi-collapse" id="multiCollapseExample1">
                                    <div class="card card-body">
                                        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
                                    </div>
                                    </div>
                                    </div>
                                <div class="col">
                                    <div class="collapse multi-collapse" id="multiCollapseExample2">
                                    <div class="card card-body">
                                        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
                                    </div>
                                    </div>
                                </div>
                            </div>

Buttons

Buttons and Links

Links type

Link Type	Use
This is a standalone external link	For External Links [generally it triggers a disclaimer with "external" value]
This is an external link into a text context.	For External Links [generally it triggers a disclaimer with "external" value]

Buttons type

Buttons Rounded	Buttons Squared	Use
		For relevant functionalities actions, for links over image banners for better visibility and external linked CTA
		For relevant functionalities actions, for links over image banners for better visibility and external linked CTA
		For relevant functionalities actions, for links over image banners for better visibility and external linked CTA
		For internal pages links












		For informative external links or documents
		For informative external links or documents
		For informative external links or documents
		For informative internal links or documents
		For informative internal links or documents
		For informative internal links or documents












		For documents links
		For documents links
		For documents links
		For documents links
		For documents links
		For documents links

Button variants

One solid button per Bootstrap role in the CMS palette. Additional palette colors have no .btn- class of their own.

Service colors

Link

Available Classes

btn btn-primary btn btn-secondary

Service colors

btn btn-success btn btn-info btn btn-warning btn btn-danger btn btn-light btn btn-dark

Outline buttons

Same roles, border-only. Use them for secondary actions next to a solid button.

Service colors

Available Classes

btn btn-outline-primary btn btn-outline-secondary

Service colors

btn btn-outline-success btn btn-outline-info btn btn-outline-warning btn btn-outline-danger btn btn-outline-light btn btn-outline-dark

Buttons size

Size Rounded	Size Squared	Use
		Use small buttons for less important actions.
		Use medium buttons for primary actions.
		Use large buttons for key actions that require more emphasis.

Disabled state

On a <button> the disabled attribute is enough. An <a> has no disabled attribute, so it needs .disabled plus aria-disabled="true" and tabindex="-1" to be skipped by keyboard and screen readers.

Disabled link

HTML Example

                            <button type="button" class="btn btn-primary" disabled>Disabled button</button>
                            <button type="button" class="btn btn-outline-primary" disabled>Disabled outline</button>
                            <a href="#" class="btn btn-primary disabled" role="button" aria-disabled="true" tabindex="-1">Disabled link</a>

Toggle state

A button that stays pressed. data-bs-toggle="button" lets Bootstrap flip it, or you can ship it already on with .active. Either way aria-pressed is what tells assistive technology its state.

Toggle link

HTML Example

                            <button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle me</button>
                            <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle</button>

Block buttons

Full-width buttons come from the grid, not from the button: wrap them in .d-grid and space them with .gap-*. Add a .d-md-block to go back to inline width from that breakpoint up.

HTML Example

                            <div class="d-grid gap-2">
                                <button type="button" class="btn btn-primary">Full width button</button>
                            </div>

                            <div class="d-grid gap-2 d-md-block">
                                <button type="button" class="btn btn-primary">Full width up to md</button>
                            </div>

Button tags

The same classes work on <button>, <a> and <input>. Pick by behaviour, not by looks: a link navigates, a button acts. An <a> styled as a button needs role="button".

Link

HTML Example

                            <a href="#" class="btn btn-primary" role="button">Link</a>
                            <button type="button" class="btn btn-primary">Button</button>
                            <input type="button" class="btn btn-primary" value="Input">
                            <input type="submit" class="btn btn-primary" value="Submit">
                            <input type="reset" class="btn btn-primary" value="Reset">

Button Group

Headings

These classes can also be added to groups of links, as an alternative to the .nav navigation components.

Active link Link Link

Mixed Styles

Outlined styles

Button toolbar

Sizing

Nesting

Vertical Variation

Radio 1 Radio 2 Radio 3

Buttons guidelines

You should use descriptive text in buttons and links to help users with assistive technologies clearly understand what action they're taking and where they will be redirected.
Use aria-label (with matching text with the visible one) and title attributes on buttons and links tags to proper help assistive technologies.

Accessibility best practices

Example of an accessible button

Clarity for screen reader users:
- Accessible names provide clear context for users relying on assistive technologies.
- They describe the purpose or destination of the button or link.
Improved navigation:
- Users can quickly understand and navigate interactive elements.
- Reduces confusion when multiple buttons or links have similar visual appearances.
Better user experience:
- Accessible names benefit all users, not just those with disabilities.
- They provide instant understanding of an element's function.
Search engine optimization:
- Descriptive names can improve content indexing and searchability.

A "Read more" button is not a best practice

Example of a not accessible button

Lack of specificity:
- Like "Read more", it doesn't tell users what they'll find out more about.
- It's vague and doesn't provide clear expectations for the link destination.
Context-dependent understanding:
- Users, especially those using screen readers, may not have the surrounding context when navigating through links.
- This makes it difficult to understand the purpose of the link.
Repetition issues:
- If multiple links on a page use "Find out more", it becomes confusing and unhelpful.
- Screen readers may read out "Find out more, Find out more, Find out more" without distinction.
Reduced scanability:
- Users scanning a page for specific information can't quickly determine if the link is relevant to their needs.
Accessibility concerns:
- Fails to meet WCAG 2.4.4 (Link Purpose in Context) guidelines.
- Doesn't provide enough information for users to determine the link's purpose from the link text alone.
Potential SEO impact:
- Generic link text doesn't contribute meaningful information for search engines.

Form Elements

Bootstrap 5 Docs for Layout

Bootstrap 5 Docs for Validation

Click on elements to copy HTML.

Tabs - Tabs Pills

Standard Tabs

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum minima odit tempora consequatur explicabo, nam expedita cum, fugit nihil neque nobis aliquid voluptatum commodi enim adipisci blanditiis laborum itaque ducimus.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem alias optio libero harum voluptate quibusdam? Ex fuga autem laboriosam similique.

HTML Example

                            <div class="container">
                                <div class="row">
                                    <div class="col-12">
                                        <!-- Tabs -->
                                        <div class="standard_tabs">
                                            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                                <button class="nav-link active" id="first" data-bs-toggle="tab" data-bs-target="#nav-first" role="tab" aria-controls="nav-first" aria-selected="true" title="First">First</button>
                                                <button class="nav-link" id="second" data-bs-toggle="tab" data-bs-target="#nav-second" role="tab" aria-controls="nav-second" aria-selected="false" title="Second">Second</button>
                                            </div>
                                            <div class="tab-content" id="nav-tabContent">
                                                <div class="tab-pane fade show active" id="nav-first" role="tabpanel" aria-labelledby="first" tabindex="0">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="py-5">
                                                                <p class="mb-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum minima odit tempora consequatur explicabo, nam expedita cum, fugit nihil neque nobis aliquid voluptatum commodi enim adipisci blanditiis laborum itaque ducimus.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade show" id="nav-second" role="tabpanel" aria-labelledby="second" tabindex="0">
                                                    <div class="row">
                                                        <div class="col-12">
                                                            <div class="py-5">
                                                                <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem alias optio libero harum voluptate quibusdam? Ex fuga autem laboriosam similique.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div><!-- .tab-content -->
                                        </div><!-- .standard_tabs -->
                                    </div>
                                </div>
                            </div>

Standard Tabs Pills

First Tab Pill
Second Tab Pill

...Content First

...Content Second

HTML Example

                            <div class="container">
                                <div class="row">
                                    <div class="col-12">
                                        <!-- Tabs Pills -->
                                        <div class="standard_tabs">
                                            <ul class="nav nav-pills" id="pills-tab" role="tablist">
                                                <li class="nav-item" role="presentation">
                                                    <a class="nav-link active" id="first_pills_type" data-bs-toggle="pill" data-bs-target="#first_pills" title="First Pill" role="tab" aria-controls="first_pills" aria-selected="true">First Tab Pill</a>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <a class="nav-link" id="second_pills_type" data-bs-toggle="pill" data-bs-target="#second_pills" title="Second Pill" role="tab" aria-controls="second_pills" aria-selected="false">Second Tab Pill</a>
                                                </li>
                                            </ul>
                                            <div class="tab-content" id="pills-tabContent">
                                                <div class="tab-pane fade show active" id="first_pills" role="tabpanel" aria-labelledby="first_pills_type">
                                                    <div class="row py-4 border-bottom">
                                                        <div class="col-12">
                                                            <p>...Content First</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="second_pills" role="tabpanel" aria-labelledby="second_pills_type">
                                                    <div class="row py-4 border-bottom">
                                                        <div class="col-12">
                                                            <p>...Content Second</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div><!-- .tab-content -->
                                        </div><!-- .standard_tabs -->
                                    </div>
                                </div>
                            </div>

Standard Tabs Pills Rounded

First Tab Pill
Second Tab Pill

...Content First

...Content Second

HTML Example

                            <div class="container">
                                <div class="row">
                                    <div class="col-12">
                                        <!-- Tabs Pills -->
                                        <div class="standard_tabs">
                                            <ul class="nav nav-pills" id="rounded-pills-tab" role="tablist">
                                                <li class="nav-item" role="presentation">
                                                    <a class="nav-link rounded-pill active" id="first_rounded_pills_type" data-bs-toggle="pill" data-bs-target="#first_rounded_pills" title="First Pill" role="tab" aria-controls="first_rounded_pills" aria-selected="true">First Tab Pill</a>
                                                </li>
                                                <li class="nav-item" role="presentation">
                                                    <a class="nav-link rounded-pill" id="second_rounded_pills_type" data-bs-toggle="pill" data-bs-target="#second_rounded_pills" title="Second Pill" role="tab" aria-controls="second_rounded_pills" aria-selected="false">Second Tab Pill</a>
                                                </li>
                                            </ul>
                                            <div class="tab-content" id="rounded-pills-tabContent">
                                                <div class="tab-pane fade show active" id="first_rounded_pills" role="tabpanel" aria-labelledby="first_rounded_pills_type">
                                                    <div class="row py-4 border-bottom">
                                                        <div class="col-12">
                                                            <p>...Content First</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="second_rounded_pills" role="tabpanel" aria-labelledby="second_rounded_pills_type">
                                                    <div class="row py-4 border-bottom">
                                                        <div class="col-12">
                                                            <p>...Content Second</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div><!-- .tab-content -->
                                        </div><!-- .standard_tabs -->
                                    </div>
                                </div>
                            </div>

List Group

Section 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 5

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 6

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 7

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 8

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 9

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 10

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 11

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 12

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 13

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 14

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 15

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 16

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

HTML Example

                            <div class="container">
                                <div class="row">
                                    <aside class="col-lg-4 sticky-lg-top sticky-offset-9vh align-self-start bg-light rounded p-3">
                                        <nav>
                                            <div class="list-group">
                                                <a href="#standard1" class="list-group-item bg_primary_hover transition crs_pointer">List Item Background Hover Primary</a>                                               
                                            </div>
                                        </nav>
                                    </aside>
                                    <div class="col-lg-8 mt-5 mt-lg-0">
                                        <div class="mb-2">
                                            <a id="standard1"></a>
                                            <h3 class="text_primary">Section 1</h3>
                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.</p>
                                        </div>                       
                                    </div>                       
                                </div>                       
                            </div>

List Group Flush

Section 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 4

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 5

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 6

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 7

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 8

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 9

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 10

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 11

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 12

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 13

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 14

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 15

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

Section 16

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.

HTML Example

                            <div class="container">
                                <div class="row">
                                    <aside class="col-lg-4 sticky-lg-top sticky-offset-9vh align-self-start bg-light rounded p-3">
                                        <nav>
                                            <div class="list-group list-group-flush">
                                                <a href="#flush1" class="list-group-item bg_primary_hover transition crs_pointer">List Item Background Hover Primary</a>                                               
                                            </div>
                                        </nav>
                                    </aside>
                                    <div class="col-lg-8 mt-5 mt-lg-0">
                                        <div class="mb-2">
                                            <a id="flush1"></a>
                                            <h3 class="text_primary">Section 1</h3>
                                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente natus accusantium eum alias deleniti optio asperiores dolorum aliquam cum perspiciatis eligendi aliquid, necessitatibus facilis.</p>
                                        </div>                       
                                    </div>                       
                                </div>                       
                            </div>

Carousel

Slides Only

HTML Example

                            <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" style="transition: transform .5s ease, opacity .5s ease-out">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img src="..." alt="..." class="d-block w-100 h_600 img-fluid object-fit-cover">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="..." alt="..." class="d-block w-100 h_600 img-fluid object-fit-cover">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="..." alt="..." class="d-block w-100 h_600 img-fluid object-fit-cover">
                                    </div>
                                </div>
                            </div>

With Controls

HTML Example

                            <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img src="..." alt="..." class="d-block w-100 h_600 img-fluid object-fit-cover">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="..." alt="..." class="d-block w-100 h_600 img-fluid object-fit-cover">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="..." alt="..." class="d-block w-100 h_600 img-fluid object-fit-cover">
                                    </div>
                                </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            </div>

With Captions

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

HTML Example

                            <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
                                <div class="carousel-indicators">
                                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
                                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
                                </div>
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img src="..." alt="..." class="d-block w-100 h_600 object-fit-cover">
                                        <div class="carousel-caption d-none d-md-block">
                                            <h5>First slide label</h5>
                                            <p>Some representative placeholder content for the first slide.</p>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <img src="..." alt="..." class="d-block w-100 h_600 object-fit-cover">
                                        <div class="carousel-caption d-none d-md-block">
                                            <h5>Second slide label</h5>
                                            <p>Some representative placeholder content for the second slide.</p>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <img src="..." alt="..." class="d-block w-100 h_600 object-fit-cover">
                                        <div class="carousel-caption d-none d-md-block">
                                            <h5>Third slide label</h5>
                                            <p>Some representative placeholder content for the third slide.</p>
                                        </div>
                                    </div>
                                </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            </div>

Crossfade

HTML Example

                            <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img src="..." alt="..." class="d-block w-100 h_600 object-fit-cover">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="..." alt="..." class="d-block w-100 h_600 object-fit-cover">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="..." alt="..." class="d-block w-100 h_600 object-fit-cover">
                                    </div>
                                </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            </div>

Individual .carousel-item Interval

HTML Example

                            <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="carousel-item active" data-bs-interval="10000">
                                        <img src="..." alt="..." class="d-block w-100 h_600 object-fit-cover">
                                    </div>
                                    <div class="carousel-item" data-bs-interval="2000">
                                        <img src="..." alt="..." class="d-block w-100 h_600 object-fit-cover">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="..." alt="..." class="d-block w-100 h_600 object-fit-cover">
                                    </div>
                                </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            </div>

Disable touch swiping

HTML Example

                            <div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
                                <div class="carousel-inner">
                                    <div class="carousel-item active" data-bs-interval="10000">
                                        <img src="..." alt="..." class="d-block w-100 h_600 object-fit-cover">
                                    </div>
                                    <div class="carousel-item" data-bs-interval="2000">
                                        <img src="..." alt="..." class="d-block w-100 h_600 object-fit-cover">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="..." alt="..." class="d-block w-100 h_600 object-fit-cover">
                                    </div>
                                </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            </div>

Dark Variant

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

HTML Example

                            <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
                                <div class="carousel-indicators">
                                    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                                    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
                                    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
                                </div>
                                <div class="carousel-inner">
                                    <div class="carousel-item active" data-bs-interval="10000">
                                        <img src="..." alt="..." class="d-block w-100 h_400 object-fit-cover">
                                        <div class="carousel-caption d-none d-md-block">
                                            <p class="fs-5">First slide label</p>
                                            <p>Some representative placeholder content for the first slide.</p>
                                        </div>
                                    </div>
                                    <div class="carousel-item" data-bs-interval="2000">
                                        <img src="..." alt="..." class="d-block w-100 h_400 object-fit-cover">
                                        <div class="carousel-caption d-none d-md-block">
                                            <p class="fs-5">Second slide label</p>
                                            <p>Some representative placeholder content for the second slide.</p>
                                        </div>
                                    </div>
                                    <div class="carousel-item">
                                        <img src="..." alt="..." class="d-block w-100 h_400 object-fit-cover">
                                        <div class="carousel-caption d-none d-md-block">
                                            <p class="fs-5">Third slide label</p>
                                            <p>Some representative placeholder content for the third slide.</p>
                                        </div>
                                    </div>
                                </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            </div>

Sliders

Click on Elements to copy HTML

Override the default numbers of slides you need and the space between them using the data-slides-per-view and the data-space-between attributes.

Slider Highlights

Highlights

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, fugiat animi non tempora cumque adipisci.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora nam in animi ad culpa! Dolores perspiciatis beatae voluptas dolorem voluptatibus exercitationem, sit quo saepe iure eligendi, necessitatibus cum fugit ratione.

16 January 2023

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, fugiat animi non tempora cumque adipisci.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nisi animi sequi repudiandae alias nesciunt quis temporibus quisquam, sit quaerat unde ex eaque quos tenetur consequatur. Corporis deleniti harum rem!

16 January 2023

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, fugiat animi non tempora cumque adipisci.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias necessitatibus, officiis ut provident facere maiores, vel ad, earum voluptatibus vitae fuga harum unde alias sed? Non nobis tenetur quas id?

16 January 2023

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, fugiat animi non tempora cumque adipisci.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa soluta exercitationem necessitatibus autem temporibus commodi esse, sequi enim, numquam, laudantium consequuntur deserunt! Nam tenetur laboriosam non officia odit provident quas.

16 January 2023

Slider Simplified

15 JAN 2023 Event

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, fugiat animi non tempora cumque adipisci.

15 JAN 2023 Event

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, fugiat animi non tempora cumque adipisci.

15 JAN 2023

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, fugiat animi non tempora cumque adipisci.

15 JAN 2023 Event

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, fugiat animi non tempora cumque adipisci.

Slider Arrow Out and Arrow Primary

It's possible to wrap the canonical .swiper with an optional .swiper-container div and add the classes swiper_arrows_primary and swiper_arrows_out (to make them primary and move them out of container)

HTML Example

                                    <div class="swiper-container swiper_arrows_out swiper_arrows_primary">
                                        <div class="swiper j_xxx" data-slides-per-view="1" data-space-between="2">
                                            <div class="swiper-wrapper">

                                                <div class="swiper-slide">
                                                    <img src="..." alt="..." class="img-fluid object-fit-cover w-100 h_600">
                                                </div>
                                                <div class="swiper-slide">
                                                    <img src="..." alt="..." class="img-fluid object-fit-cover w-100 h_600">
                                                </div>
                                                <div class="swiper-slide">
                                                    <img src="..." alt="..." class="img-fluid object-fit-cover w-100 h_600">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="swiper-button-next"></div>
                                        <div class="swiper-button-prev"></div>
                                    </div>

Cards

Lorem Ipsum

Lorem Ipsum dolor sic amet

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Custom Overlay Card on Hover

(Apply the overlay_xxxx_hover needed)

HTML Example

                                <a href="#">
                                    <div class="card">
                                        <div class="card_image_hover_overlay overflow-hidden" data-gsap="zoomOnHoverInContainer">
                                            <img src="..." class="card-img-top object-fit-cover" alt="">
                                            <div class="card-img-overlay overlay_none_black d-flex flex-column justify-content-end">
                                                <div>
                                                    <h5 class="card-title text_white">Lorem Ipsum</h5>
                                                    <h6 class="card-subtitle mb-2 text_white">Lorem</h6>
                                                    <p class="card-text text_white">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                                    <p class="card-text text_white">Last updated 3 mins ago</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>

Featured

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur.

Go somewhere

2 days ago

HTML Example

                                <div class="card text-center">
                                    <div class="card-header">
                                        Featured
                                    </div>
                                    <div class="card-body">
                                        <p class="card-title fs-5">Lorem Ipsum</p>
                                        <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
                                        <a href="#" class="btn btn-primary rounded-pill stretched-link">Go somewhere</a>
                                    </div>
                                    <div class="card-footer text-muted">
                                        2 days ago
                                    </div>
                                </div>

Featured

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur.

2 days ago

HTML Example

                                <div class="card">
                                    <div class="card-header">
                                        Featured
                                    </div>
                                    <div class="card-body">
                                        <p class="card-title fs-5">Lorem</p>
                                        <p class="card-text">Lorem ipsum dolor sit amet consectetur.</p>
                                    </div>
                                    <div class="card-footer text-muted">
                                        2 days ago
                                    </div>
                                </div>

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

HTML Example

                                <div class="card">
                                    <div class="card-body">
                                        <p class="card-title fs-5">Card title</p>
                                        <p class="card-subtitle text-muted mb-2">Card subtitle</p>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <a href="#" class="card-link">Card link</a>
                                        <a href="#" class="card-link">Another link</a>
                                    </div>
                                </div>

Lorem

Lorem Ipsum

HTML Example

                                <a href="#">
                                    <div class="card rounded shadow-sm bg-whitecrs_pointer noselect d-flex flex-column justify-content-center align-items-center overflow-hidden min_h_370 px-4 py-5" data-gsap="zoomOnHoverInContainer">
                                        <img src="..." alt="" class="object-fit-cover img-fluid rounded-circle img-thumbnail shadow-sm mb-4 h_100 w_100">
                                        <div class="card-body text-center p-0">
                                            <h5 class="card-title text_main_color mb-3">Lorem</h5>
                                            <h6 class="card-subtitle text-uppercase text-muted mb-3"><i>Lorem Ipsum</i></h6>
                                            <span><i class="bi bi-arrow-right fs-4" aria-hidden="true"></i></span>
                                        </div>
                                    </div>
                                </a>

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

HTML Example

                                <div class="card" style="width: 18rem;">
                                    <img src="assets/img/blonde-woman-smiling.webp" class="card-img-top" alt="blonde-woman-smiling">
                                    <div class="card-body">
                                        <p class="card-title fs-5">Card title</p>
                                        <p class="card-text mb-2">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <a href="#" class="btn btn-primary rounded-pill stretched-link">Go somewhere</a>
                                    </div>
                                </div>

Cards with transparent backgrounds

Card with transparent Primary background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Secondary background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Gray background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Primary Light background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Primary Transparent background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Secondary Light background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Secondary Transparent background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Service colors

Card with transparent Success background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Info background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Warning background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Danger background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Light background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Dark background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Link background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

HTML Example

                                <div class="card border-0 bg_primary_transparent_5prc">
                                    <div class="card-body">
                                        <p class="card-title fs-5">Card with transparent primary background</p>
                                        <p class="card-subtitle text-muted mb-2">Card subtitle</p>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <a href="#" class="card-link">Card link</a>
                                    </div>
                                </div>

Cards Rounded

Cards with rounded-4 variant.

Lorem Ipsum

Lorem Ipsum dolor sic amet

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Custom Overlay Card on Hover

(Apply the overlay_xxxx_hover needed)

HTML Example

                                <a href="#">
                                    <div class="card rounded-4">
                                        <div class="card_image_hover_overlay overflow-hidden rounded-4" data-gsap="zoomOnHoverInContainer">
                                            <img src="..." class="card-img-top object-fit-cover" alt="">
                                            <div class="card-img-overlay overlay_none_black d-flex flex-column justify-content-end rounded-4">
                                                <div>
                                                    <p class="card-title fs-5 text_white">Lorem Ipsum</p>
                                                    <p class="fs-6 card-subtitle mb-2 text_white">Lorem</p>
                                                    <p class="card-text text_white">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                                    <p class="card-text text_white">Last updated 3 mins ago</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>

Featured

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur.

Go somewhere

2 days ago

HTML Example

                                <div class="card rounded-4 text-center">
                                    <div class="card-header">
                                        Featured
                                    </div>
                                    <div class="card-body">
                                        <p class="card-title fs-5">Lorem Ipsum</p>
                                        <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
                                        <a href="#" class="btn btn-primary rounded-pill stretched-link">Go somewhere</a>
                                    </div>
                                    <div class="card-footer text-muted">
                                        2 days ago
                                    </div>
                                </div>

Featured

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur.

2 days ago

HTML Example

                                <div class="card rounded-4">
                                    <div class="card-header">
                                        Featured
                                    </div>
                                    <div class="card-body">
                                        <p class="card-title fs-5">Lorem</p>
                                        <p class="card-text">Lorem ipsum dolor sit amet consectetur.</p>
                                    </div>
                                    <div class="card-footer text-muted">
                                        2 days ago
                                    </div>
                                </div>

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

HTML Example

                                <div class="card rounded-4">
                                    <div class="card-body">
                                        <p class="card-title fs-5">Card title</p>
                                        <p class="card-subtitle mb-2 text-muted">Card subtitle</p>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <a href="#" class="card-link">Card link</a>
                                        <a href="#" class="card-link">Another link</a>
                                    </div>
                                </div>

Lorem

Lorem Ipsum

HTML Example

                                <a href="#">
                                    <div class="card rounded-4 shadow-sm bg-white crs_pointer noselect d-flex flex-column justify-content-center align-items-center overflow-hidden min_h_370 px-4 py-5" data-gsap="zoomOnHoverInContainer">
                                        <img src="..." alt="" class="object-fit-cover img-fluid rounded-circle img-thumbnail shadow-sm mb-4 h_100 w_100">
                                        <div class="card-body text-center p-0">
                                            <p class="card-title fs-5 text_main_color mb-3">Lorem</p>
                                            <p class="card-subtitle text-uppercase text-muted mb-3"><i>Lorem Ipsum</i></p>
                                            <span><i class="bi bi-arrow-right fs-4" aria-hidden="true"></i></span>
                                        </div>
                                    </div>
                                </a>

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

HTML Example

                                <div class="card rounded-4" style="width: 18rem;">
                                    <img src="assets/img/blonde-woman-smiling.webp" class="card-img-top rounded-top-4" alt="blonde-woman-smiling">
                                    <div class="card-body">
                                        <p class="card-title fs-5">Card title</p>
                                        <p class="card-text mb-2">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <a href="#" class="btn btn-primary rounded-pill stretched-link">Go somewhere</a>
                                    </div>
                                </div>

Cards Rounded with transparent backgrounds

Card with transparent Primary background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Secondary background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Gray background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Primary Light background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Primary Transparent background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Secondary Light background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Secondary Transparent background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Service colors

Card with transparent Success background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Info background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Warning background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Danger background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Light background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Dark background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

Card with transparent Link background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

HTML Example

                                <div class="card border-0 rounded-4 bg_primary_transparent_5prc">
                                    <div class="card-body">
                                        <p class="card-title fs-5">Card with transparent primary background</p>
                                        <p class="card-subtitle text-muted mb-2">Card subtitle</p>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <a href="#" class="card-link">Card link</a>
                                    </div>
                                </div>

Cards Grid

Card with Primary background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Secondary background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Gray background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Primary Light background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Primary Transparent background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Secondary Light background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Secondary Transparent background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Service colors

Card with Success background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Info background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Warning background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Danger background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Light background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Dark background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Link background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

HTML Example

                    <div class="container">
                        <div class="row g-4">
                            <div class="col-xl-4">
                                <div class="card border-0 bg_primary_transparent_5prc h-100">
                                    <div class="card-body">
                                        <p class="card-title fs-5 fw-medium">Card with transparent primary background</p>
                                        <p class="card-subtitle text-muted mb-2">Card subtitle</p>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <a class="card-link underline_primary_hover crs_pointer">Card link</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-8">
                                <div class="card border-0 bg_primary_dark h-100">
                                    <div class="card-body">
                                        <p class="card-title fs-5 fw-medium text-white">Card with primary dark background</p>
                                        <p class="card-subtitle text-white mb-2">Card subtitle</p>
                                        <p class="card-text text-white">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <p><a class="card-link text-white underline_white_hover crs_pointer">Card link</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <div class="card border-0 bg_primary_dark h-100">
                                    <div class="card-body">
                                        <p class="card-title display-1 fw-medium text-white">Card with primary dark<br> background</p>
                                        <p class="card-subtitle text-white mb-2">Card subtitle</p>
                                        <p class="card-text text-white">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <p><a class="card-link text-white underline_white_hover crs_pointer">Card link</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <div class="card border-0 bg_primary_transparent_5prc h-100">
                                    <div class="card-body">
                                        <p class="card-title fs-2 fw-medium text_primary">Card with transparent primary background</p>
                                        <p class="card-subtitle text-muted mb-2">Card subtitle</p>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <a class="card-link underline_primary_hover crs_pointer">Card link</a>
                                    </div>
                                </div>
                            </div>          
                        </div>
                    </div>

Cards Grid Rounded

Card with Primary background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Secondary background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Gray background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Primary Light background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Primary Transparent background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Secondary Light background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Secondary Transparent background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Service colors

Card with Success background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Info background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Warning background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Danger background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Light background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Dark background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card with Link background

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

HTML Example

                    <div class="container">
                        <div class="row g-4">
                            <div class="col-xl-4">
                                <div class="card border-0 rounded-4 bg_primary_transparent_5prc h-100">
                                    <div class="card-body">
                                        <p class="card-title fs-5 fw-medium">Card with transparent primary background</p>
                                        <p class="card-subtitle text-muted mb-2">Card subtitle</p>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <a class="card-link underline_primary_hover crs_pointer">Card link</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-8">
                                <div class="card border-0 rounded-4 bg_primary_dark h-100">
                                    <div class="card-body">
                                        <p class="card-title fs-5 fw-medium text-white">Card with primary dark background</p>
                                        <p class="card-subtitle text-white mb-2">Card subtitle</p>
                                        <p class="card-text text-white">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <p><a class="card-link text-white underline_white_hover crs_pointer">Card link</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <div class="card border-0 rounded-4 bg_primary_dark h-100">
                                    <div class="card-body">
                                        <p class="card-title display-1 fw-medium text-white">Card with primary dark<br> background</p>
                                        <p class="card-subtitle text-white mb-2">Card subtitle</p>
                                        <p class="card-text text-white">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <p><a class="card-link text-white underline_white_hover crs_pointer">Card link</a></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6">
                                <div class="card border-0 rounded-4 bg_primary_transparent_5prc h-100">
                                    <div class="card-body">
                                        <p class="card-title fs-2 fw-medium text_primary">Card with transparent primary background</p>
                                        <p class="card-subtitle text-muted mb-2">Card subtitle</p>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <a class="card-link underline_primary_hover crs_pointer">Card link</a>
                                    </div>
                                </div>
                            </div>          
                        </div>
                    </div>

Cards with Links Rounded

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Service colors

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

HTML Example

                       <div class="container">
                            <div class="row g-4">
                                <div class="col-md-6 col-xl-4">
                                    <div class="card border-0 rounded-4 bg_primary h-100 p-3 p-xl-5">
                                        <div class="card-body p-0 text_white">
                                            <p class="card-title fs-4 fw-semibold mb-4">Lorem</p>
                                            <p class="card-text mb-4">Lorem ipsum</p>
                                            <div><a href="#" class="fw-semibold text_white underline_white_hover d-flex justify-content-between" aria-label="..." target="_blank" rel="noopener noreferrer"><span>...</span><i class="fs-3 bi bi-arrow-down-right"></i></a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

Boxes

Box Overlap Left

Images size: 960*650

Important: for the default breakpoint lg (992px), use the class: box_overlap_left and adjust all the code Bootstrap classes at lg.

For other breakpoints these classes are also available (adjust all the code classes with related Bootstrap classes):

box_overlap_left_xxl

box_overlap_left_xl

box_overlap_left_lg (identical to default)

box_overlap_left_md

box_overlap_left_sm

Use "col-lg-6 d-flex align-items-center overflow-hidden" data-gsap="zoomOnHoverInContainer" instead of "col-lg-6 d-flex align-items-center" for image if it's a link to add the animation effect.

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Et quisquam dolorem explicabo saepe commodi, placeat laboriosam pariatur, optio in, architecto ea veritatis? Et, eius quam vitae vero quas similique error sed iusto architecto temporibus fugit debitis saepe dignissimos animi explicabo.

HTML Example

                                <div class="container-fluid px-lg-0">
                                    <div class="row g-5 g-lg-0">
                                        <div class="col-lg-6 d-flex align-items-center">
                                            <div class="box_overlap_left bg-white shadow rounded z-2 p-4 p-lg-5" data-gsap="fromX" data-gsap-x="-100">
                                                <p class="fs-2 fw-semibold mb-4">Lorem Ipsum</p>
                                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 d-flex align-items-center overflow-hidden" data-gsap="zoomOnHoverInContainer">
                                            <img src="..." alt="..." class="object-fit-cover img-fluid w-100 h_lg_650 z-n1" loading="lazy" data-gsap="fromX" data-gsap-x="100" aria-hidden="true">
                                        </div>
                                    </div>
                                </div>

Box Overlap Left Rounded

Box Overlap Left with rounded-4 variant.

Lorem Ipsum

HTML Example

                                <div class="container-fluid px-lg-0">
                                    <div class="row g-5 g-lg-0">
                                        <div class="col-lg-6 d-flex align-items-center">
                                            <div class="box_overlap_left bg-white shadow rounded-4 z-2 p-4 p-lg-5" data-gsap="fromX" data-gsap-x="-100">
                                                <p class="fs-2 fw-semibold mb-4">Lorem Ipsum</p>
                                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 d-flex align-items-center overflow-hidden rounded-4" data-gsap="zoomOnHoverInContainer">
                                            <img src="..." alt="..." class="object-fit-cover img-fluid w-100 h_lg_650 z-n1 rounded-4" loading="lazy" data-gsap="fromX" data-gsap-x="100" aria-hidden="true">
                                        </div>
                                    </div>
                                </div>

Box Overlap Right

Images size: 960*650

Important: for the default breakpoint lg (992px), use the class: box_overlap_right and adjust all the code Bootstrap classes at lg.

For other breakpoints these classes are also available (adjust all the code classes with related Bootstrap classes):

box_overlap_right_xxl

box_overlap_right_xl

box_overlap_right_lg (identical to default)

box_overlap_right_md

box_overlap_right_sm

Remove the flex-column-reverse flex-lg-row to have image above in mobile views.

Use "col-lg-6 d-flex align-items-center overflow-hidden" data-gsap="zoomOnHoverInContainer" instead of "col-lg-6 d-flex align-items-center" for image if it's a link to add the animation effect.

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi nam illo sunt quidem unde nobis. Voluptate doloribus nostrum distinctio laborum, delectus, ipsa possimus debitis labore amet nesciunt ad vitae provident.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim sequi voluptatum amet quae velit excepturi vero aut culpa recusandae! Reiciendis quibusdam rerum architecto beatae? Nulla molestias praesentium soluta laudantium modi?

HTML Example

                                <div class="container-fluid px-lg-0">
                                    <div class="row flex-column-reverse flex-lg-row g-5 g-lg-0">
                                        <div class="col-lg-6 d-flex align-items-center overflow-hidden" data-gsap="zoomOnHoverInContainer">
                                            <img src="..." alt="..." class="img-fluid object-fit-cover w-100 h_lg_650 z-n1" loading="lazy" data-gsap="fromX" data-gsap-x="-100" aria-hidden="true">
                                        </div>
                                        <div class="col-lg-6 d-flex align-items-center">
                                            <div class="box_overlap_right bg-white shadow rounded z-2 p-4 p-lg-5" data-gsap="fromX" data-gsap-x="100">
                                                <div class="text_primary_dark_hover">
                                                    <p class="fs-2 fw-semibold text-uppercase text_primary mb-4">Lorem Ipsum</p>
                                                    <p>Lorem ipsum dolor sit.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

Box Overlap Right Rounded

Box Overlap Right with rounded-4 variant.

Lorem Ipsum

HTML Example

                                <div class="container-fluid px-lg-0">
                                    <div class="row flex-column-reverse flex-lg-row g-5 g-lg-0">
                                        <div class="col-lg-6 d-flex align-items-center overflow-hidden rounded-4" data-gsap="zoomOnHoverInContainer">
                                            <img src="..." alt="..." class="img-fluid object-fit-cover w-100 h_lg_650 z-n1 rounded-4" loading="lazy" data-gsap="fromX" data-gsap-x="-100" aria-hidden="true">
                                        </div>
                                        <div class="col-lg-6 d-flex align-items-center">
                                            <div class="box_overlap_right bg-white shadow rounded-4 z-2 p-4 p-lg-5" data-gsap="fromX" data-gsap-x="100">
                                                <div class="text_primary_dark_hover">
                                                    <p class="fs-2 fw-semibold text-uppercase text_primary mb-4">Lorem Ipsum</p>
                                                    <p>Lorem ipsum dolor sit.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

Box Gray

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
quibusdam voluptatibus quisquam veniam excepturi illo!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio hic minus mollitia sit perspiciatis libero.

HTML Example

                                <div class="container">
                                    <div class="row">
                                        <div class="col-12" data-gsap="fromClipHorizontal" data-gsap-start="top bottom" data-gsap-end="bottom center">
                                            <div class="h-100 w-100 bg_gray_silver_3 p-5">
                                                <p class="fs-2 fw-bold text_primary">Lorem ipsum dolor, sit amet consectetur adipisicing elit. <br> Assumenda fugit eligendi expedita optio autem cum?</p>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <p class="fst-italic text-start text-lg-end pt-4" data-gsap="fromOpacityScale" data-gsap-once="false">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam molestias sit sequi quos corporis facere eos animi? Labore, maiores vel?
                                            </p>
                                        </div>
                                    </div>
                                </div>

Box Gray Rounded

Box Gray with rounded-4 variant.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
quibusdam voluptatibus quisquam veniam excepturi illo!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio hic minus mollitia sit perspiciatis libero.

HTML Example

                                <div class="container">
                                    <div class="row">
                                        <div class="col-12" data-gsap="fromClipHorizontal" data-gsap-start="top bottom" data-gsap-end="bottom center">
                                            <div class="h-100 w-100 bg_gray_silver_3 rounded-4 p-5">
                                                <p class="fs-3 fw-bold text_primary ">Lorem ipsum dolor, sit amet consectetur adipisicing elit. <br> Assumenda fugit eligendi expedita optio autem cum?</p>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <p class="fst-italic text-start text-lg-end pt-4" data-gsap="fromOpacityScale" data-gsap-once="false">
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam molestias sit sequi quos corporis facere eos animi? Labore, maiores vel?
                                            </p>
                                        </div>
                                    </div>
                                </div>

Boxes Grid

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, libero deserunt odio dolorum eveniet suscipit.

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, libero deserunt odio dolorum eveniet suscipit.

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, libero deserunt odio dolorum eveniet suscipit.

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, libero deserunt odio dolorum eveniet suscipit.

HTML Example

                                    <div class="container">
                                        <div class="row g-4">
                                            <div class="col-xl-6" data-gsap="fromOpacityScale" data-gsap-start="top bottom" data-gsap-end="bottom bottom">
                                                <a href="#" title="Lorem Ipsum" class="text-reset">
                                                    <div class="bg_gray_silver_1 d-flex flex-column justify-content-center justify-content-md-start rounded-1 min_h_300 h-auto p-4">
                                                        <p class="fs-5 fw-semibold mb-4">Lorem Ipsum</p>
                                                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, libero deserunt odio dolorum eveniet suscipit.</p>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-xl-6" data-gsap="fromOpacityScale" data-gsap-start="top bottom" data-gsap-end="bottom bottom">
                                                <a href="#" title="Lorem Ipsum" class="text-reset">
                                                    <div class="bg_gray_silver_2 d-flex flex-column justify-content-center justify-content-md-start rounded-1 min_h_300 h-auto p-4">
                                                        <p class="fs-5 fw-semibold mb-4">Lorem Ipsum</p>
                                                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, libero deserunt odio dolorum eveniet suscipit.</p>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-xl-5" data-gsap="fromOpacityScale" data-gsap-start="top bottom" data-gsap-end="bottom bottom">
                                                <a href="#" title="Lorem Ipsum" class="text-reset">
                                                    <div class="bg_gray_silver_3 d-flex flex-column justify-content-center justify-content-md-start rounded-1 min_h_300 h-auto p-4">
                                                        <p class="fs-5 fw-semibold mb-4">Lorem Ipsum</p>
                                                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, libero deserunt odio dolorum eveniet suscipit.</p>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-xl-7" data-gsap="fromOpacityScale" data-gsap-start="top bottom" data-gsap-end="bottom bottom">
                                                <a href="#" title="Lorem Ipsum" class="text-reset">
                                                    <div class="bg_gray_silver_4 d-flex flex-column justify-content-center justify-content-md-start rounded-1 min_h_300 h-auto p-4">
                                                        <p class="fs-5 fw-semibold mb-4">Lorem Ipsum</p>
                                                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, libero deserunt odio dolorum eveniet suscipit.</p>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>               
                                    </div>

Boxes Grid Rounded

Boxes Grid with rounded-4 variant.

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, libero deserunt odio dolorum eveniet suscipit.

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, libero deserunt odio dolorum eveniet suscipit.

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, libero deserunt odio dolorum eveniet suscipit.

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, libero deserunt odio dolorum eveniet suscipit.

HTML Example

                                    <div class="container">
                                        <div class="row g-4">
                                            <div class="col-xl-6" data-gsap="fromOpacityScale" data-gsap-start="top bottom" data-gsap-end="bottom bottom">
                                                <a href="#" title="Lorem Ipsum" class="text-reset">
                                                    <div class="bg_gray_silver_1 d-flex flex-column justify-content-center justify-content-md-start rounded-4 min_h_300 h-auto p-4">
                                                        <p class="fs-5 fw-semibold mb-4">Lorem Ipsum</p>
                                                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, libero deserunt odio dolorum eveniet suscipit.</p>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-xl-6" data-gsap="fromOpacityScale" data-gsap-start="top bottom" data-gsap-end="bottom bottom">
                                                <a href="#" title="Lorem Ipsum" class="text-reset">
                                                    <div class="bg_gray_silver_2 d-flex flex-column justify-content-center justify-content-md-start rounded-4 min_h_300 h-auto p-4">
                                                        <p class="fs-5 fw-semibold mb-4">Lorem Ipsum</p>
                                                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, libero deserunt odio dolorum eveniet suscipit.</p>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-xl-5" data-gsap="fromOpacityScale" data-gsap-start="top bottom" data-gsap-end="bottom bottom">
                                                <a href="#" title="Lorem Ipsum" class="text-reset">
                                                    <div class="bg_gray_silver_3 d-flex flex-column justify-content-center justify-content-md-start rounded-4 min_h_300 h-auto p-4">
                                                        <p class="fs-5 fw-semibold mb-4">Lorem Ipsum</p>
                                                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, libero deserunt odio dolorum eveniet suscipit.</p>
                                                    </div>
                                                </a>
                                            </div>
                                            <div class="col-xl-7" data-gsap="fromOpacityScale" data-gsap-start="top bottom" data-gsap-end="bottom bottom">
                                                <a href="#" title="Lorem Ipsum" class="text-reset">
                                                    <div class="bg_gray_silver_4 d-flex flex-column justify-content-center justify-content-md-start rounded-4 min_h_300 h-auto p-4">
                                                        <p class="fs-5 fw-semibold mb-4">Lorem Ipsum</p>
                                                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, libero deserunt odio dolorum eveniet suscipit.</p>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>               
                                    </div>

Box Image Background

Imgage size: 400*400

Lorem Ipsum

HTML Example

                                        <!-- ANCHOR Box Image Background -->
                                        <div class="container">
                                            <div class="row g-4" data-gsap="fromClipOpacityScale">

                                                <div class="col-xl-4">
                                                    <div class="position-relative rounded overflow-hidden" data-gsap="zoomOnHoverInContainer">
                                                        <img src="assets/img/placeholder-400x400.webp" class="img-fluid object-fit-cover rounded w-100 h_400" loading="lazy" alt="placeholder-400x400">
                                                        <div class="position-absolute top-0 start-0 w-100 h-100 overlay_none_black rounded-1 d-flex flex-column justify-content-end flex-wrap p-4">
                                                            <a href="#" class="fs-4 text_white text_primary_hover fw-semibold text_shadow_black stretched-link">Lorem Ipsum</a>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-xl-4">
                                                    <div class="position-relative rounded overflow-hidden" data-gsap="zoomOnHoverInContainer">
                                                        <img src="assets/img/placeholder-400x400.webp" class="img-fluid object-fit-cover rounded w-100 h_400" loading="lazy" alt="placeholder-400x400">
                                                        <div class="position-absolute top-0 start-0 w-100 h-100 overlay_none_black rounded-1 d-flex flex-column justify-content-end flex-wrap p-4">
                                                            <a href="#" class="fs-4 text_white text_primary_hover fw-semibold text_shadow_black stretched-link">Lorem Ipsum</a>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-xl-4">
                                                    <div class="position-relative rounded overflow-hidden" data-gsap="zoomOnHoverInContainer">
                                                        <img src="assets/img/placeholder-400x400.webp" class="img-fluid object-fit-cover rounded w-100 h_400" loading="lazy" alt="placeholder-400x400">
                                                        <div class="position-absolute top-0 start-0 w-100 h-100 overlay_none_black rounded-1 d-flex flex-column justify-content-end flex-wrap p-4">
                                                            <a href="#" class="fs-4 text_white text_primary_hover fw-semibold text_shadow_black stretched-link">Lorem Ipsum</a>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

Box Image Background Rounded

Box Image Background with rounded-4 variant.

Lorem Ipsum

HTML Example

                                        <div class="container">
                                            <div class="row g-4" data-gsap="fromClipOpacityScale">

                                                <div class="col-xl-4">
                                                    <div class="position-relative rounded-4 overflow-hidden" data-gsap="zoomOnHoverInContainer">
                                                        <img src="assets/img/placeholder-400x400.webp" class="img-fluid object-fit-cover w-100 rounded-4 h_400" loading="lazy" alt="placeholder-400x400">
                                                        <div class="position-absolute top-0 start-0 w-100 h-100 overlay_none_black rounded-4 d-flex flex-column justify-content-end flex-wrap p-4">
                                                            <a href="#" class="fs-4 text_white text_primary_hover fw-semibold text_shadow_black stretched-link">Lorem Ipsum</a>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-xl-4">
                                                    <div class="position-relative rounded-4 overflow-hidden" data-gsap="zoomOnHoverInContainer">
                                                        <img src="assets/img/placeholder-400x400.webp" class="img-fluid object-fit-cover w-100 rounded-4 h_400" loading="lazy" alt="placeholder-400x400">
                                                        <div class="position-absolute top-0 start-0 w-100 h-100 overlay_none_black rounded-4 d-flex flex-column justify-content-end flex-wrap p-4">
                                                            <a href="#" class="fs-4 text_white text_primary_hover fw-semibold text_shadow_black stretched-link">Lorem Ipsum</a>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-xl-4">
                                                    <div class="position-relative rounded-4 overflow-hidden" data-gsap="zoomOnHoverInContainer">
                                                        <img src="assets/img/placeholder-400x400.webp" class="img-fluid object-fit-cover w-100 rounded-4 h_400" loading="lazy" alt="placeholder-400x400">
                                                        <div class="position-absolute top-0 start-0 w-100 h-100 overlay_none_black rounded-4 d-flex flex-column justify-content-end flex-wrap p-4">
                                                            <a href="#" class="fs-4 text_white text_primary_hover fw-semibold text_shadow_black stretched-link">Lorem Ipsum</a>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

Box Gray Icon Text

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus delectus eveniet sapiente aliquam, eligendi mollitia

HTML Example

                            <!-- ANCHOR Box Gray Icon Text -->
                            <div class="container">
                                <div class="row gy-4 gx-5">
                                    <div class="col-xl-6">
                                        <div class="bg_gray_silver_1 rounded p-3" data-gsap="fromOpacityScale">
                                            <div class="d-flex flex-column justify-content-center align-items-center flex-xl-row justify-content-xl-start gap-4">
                                                <div>
                                                    <img src="..." alt="..." aria-hidden="true" class="img-fluid min_w_80">
                                                </div>
                                                <div class="text-wrap text-center text-xl-start">
                                                    <p class="fw-medium">Lorem ipsum</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="bg_gray_silver_2 rounded p-3" data-gsap="fromOpacityScale">
                                            <div class="d-flex flex-column justify-content-center align-items-center flex-xl-row justify-content-xl-start gap-4">
                                                <div>
                                                    <img src="..." alt="..." aria-hidden="true" class="img-fluid min_w_80">
                                                </div>
                                                <div class="text-wrap text-center text-xl-start">
                                                    <p class="fw-medium">Lorem ipsum</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

Box Gray Icon Text Rounded

Box Gray Icon Text with rounded-4 variant.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus delectus eveniet sapiente aliquam, eligendi mollitia

HTML Example

                        <!-- ANCHOR Box Gray Icon Text Rounded -->
                        <div class="container">
                            <div class="row gy-4 gx-5">
                                <div class="col-xl-6">
                                    <div class="bg_gray_silver_1 rounded-4 p-3" data-gsap="fromOpacityScale">
                                        <div class="d-flex flex-column justify-content-center align-items-center flex-xl-row justify-content-xl-start gap-4">
                                            <div>
                                                <img src="..." alt="..." aria-hidden="true" class="img-fluid min_w_80">
                                            </div>
                                            <div class="text-wrap text-center text-xl-start">
                                                <p class="fw-medium">Lorem ipsum</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-6">
                                    <div class="bg_gray_silver_2 rounded-4 p-3" data-gsap="fromOpacityScale">
                                        <div class="d-flex flex-column justify-content-center align-items-center flex-xl-row justify-content-xl-start gap-4">
                                            <div>
                                                <img src="..." alt="..." aria-hidden="true" class="img-fluid min_w_80">
                                            </div>
                                            <div class="text-wrap text-center text-xl-start">
                                                <p class="fw-medium">Lorem ipsum</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

Box Rounded Overlay

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum recusandae ad veritatis tempora veniam sunt quos iusto quas perspiciatis saepe maxime commodi officia libero officiis, ex vitae quam rem iure.

Lorem Ipsum

HTML Example

                            <!-- ANCHOR Box Rounded Overlay -->
                            <div class="container">
                                <div class="row">

                                    <div class="col-12">

                                        <div class="row g-5">

                                            <div class="col-xl-6" data-gsap="fromOpacityScale">
                                                <div class="overlay_secondary_none d-flex flex-column justify-content-center justify-content-md-start rounded-4 min_h_420 h-auto p-5">
                                                    <p class="fs-5 fw-semibold mb-4">Lorem Ipsum</p>
                                                    <p class="fw-medium">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum recusandae ad veritatis tempora veniam sunt quos iusto quas perspiciatis saepe maxime commodi officia libero officiis, ex vitae quam rem iure.</p>
                                                </div>
                                            </div>

                                            <div class="col-xl-6" data-gsap="fromOpacityScale">
                                                <div class="overlay_gray_none d-flex flex-column justify-content-center justify-content-md-start rounded-4 min_h_420 h-auto p-5">
                                                    <div class="d-flex justify-content-between">
                                                        <p class="fs-5 fw-semibold mb-4">Lorem Ipsum</p>
                                                        <a href="#" target="_blank" rel="noopener noreferrer" data-disclaimer="external" class="text_black text_primary_hover"><i class="fs-3 bi bi-arrow-down-right"></i></a>
                                                    </div>
                                                    <p class="fw-medium">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum recusandae ad veritatis tempora veniam sunt quos iusto quas perspiciatis saepe maxime commodi officia libero officiis, ex vitae quam rem iure.</p>
                                                </div>
                                            </div>

                                            <div class="col-xl-4" data-gsap="fromOpacityScale">
                                                <div class="overlay_info_none d-flex flex-column justify-content-center justify-content-md-start rounded-4 min_h_420 h-auto p-5">
                                                    <div class="d-flex justify-content-between">
                                                        <p class="fs-5 fw-semibold mb-4">Lorem Ipsum</p>
                                                        <a href="#" target="_blank" rel="noopener noreferrer" data-disclaimer="external" class="text_black text_primary_hover"><i class="fs-3 bi bi-arrow-down-right"></i></a>
                                                    </div>
                                                    <p class="fw-medium">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum recusandae ad veritatis tempora veniam sunt quos iusto quas perspiciatis saepe maxime commodi officia libero officiis, ex vitae quam rem iure.</p>
                                                </div>
                                            </div>

                                            <div class="col-xl-4" data-gsap="fromOpacityScale">
                                                <div class="overlay_success_none d-flex flex-column justify-content-center justify-content-md-start rounded-4 min_h_420 h-auto p-5">
                                                    <div class="d-flex justify-content-between">
                                                        <p class="fs-5 fw-semibold mb-4">Lorem Ipsum</p>
                                                        <a href="#" target="_blank" rel="noopener noreferrer" data-disclaimer="external" class="text_black text_primary_hover"><i class="fs-3 bi bi-arrow-down-right"></i></a>
                                                    </div>
                                                    <p class="fw-medium">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum recusandae ad veritatis tempora veniam sunt quos iusto quas perspiciatis saepe maxime commodi officia libero officiis, ex vitae quam rem iure.</p>
                                                </div>
                                            </div>

                                            <div class="col-xl-4" data-gsap="fromOpacityScale">
                                                <div class="overlay_warning_none d-flex flex-column justify-content-center justify-content-md-start rounded-4 min_h_420 h-auto p-5">
                                                    <div class="d-flex justify-content-between">
                                                        <p class="fs-5 fw-semibold mb-4">Lorem Ipsum</p>
                                                        <a href="#" target="_blank" rel="noopener noreferrer" data-disclaimer="external" class="text_black text_primary_hover"><i class="fs-3 bi bi-arrow-down-right"></i></a>
                                                    </div>
                                                    <p class="fw-medium">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum recusandae ad veritatis tempora veniam sunt quos iusto quas perspiciatis saepe maxime commodi officia libero officiis, ex vitae quam rem iure.</p>
                                                </div>
                                            </div>

                                        </div>

                                    </div>

                                </div>
                            </div>

Speech Bubble

A speech bubble is a component for text with a speech-bubble decoration.

Create a div with class speech_bubble or speech_bubble_rounded

Add one of the available classes to apply the bottom triangle according to the bg_* color.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Primary

HTML Example

                                <div class="speech_bubble speech_bubble_primary bg_primary rounded-4 position-relative text_white text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Secondary

HTML Example

                                <div class="speech_bubble speech_bubble_secondary bg_secondary rounded-4 position-relative text_white text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Gray

HTML Example

                                <div class="speech_bubble speech_bubble_gray bg_gray rounded-4 position-relative text_black text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Primary Light

HTML Example

                                <div class="speech_bubble speech_bubble_primary_light bg_primary_light rounded-4 position-relative text_white text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Primary Transparent

HTML Example

                                <div class="speech_bubble speech_bubble_primary_transparent bg_primary_transparent rounded-4 position-relative text_black text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Secondary Light

HTML Example

                                <div class="speech_bubble speech_bubble_secondary_light bg_secondary_light rounded-4 position-relative text_white text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Secondary Transparent

HTML Example

                                <div class="speech_bubble speech_bubble_secondary_transparent bg_secondary_transparent rounded-4 position-relative text_black text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Service colors

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Success

HTML Example

                                <div class="speech_bubble speech_bubble_success bg_success rounded-4 position-relative text_white text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Info

HTML Example

                                <div class="speech_bubble speech_bubble_info bg_info rounded-4 position-relative text_black text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Warning

HTML Example

                                <div class="speech_bubble speech_bubble_warning bg_warning rounded-4 position-relative text_black text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Danger

HTML Example

                                <div class="speech_bubble speech_bubble_danger bg_danger rounded-4 position-relative text_white text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Light

HTML Example

                                <div class="speech_bubble speech_bubble_light bg_light rounded-4 position-relative text_black text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Dark

HTML Example

                                <div class="speech_bubble speech_bubble_dark bg_dark rounded-4 position-relative text_white text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Link

HTML Example

                                <div class="speech_bubble speech_bubble_link bg_link rounded-4 position-relative text_white text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Structural

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Black

HTML Example

                                <div class="speech_bubble speech_bubble_black bg_black rounded-4 position-relative text_white text-center p-3 p-xl-5 shadow" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

White

HTML Example

                                <div class="speech_bubble speech_bubble_white bg_white rounded-4 position-relative text_black text-center p-3 p-xl-5 shadow" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Speech Bubble Rounded

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Primary

HTML Example

                                <div class="speech_bubble_rounded speech_bubble_primary bg_primary rounded-pill position-relative text_white text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Secondary

HTML Example

                                <div class="speech_bubble_rounded speech_bubble_secondary bg_secondary rounded-pill position-relative text_white text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Gray

HTML Example

                                <div class="speech_bubble_rounded speech_bubble_gray bg_gray rounded-pill position-relative text_black text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Primary Light

HTML Example

                                <div class="speech_bubble_rounded speech_bubble_primary_light bg_primary_light rounded-pill position-relative text_white text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Primary Transparent

HTML Example

                                <div class="speech_bubble_rounded speech_bubble_primary_transparent bg_primary_transparent rounded-pill position-relative text_black text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Secondary Light

HTML Example

                                <div class="speech_bubble_rounded speech_bubble_secondary_light bg_secondary_light rounded-pill position-relative text_white text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Secondary Transparent

HTML Example

                                <div class="speech_bubble_rounded speech_bubble_secondary_transparent bg_secondary_transparent rounded-pill position-relative text_black text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Service colors

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Success

HTML Example

                                <div class="speech_bubble_rounded speech_bubble_success bg_success rounded-pill position-relative text_white text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Info

HTML Example

                                <div class="speech_bubble_rounded speech_bubble_info bg_info rounded-pill position-relative text_black text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Warning

HTML Example

                                <div class="speech_bubble_rounded speech_bubble_warning bg_warning rounded-pill position-relative text_black text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Danger

HTML Example

                                <div class="speech_bubble_rounded speech_bubble_danger bg_danger rounded-pill position-relative text_white text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Light

HTML Example

                                <div class="speech_bubble_rounded speech_bubble_light bg_light rounded-pill position-relative text_black text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Dark

HTML Example

                                <div class="speech_bubble_rounded speech_bubble_dark bg_dark rounded-pill position-relative text_white text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Link

HTML Example

                                <div class="speech_bubble_rounded speech_bubble_link bg_link rounded-pill position-relative text_white text-center p-3 p-xl-5" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Structural

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

Black

HTML Example

                                <div class="speech_bubble_rounded speech_bubble_black bg_black rounded-pill position-relative text_white text-center p-3 p-xl-5 shadow" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente voluptate ullam aspernatur, quaerat pariatur temporibus culpa earum nostrum architecto modi asperiores.

White

HTML Example

                                <div class="speech_bubble_rounded speech_bubble_white bg_white rounded-pill position-relative text_black text-center p-3 p-xl-5 shadow" data-gsap="fromOpacityScale">
                                    <p class="fs-5 fw-medium">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                </div>

Available Classes

speech_bubble_primary speech_bubble_secondary speech_bubble_gray speech_bubble_primary_light speech_bubble_primary_transparent speech_bubble_secondary_light

speech_bubble_secondary_transparent speech_bubble_success speech_bubble_info speech_bubble_warning speech_bubble_danger speech_bubble_light

speech_bubble_dark speech_bubble_link speech_bubble_black speech_bubble_white

speech_bubble_gray speech_bubble_gray_silver_1 speech_bubble_gray_silver_2 speech_bubble_gray_silver_3 speech_bubble_gray_silver_4

Images