Style GuideLast Updated: 7/10/24More Reference Bootstrap Docs

Colors

Primary

#a1c213 .bg-primary or .bg-green

#7cd2be .bg-secondary or .bg-teal

#090a0b .bg-tertiary or .bg-gray-dark

#fafafa .bg-gray

#00b5ff .bg-sky

#05668e .bg-blue

#8fae3d .bg-green-dark

#686868 .bg-charcoal

<div class="bg-green">sample</div>
<div class="bg-teal">sample</div>
<div class="bg-gray-dark">sample</div>
<div class="bg-gray">sample</div>
<div class="bg-sky">sample</div>
<div class="bg-blue">sample</div>
<div class="bg-green-dark">sample</div>
<div class="bg-charcoal">sample</div>

Grays

.bg-gray-100

.bg-gray-200

.bg-gray-300

.bg-gray-400

.bg-gray-500

.bg-gray-600

.bg-gray-700

.bg-gray-800


    <div class="bg-gray-100">sample</div>
    <div class="bg-gray-200">sample</div>
    <div class="bg-gray-300">sample</div>
    <div class="bg-gray-400">sample</div>
    <div class="bg-gray-500">sample</div>
    <div class="bg-gray-600">sample</div>
    <div class="bg-gray-700">sample</div>
    <div class="bg-gray-800">sample</div>

Headings

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5

This is a Heading 6


            <h1>sample</h1>
            <h2>sample</h2>
            <h3>sample</h3>
            <h4>sample</h4>
            <h5>sample</h5>
            <h6>sample</h6>


            <p class="h1">sample</p>
            <p class="h2">sample</p>
            <p class="h3">sample</p>
            <p class="h4">sample</p>
            <p class="h5">sample</p>
            <p class="h6">sample</p>

This is a Heading 1

This is a Heading 2

This is a Heading 3

This is a Heading 4

This is a Heading 5

This is a Heading 6


            <h1 class="underline">sample</h1>
            <h2 class="underline">sample</h2>
            <h3 class="underline">sample</h3>
            <h4 class="underline">sample</h4>
            <h5 class="underline">sample</h5>
            <h6 class="underline">sample</h6>

When you need a heading to stand out, consider using a display heading— example class name .display-1

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6


            <p class="display-1">sample</p>
            <p class="display-2">sample</p>
            <p class="display-3">sample</p>
            <p class="display-4">sample</p>
            <p class="display-5">sample</p>
            <p class="display-6">sample</p>

eyebrow text .eyebrow

Fortuna semper mecum est, et magni eventus meam viam sequuntur.


<h2><span class="text-green-dark">Fortuna semper</span> mecum est, et <span class="underline">magni eventus meam</span> viam sequuntur.</h2>

<p class="eyebrow">eyebrow text .eyebrow</p>

<h2>Fortuna semper mecum est, et magni <span class="underline">eventus meam</span> viam sequuntur.</h2>

Typography

Inter

font-family: "Inter", sans;

https://fonts.google.com/specimen/Inter

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

Text Color Helpers

.text-sans

.text-serif

.text-bold

.underline

.text-white

<p class="text-san">.text-sans</p>
<p class="text-serif">.text-serif</p>
<p class="text-bold">.text-bold</p>
<p class="underline">.underline</p>
<p class="text-white">.text-white</p>

Font Size Helpers

.fs-1

* font-size: 2.5rem (40px)

.fs-2

*font-size: 2rem (32px)

.fs-3

*font-size: 1.75rem (28px)

.fs-4

*font-size: 1.5rem (24px)

.fs-5

*font-size: 1.25rem (20px)

.fs-6

*font-size: 1rem (16px)

.fs-7

*font-size: 0.875rem (14px)

<p class="fs-1">Sample</p>
<p class="fs-2">Sample</p>
<p class="fs-3">Sample</p>
<p class="fs-4">Sample</p>
<p class="fs-5">Sample</p>
<p class="fs-6">Sample</p>
<p class="fs-7">Sample</p>

Text Weight Helpers

Bold text.

.fw-bold

Bolder weight text (relative to the parent element).

.fw-bolder

Semibold weight text.

.fw-semibold

Medium weight text.

.fw-medium

Normal weight text.

.fw-normal

Light weight text.

.fw-light

Lighter weight text (relative to the parent element).

.fw-lighter

Italic text.

.fst-italic

Text with normal font style

.fw-normal

<p class="fw-bold">Sample</p>
<p class="fw-bolder">Sample</p>           
<p class="fw-semibold">Sample</p>         
<p class="fw-medium">Sample</p>             
<p class="fw-normal">Sample</p>              
<p class="fw-light">Sample</p>   
<p class="fw-lighter">Sample</p>           
<p class="fst-italic">Sample</p>              
<p class="fst-normal">Sample</p>

Body Styles

Inline text elements

Styling for common inline HTML5 elements.

You can use the mark tag to highlight text.

This line of text will render as underlined

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

This line rendered as bold text.

This line rendered as italicized text.

This line rendered as as a link

Paragraphs

Fortuna semper mecum est, et magni eventus meam viam sequuntur. Bonae fortunae sunt mihi propinquae, et optime facta mihi adveniunt. Gratias ago fortunae quod optima mecum sunt. Bona indoles mecum venit, quae magnos honores mihi adferunt. Body Link Magna res mihi occurrunt, quae gloriam mihi addictam habent. Laetatus sum de bonis quae mei causa veniunt, quia certus sum illis mecum successum venire.

Responsive image

<img src="https://placehold.co/600x400?text=.img-fluid" alt="sample" width="750" height="306"
                            class="img-fluid">

List

Lorem
Ipsum
Dolor
Sit
Amet

<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Sit</li>
<li>Amet</li>
</ul>

List Custom

Lorem
Ipsum
Dolor
Sit
Amet

<ul class="custom-bullets">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Sit</li>
<li>Amet</li>
</ul>

List Number

Lorem
Ipsum
Dolor
Sit
Amet

<ol>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Sit</li>
<li>Amet</li>
</ol>

Buttons

Button Types

Link button

<a href="#" class="btn btn-primary">Link button</a>
<button type="button" class="btn btn-primary">Standard button</button>
<input class="btn btn-primary" type="button" value="Input button">

Button Primary

btn-sm btn btn-lg

<a href="#" class="btn btn-primary btn-sm">btn-sm</a>
<a href="#" class="btn btn-primary"> btn</a>
<a href="#" class="btn btn-primary btn-lg">btn-lg</a>

Button Primary with arrow

btn-sm btn btn-lg

<a href="#" class="btn btn-primary btn-sm"><i class="bi bi-arrow-right-short me-1"></i>btn-sm</a>
<a href="#" class="btn btn-primary"><i class="bi bi-arrow-right-short me-1"></i> btn</a>
<a href="#" class="btn btn-primary btn-lg"><i class="bi bi-arrow-right-short me-1"></i>btn-lg</a>

Button Secondary

btn-sm btn btn-lg

<a href="#" class="btn btn-secondary btn-sm">btn-sm</a>
<a href="#" class="btn btn-secondary">btn</a>
<a href="#" class="btn btn-secondary btn-lg">btn-lg</a>

Button Secondary with arrow right

btn-sm btn btn-lg

<a href="#" class="btn btn-secondary btn-sm"><i class="bi bi-arrow-right-short me-1"></i>btn-sm</a>
<a href="#" class="btn btn-secondary"><i class="bi bi-arrow-right-short me-1"></i> Sample</a>
<a href="#" class="btn btn-secondary btn-lg"><i class="bi bi-arrow-right-short me-1"></i>btn-lg</a>

Button with arrow

Small button Standard button Large button

<a href="#" class="btn btn-primary btn-sm">Small button <i class="bi bi-arrow-right-short"></i></a>
<a href="#" class="btn btn-primary">Standard button <i class="bi bi-arrow-right-short"></i></a>
<a href="#" class="btn btn-primary btn-lg">Large button <i class="bi bi-arrow-right-short"></i></a>

Button with icon samples

btn-sm btn btn-lg

<a href="#" class="btn btn-primary btn-sm"><i class="bi bi-globe me-1"></i>Sample</a>
<a href="#" class="btn btn-primary"><i class="bi bi-geo-alt-fill me-1"></i>Sample</a>
<a href="#" class="btn btn-primary btn-lg"><i class="bi bi-person-fill me-1"></i>Sample</a>

Get more icons at https://icons.getbootstrap.com

Button Outline

Small button Standard button Large button

<a href="#" class="btn btn-outline btn-sm">Small button</a>
<a href="#" class="btn btn-outline">Standard button</a>
<a href="#" class="btn btn-outline btn-lg">Large button</a>

Button Outline with arrow

Small button Standard button Large button

<a href="#" class="btn btn-outline btn-sm">Small button <i class="bi bi-arrow-right-short"></i></a>
<a href="#" class="btn btn-outline">Standard button <i class="bi bi-arrow-right-short"></i></a>
<a href="#" class="btn btn-outline btn-lg">Large button <i class="bi bi-arrow-right-short"></i></a>

Button ghost with arrow

Small button Standard button Large button

<a href="#" class="btn btn-ghost btn-sm">Small button <i class="bi bi-arrow-right-short"></i></a>
<a href="#" class="btn btn-ghost">Standard button <i class="bi bi-arrow-right-short"></i></a>
<a href="#" class="btn btn-ghost btn-lg">Large button <i class="bi bi-arrow-right-short"></i></a>

Icons

UI Icons

View more UI Icons used by Bootstrap Icons v.11.3

Examples

<i class="bi bi-arrow-right-short"></i>
<i class="bi bi-arrow-right"></i>
<i class="bi bi-geo-alt-fill"></i>
<i class="bi bi-file-earmark"></i>

Tables - Responsive

Table

Options	Early Rate 9/20	Rate from 9/21 - 11/13
Conference Rate	$1,350	$1,495
Master Class Rate (Can choose up to 2)	$125	$155
Speaker Rate	$395	$595

<table class="table table-bordered mb-5">
    <thead>
        <tr>
            <td class="bg-green p-4 fw-bold text-left align-middle w-25">Options</td>
            <td class="bg-green fw-bold text-left align-middle p-4">Early Rate 9/20</td>
            <td class="bg-green fw-bold text-left align-middle p-4">Rate from 9/21 - 11/13</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="p-4 bg-teal bg-sm-white" data-label="Options">Conference Rate</td>
            <td class="p-4" data-label="Early Rate 9/20">$1,350</td>
            <td class="p-4" data-label="Rate from 9/21 - 11/13">$1,495</td>
        </tr>
        <tr>
            <td class="p-4 bg-teal bg-sm-white" data-label="Options">Master Class Rate (Can choose up to 2)</td>
            <td class="p-4" data-label="Early Rate 9/20">$125</td>
            <td class="p-4" data-label="Rate from 9/21 - 11/13">$155</td>
        </tr>
        <tr>
            <td class="p-4 bg-teal bg-sm-white" data-label="Options">Speaker Rate</td>
            <td class="p-4" data-label="Early Rate 9/20">$395</td>
            <td class="p-4" data-label="Rate from 9/21 - 11/13">$595</td>
        </tr>
    </tbody>
</table>

Responsive Tables

Options	Early Rate 9/20	Rate from 9/21 - 11/13
Conference Rate	$1,350	$1,495
Master Class Rate (Can choose up to 2)	$125	$155
Speaker Rate	$395	$595

<table class="table table-bordered responsive-table mb-5">
    <thead>
        <tr>
            <td class="bg-gray-800 text-white p-4 fw-bold text-left align-middle w-25">Options</td>
            <td class="bg-teal fw-bold text-left align-middle p-4">Early Rate 9/20</td>
            <td class="bg-teal fw-bold text-left align-middle p-4">Rate from 9/21 - 11/13</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="p-4 bg-teal bg-sm-white" data-label="Options">Conference Rate</td>
            <td class="p-4" data-label="Early Rate 9/20">$1,350</td>
            <td class="p-4" data-label="Rate from 9/21 - 11/13">$1,495</td>
        </tr>
        <tr>
            <td class="p-4 bg-teal bg-sm-white" data-label="Options">Master Class Rate (Can choose up to 2)</td>
            <td class="p-4" data-label="Early Rate 9/20">$125</td>
            <td class="p-4" data-label="Rate from 9/21 - 11/13">$155</td>
        </tr>
        <tr>
            <td class="p-4 bg-teal bg-sm-white" data-label="Options">Speaker Rate</td>
            <td class="p-4" data-label="Early Rate 9/20">$395</td>
            <td class="p-4" data-label="Rate from 9/21 - 11/13">$595</td>
        </tr>
    </tbody>
</table>

Helpers: Spacing

Spacing notation guide

Add class name {property} + {sides} + {size}

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
e - (end) for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - set the margin or padding to .25rem(4px)
2 - set the margin or padding to .5rem(8px)
3 - set the margin or padding to 1rem (16px)
4 - set the margin or padding to 1.5rem(24px)
5 - set the margin or padding to 3rem (48px)

More spacing & margin docs

Spacing Examples

mt-3 = Margin top of 1rem (16px)

<div class="bg-gray mt-3 p-2">mt-3 = Margin top of 1rem (16px)</div>

p-5 = Padding 3rem (48px)

<div class="bg-gray p-6">p-5 = Padding 3rem (48px)</div>

mx-4 = Margin left and right of 1.5rem (24px)

<div class="bg-gray mx-4">mx-4 = Margin left and right of 1.5rem (24px)</div>

ps-4 = Padding start (left) of 1.5rem (24px)

<div class="bg-gray ps-4">ps-4 = Padding start (left) of 1.5rem (24px)</div>

me-4 = Margin end (right) of 1.5rem (24px)

<div class="bg-gray me-4">me-4 = Margin end (right) of 1.5rem (24px)</div>

py-4 = Padding top and bottom of 1.5rem (24px)

<div class="bg-gray border py-4">py-4 = Padding top and bottom of 1.5rem (24px)</div>

.order-lg-2 = Order 2 on large screens

Left div

<div class="bg-gray border py-4">py-4 = Padding top and bottom of 1.5rem (24px)</div>

Opacity Examples

.opacity-0

.opacity-25

.opacity-50

.opacity-75

.opacity-100

<div class="bg-gray opacity-0 border"></div>
<div class="bg-gray opacity-0 border"></div>
<div class="bg-gray opacity-25 border"></div>
<div class="bg-gray opacity-50 border"></div>
<div class="bg-gray opacity-75 border"></div>
<div class="bg-gray opacity-100 border"></div>

Rounded Examples

<img src="https://placehold.co/75x75" class="rounded" alt="sample">
<img src="https://placehold.co/75x75" class="rounded-top" alt="sample">
<img src="https://placehold.co/75x75" class="rounded-end" alt="sample">
<img src="https://placehold.co/75x75" class="rounded-bottom" alt="sample">
<img src="https://placehold.co/75x75" class="rounded-start" alt="sample">
<img src="https://placehold.co/75x75" class="rounded-circle" alt="sample">
<img src="https://placehold.co/155x75" class="rounded-pill" alt="sample">

<img src="https://placehold.co/75x75" class="rounded-bottom-1" alt="sample">
<img src="https://placehold.co/75x75" class="rounded-start-2" alt="sample">
<img src="https://placehold.co/75x75" class="rounded-end-circle" alt="sample">
<img src="https://placehold.co/75x75" class="rounded-start-pill" alt="sample">
<img src="https://placehold.co/75x75" class="rounded-5 rounded-top-0" alt="sample">

UI Patterns

.bg-gradient

<div class="d-flex bg-gradient p-5">.bg-gradient</div>

.border-gradient-top

<div class="d-flex bg-gray p-5 border-gradient-top">.border-gradient-top</div>

.border-gradient-right

<div class="d-flex bg-gray p-5 border-gradient-right">.border-gradient-right</div>

.border-gradient-bottom

<div class="d-flex bg-gray p-5 border-gradient-bottom">.border-gradient-bottom</div>

.border-gradient-left

<div class="d-flex bg-gray p-5 border-gradient-left">.border-gradient-left</div>

.border-gradient-top-short

<div class="d-flex bg-gray p-5 border-gradient-top-short">.border-gradient-top-short</div>

.border-gradient-right-short

<div class="d-flex bg-gray p-5 border-gradient-right-short">.border-gradient-right-short</div>

.border-gradient-bottom-short

<div class="d-flex bg-gray p-5 border-gradient-bottom-short">.border-gradient-bottom-short</div>

.border-gradient-left-short

<div class="d-flex bg-gray p-5 border-gradient-left-short">.border-gradient-left-short</div>

gSight an Experience Analytics Platform

Greystone offers expert consulting services to enhance your hospital's digital presence, from website evaluation to strategic overhauls, ensuring your digital tools meet modern healthcare demands.

Consulting services are provided to help hospitals and health systems assess their current website, digital footprint and digital strategy and then to strategically plan and revamp their websites to better meet user needs. Greystone can help manage your MarTech stack and the transition to more contemporary tools.

Digital Strategic Consulting
Website Assessments & Analytics
Digital Infrastructure Planning
Vendor & Platform Selection Process
Healthcare Call Center Consulting

<div class="box-img-content img-left">
    <div class="box-img">
        <img src="https://placehold.co/600x600/png" alt="Descriptive Alt Text" />
    </div>
    <div class="box-content content-right bg-gray-light border-gradient-left-short">
        <div class="row">
            <div class="col">
                <h2 class="mb-3">
                <span class="underline">gSight</span> an Experience Analytics Platform
                </h2>
                <p class="lead">
                    Greystone offers expert consulting services to enhance
                    your hospital's digital presence, from website
                    evaluation to strategic overhauls, ensuring your digital
                    tools meet modern healthcare demands.
                </p>
            </div>
            </div>
                <div class="row">
                    <div class="col-md-6">
                                    Consulting services are provided to help hospitals and
                                    health systems assess their current website, digital
                                    footprint and digital strategy and then to strategically
                                    plan and revamp their websites to better meet user needs.
                                    Greystone can help manage your MarTech stack and the
                                    transition to more contemporary tools.
                </div>
                    <div class="col-md-6">
                <ul class="custom-bullets">
                    <li>Digital Strategic Consulting</li>
                    <li>Website Assessments &amp; Analytics</li>
                    <li>Digital Infrastructure Planning</li>
                    <li>Vendor &amp; Platform Selection Process</li>
                    <li>Healthcare Call Center Consulting</li>
                </ul>
            </div>
        </div>
    </div>
</div>

gSight an Experience Analytics Platform

Greystone offers expert consulting services to enhance your hospital's digital presence, from website evaluation to strategic overhauls, ensuring your digital tools meet modern healthcare demands.

Digital Strategic Consulting
Website Assessments & Analytics
Digital Infrastructure Planning
Vendor & Platform Selection Process
Healthcare Call Center Consulting

<div class="box-img-content img-right">
        <div class="box-img">
            <img src="https://placehold.co/600x600/png" alt="Descriptive Alt Text" />
        </div>
        <div class="box-content content-right bg-gray-light border-gradient-left-short">
            <div class="row">
                <div class="col">
                    <h2 class="mb-3">
                    <span class="underline">gSight</span> an Experience Analytics Platform
                    </h2>
                    <p class="lead">
                        Greystone offers expert consulting services to enhance
                        your hospital's digital presence, from website
                        evaluation to strategic overhauls, ensuring your digital
                        tools meet modern healthcare demands.
                    </p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                        Consulting services are provided to help hospitals and
                        health systems assess their current website, digital
                        footprint and digital strategy and then to strategically
                        plan and revamp their websites to better meet user needs.
                        Greystone can help manage your MarTech stack and the
                        transition to more contemporary tools.
            </div>
            <div class="col-md-6">
                <ul class="custom-bullets">
                    <li>Digital Strategic Consulting</li>
                    <li>Website Assessments &amp; Analytics</li>
                    <li>Digital Infrastructure Planning</li>
                    <li>Vendor &amp; Platform Selection Process</li>
                    <li>Healthcare Call Center Consulting</li>
                </ul>
            </div>
            </div>
        </div>
</div>

Exclusive Conference Information: Be the first to know about upcoming events and get early bird access.
Industry Insights and Blogs: Get expert opinions, trends, and tips straight to your inbox.
Webinars and Digital Marketing Surveys: Participate in our webinars and surveys to stay ahead in digital marketing.

Possible MailChimp Form


<div class="accordion accordion-flush accordion-form bg-gradient-alt my-5 glow-on-hover" id="formNewsletter">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                <div class="d-flex flex-column flex-lg-row w-100">
                    <div class="justify-content-center">
                        <p class="eyebrow">Stay Informed</p>
                        <h2 class="mb-lg-0">Join our mailing list</h2>
                    </div>
                    <div class="btn btn-secondary btn-full-mobile my-auto ms-auto btn-open-box">Sign Up Now !</div>
                    <div class="btn btn-white btn-full-mobile my-auto ms-auto btn-close-box">close <i class="bi bi-x-lg ms-1"></i>
                    </div>
                </div>
            </button>
        </h2>
        <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#formNewsletter">
            <div class="accordion-body">
                <div class="row">
                    <div class="col-lg-6"><p>Content Left</p></div>
                    <div class="col-lg-6"><p>Content Right</p></div>
                </div>
        </div>
        </div>
    </div>
</div>

Heading Sample

Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo

INemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.


<div class="row align-items-center">
    <div class="col-lg-6"><img src="https://placehold.co/628x628?text=Image+left" alt="sample" width="628" height="628" class="img-fluid">
</div>
    <div class="col-lg-6">
        <h2 class="mb-3">Heading <span class="underline">Sample</span></h2>
            <p class="lead">Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</p>
            <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui rationevoluptatem sequi nesciunt.</p>
    </div>
</div>

Heading Sample

Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo

INemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

<div class="row align-items-center">
    <div class="col-lg-6 order-lg-2"><img src="https://placehold.co/628x628?text=column with class name .order-lg-2" alt="sample" width="628" height="628" class="img-fluid mb-3 mb-lg-0"></div>
    <div class="col-lg-6">
        <h2 class="mb-3">Heading <span class="underline">Sample</span></h2>
        <p class="lead">Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</p>
        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
    </div>
</div>

<div class="row">
    <div class="col-sm-6 p-0">
        <a href="#" class="d-block" aria-label="link sample">
            <img src="https://placehold.co/600x400?text=Split+image+left" class="img-full" alt="Sample image" />
        </a>
    </div>
    <div class="col-sm-6 order-first order-sm-last p-0">
        <a href="#" class="d-block" aria-label="link sample">
        <img src="https://placehold.co/600x400?text=Split+image+right" class="img-full" alt="Sample image" />
    </a>
    </div>
</div>

An Experience Analytics Platform

Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Sample Button

<div class="row">
    <div class="col-sm-6 p-0">
        <a href="#" class="d-block" aria-label="link sample">
            <img src="https://placehold.co/600x400?text=Split+image+left" class="img-full" alt="Sample image" />
        </a>
    </div>
    <div class="col-sm-6 order-first order-sm-last p-0">
        <a href="#" class="d-block" aria-label="link sample">
        <img src="https://placehold.co/600x400?text=Split+image+right" class="img-full" alt="Sample image" />
    </a>
    </div>
</div>

An Experience Analytics Platform

Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Sample Button

<div class="row">
    <div class="col-lg-6 col-content">
        <div class="hero-content me-lg-4"><br /><br /><br />
            <h1>An <span class="underline">Experience Analytics</span> Platform</h1>
            <p class="lead">Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p><br />
            <a href="#" class="btn btn-lg btn-primary btn-full-mobile">Sample Button <i class="bi bi-arrow-right-short"></i></a><br /> <br />
            <br /><br /><br />
        </div>
    </div>
    <div class="col-lg-6 col-image extend-right">
        <div class="bg-image" style="background-image: url('https://via.placeholder.com/600x600?text=Image+extends+right');"></div>
    </div>
</div>

Counters

70%

Sample Counter

100K

Sample Counter

56%

Sample Counter

<div class="stat-card d-flex flex-column my-4">
    <div class="stat-card-number">
        <span class="stat-num h2" data-count="70">70</span><span class="stat-symbol h2">%</span>
    </div>
    <div class="stat-card-title fs-7">Sample Counter</div>
</div>

12 Column format

col-lg-1

col-lg-2

col-lg-3

col-lg-4

col-lg-5

col-lg-7

col-lg-6

col-lg-8

col-lg-4

col-lg-9

col-lg-3

col-lg-10

col-lg-2

col-lg-12