NEXT Commerce Design System

The frontend framework for apps that integrate with the NEXT platform.

The NEXT Commerce Design System is the frontend framework for apps that integrate with the NEXT platform.

Quick start

Include CSS in your app html document <head>.

<link href="https://cdn.jsdelivr.net/gh/NextCommerceCo/app-ui-framework@latest/dist/css/next-app-ui.min.css" rel="stylesheet" crossorigin="anonymous">

Include Javascript in your app html document just before the </body>.

<script src="https://cdn.jsdelivr.net/gh/NextCommerceCo/app-ui-framework@latest/dist/js/next-app-ui.min.js"></script>

Versioning

Pin your app to a release version by specifying in the CDN url such as @0.1.4.

CDN links

As a reference, here are our primary CDN links.

CDN Links

Description	URL
CSS	`https://cdn.jsdelivr.net/gh/NextCommerceCo/app-ui-framework@latest/dist/css/next-app-ui.min.css`
JS	`https://cdn.jsdelivr.net/gh/NextCommerceCo/app-ui-framework@latest/dist/js/next-app-ui.min.js`

Base Layout

Below is an example base layout to get started with the NEXT Commerce Design System.

Copy the html below into a new layout.html in your project and you're well on your way.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>App Base Layout</title>
    <link href="https://cdn.jsdelivr.net/gh/NextCommerceCo/app-ui-framework@latest/dist/css/next-app-ui.min.css"
        rel="stylesheet" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="row align-items-center my-4">
            <div class="col">
                <div class="d-flex align-items-center">
                    <div>
                        <h1 class="header-title h2">Widgets</h1>
                    </div>
                </div>
            </div>
            <div class="col-auto">
                <a href="#" class="btn btn-primary">New Widget</a>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <div>
                    <h4 class="card-header-title">Campaigns</h4>
                </div>
            </div>
            <div class="card-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                    culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/gh/NextCommerceCo/app-ui-framework@latest/dist/js/next-app-ui.min.js"></script>
</body>

</html>

Layout

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. Please read the official Bootstrap documentation for a full list of options.

Card with Header Actions

Card header with Actions

Card header subtitle Link

Example Action

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Action

See Markup Example


<div class="card">
    <div class="card-header">
        <div>
            <h4 class="card-header-title">Card header with Actions</h4>
            <p class="card-header-subtitle">Card header subtitle <a href="#">Link</a></p>
        </div>
        <div class="d-flex">
        <a href="#" class="btn btn-white btn-sm me-2">
            Example Action
        </a>
        <div class="dropdown">
            <button class="btn btn-sm btn-white dropdown-toggle" type="button"
                id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                More Actions
            </button>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
            </div>
        </div>
    </div>
    <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="card-footer">
    <a href="#" class="btn btn-primary">Action</a>
    </div>
</div>

Card with Kitchen Sink

Example Action

Active Visitors

Unique Visitors

3,245

87.2%

Carts Created

3,245

17.2%

Sales

$12,245

23.2%

Conversion Rate

80.5%

3.2%

AOV

$122.23

3.2%

Status: Open Payment Status: Pending Fulfillment Status: Unfulfilled, On Hold

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Results 39

See Markup Example

<div class="card">
    <div class="card-header">
        <div class="row align-items-center">
            <div class="col-auto pe-0">
                <i class="ti ti-search text-muted"></i>
            </div>
            <div class="col px-2">
                <form>
                    <input type="search" class="form-control form-control-flush search" placeholder="Search by order number...">
                </form>
            </div>
            <div class="col-auto">
                <div class="d-flex">
                <a href="#" class="btn btn-white btn-sm me-2">
                    Example Action
                </a>
                <div class="dropdown">
                    <button class="btn btn-sm btn-white dropdown-toggle" type="button"
                        id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                        More Actions
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-header">
        <div class="row card-header-widgets">
            <div class="col-lg-2 col-sm-6 col-xs-12 px-3 py-2">
                <div class="row justify-content-between align-items-end">
                    <div class="col-12">
                        <h6 class="text-uppercase text-muted mb-2">Active Visitors
                        </h6>
                    </div>
                    <div class="col pb-1 pt-1">
                        <span class="fw-bold mr-2 mb-0 text-dark" id="total_sales" data-currency="USD">57</span>
                    </div>
                    <div class="col-auto">
                        <span class="pulse-beacon"></span>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-sm-6  col-xs-12 px-3 py-2 card-header-widget">
                <div class="row">
                    <div class="col-12">
                        <h6 class="text-uppercase text-muted mb-2">Unique Visitors</h6>
                    </div>
                </div>
                <div class="row flex-nowrap">
                    <div class="col pb-1 pt-1">
                        <span class="fw-bold mr-2 mb-0 text-dark">3,245</span>
                    </div>
                    <div class="col text-end pb-1 pt-1">
                        <span class="fw-bold text-success h5"><span class="ti ti-arrow-up"></span>87.2%</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-sm-6  col-xs-12 px-3 py-2 card-header-widget">
                <div class="row">
                    <div class="col-12">
                        <h6 class="text-uppercase text-muted mb-2">Carts Created</h6>
                    </div>
                </div>
                <div class="row flex-nowrap">
                    <div class="col pb-1 pt-1">
                        <span class="fw-bold mr-2 mb-0 text-dark">3,245</span>
                    </div>
                    <div class="col text-end pb-1 pt-1">
                        <span class="fw-bold text-success h5"><span class="ti ti-arrow-up"></span>17.2%</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-sm-6  col-xs-12 px-3 py-2 card-header-widget">
                <div class="row">
                    <div class="col-12">
                        <h6 class="text-uppercase text-muted mb-2">Sales</h6>
                    </div>
                </div>
                <div class="row flex-nowrap">
                    <div class="col pb-1 pt-1">
                        <span class="fw-bold mr-2 mb-0 text-dark">$12,245</span>
                    </div>
                    <div class="col text-end pb-1 pt-1">
                        <span class="fw-bold text-success h5"><span class="ti ti-arrow-up"></span>23.2%</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-sm-6  col-xs-12 px-3 py-2 card-header-widget">
                <div class="row">
                    <div class="col-12">
                        <h6 class="text-uppercase text-muted mb-2">Conversion Rate</h6>
                    </div>
                </div>
                <div class="row flex-nowrap">
                    <div class="col pb-1 pt-1">
                        <span class="fw-bold mr-2 mb-0 text-dark">80.5%</span>
                    </div>
                    <div class="col text-end pb-1 pt-1">
                        <span class="fw-bold text-success h5"><span class="ti ti-arrow-up"></span>3.2%</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-sm-6  col-xs-12 px-3 py-2 card-header-widget">
                <div class="row">
                    <div class="col-12">
                        <h6 class="text-uppercase text-muted mb-2">AOV</h6>
                    </div>
                </div>
                <div class="row flex-nowrap">
                    <div class="col pb-1 pt-1">
                        <span class="fw-bold mr-2 mb-0 text-dark">$122.23</span>
                    </div>
                    <div class="col text-end pb-1 pt-1">
                        <span class="fw-bold text-danger h5"><span class="ti ti-arrow-down"></span>3.2%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-body py-2">
        <div>
            <span class="badge bg-secondary-light badge-dismissible">Status: Open <button type="button" class="btn-close"></button></span>
            <span class="badge bg-secondary-light badge-dismissible">Payment Status: Pending <button type="button" class="btn-close"></button></span>
            <span class="badge bg-secondary-light badge-dismissible">Fulfillment Status: Unfulfilled, On Hold <button type="button" class="btn-close"></button></span>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table card-table table-sm ">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="card-footer">
        <div class="row align-items-center">
            <div class="col">
                <h4 class="m-0">Results 39</h4>
            </div>
            <div class="col">
                <ul class="pagination justify-content-end mb-0">
                    <li class="page-item">
                        <a class="page-link" href="#">
                            <span class="ti ti-chevrons-left"></span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">
                            <span class="ti ti-chevron-left"></span>
                        </a>
                    </li>
                    <li class="page-item active">
                        <a class="page-link" href="#">1</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">2</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">3</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">
                            <span class="ti ti-chevron-right"></span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="#">
                            <span class="ti ti-chevrons-right"></span>
                        </a>
                    </li>
            </ul>
            </div>
        </div>
    </div>
</div>

Tables

Please read the official Bootstrap documentation for a full list of options.

Tables

Number	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

See Markup Example

  <div class="table-responsive">
    <table class="table table-sm">
      <thead>
        <tr>
          <th scope="col"><a href="#" class="sort">Number</a></th>
          <th scope="col"><a href="#" class="sort asc">First</a></th>
          <th scope="col"><a href="#" class="sort desc">Last</a></th>
          <th scope="col"><a href="#" class="sort">Handle</a></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </div>

Actions

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. Please read the Bootstrap documentation for a full list of options.

Button Sizes

See Markup Example


<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Standard button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

Button Colors

See Markup Example


<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-white">White</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Button Outline Colors

See Markup Example


<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Forms

NEXT Commerce Design System supports all of Bootstrap's default form styling. Please read the official documentation for a full list of options from Bootstrap's core library.

Standard Form Elements

Email address

We'll never share your email with anyone else.

Password

Default checkbox

Checked checkbox

Default radio

Default checked radio

Standard Select

Default file input example

Valid Example

Is Valid Message!

Invalid Example

Is Invalid Message.

See Markup Example

<div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
    </label>
</div>
<div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
    <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
    </label>
</div>
<div class="form-check mb-3">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="form-check-label" for="flexRadioDefault1">
    Default radio
    </label>
</div>
<div class="form-check mb-3">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
    <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
    </label>
</div>
<div class="mb-3">
    <label class="form-label" for="exampleSelect">
    Select
    </label>
    <select id="exampleSelect" class="form-select mb-3" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    </select>
</div>
<div class="mb-3">
    <label for="formFile" class="form-label">Default file input example</label>
    <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
    <label for="validationServer01" class="form-label">Valid Example</label>
    <input type="text" class="form-control is-valid" id="validationServer01" value="Valid" required>
    <div class="valid-feedback">
    Is Valid Message!
    </div>
</div>
<div class="mb-3">
    <label for="validation03" class="form-label">Invalid Example</label>
    <input type="text" class="form-control is-invalid" id="validation03"
        value="Invalid" aria-describedby="validation03" required>
    <div id="validation03Feedback" class="invalid-feedback">
    Is Invalid Message.
    </div>
</div>

Javascript Form Elements

Choices.js comes fully bundled, enable and pass any configuration supported by the library via data-choices attribute.

Choices Select

Example help text to say something useful.

Choices Multi-Select

Example help text to say something useful.

Multi-Select with Grouped Choices

Example help text to say something useful.

See Markup Example

<div class="mb-3">
    <label class="form-label" for="exampleSelect">
        Choices Select
    </label>
    <select id="exampleSelect" class="form-select mb-3" data-choices aria-label="Default select example">
        <option value="" disabled selected>Choose Your Choice</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <div id="emailHelp" class="form-text text-muted">Example help text to say something useful.</div>
</div>
<div class="mb-3">
    <label class="form-label" for="exampleSelect">
        Choices Multi-Select
    </label>
    <select id="multiSelect" class="form-select mb-3"
        data-choices='{"removeItemButton":true}' multiple aria-label="Default select example">
        <option value="London" selected>London</option>
        <option value="Manchester">Manchester</option>
        <option value="Liverpool">Liverpool</option>
        <option value="New York">New York</option>
        <option value="Washington" disabled="">Washington</option>
        <option value="Michigan">Michigan</option>
    </select>
    <div id="emailHelp" class="form-text text-muted">Example help text to say something useful.</div>
</div>
<div class="mb-3">
    <label class="form-label" for="exampleSelect">
        Multi-Select with Grouped Choices
    </label>
    <select id="optionGroups" class="form-select mb-3"
        data-choices='{"removeItemButton":false}' multiple aria-label="Default select example">
        <optgroup label="United Kingdom">
            <option value="London">London</option>
            <option value="Manchester">Manchester</option>
            <option value="Liverpool">Liverpool</option>
        </optgroup>
        <optgroup label="France">
            <option value="Paris" selected>Paris</option>
            <option value="Lyon">Lyon</option>
            <option value="Marseille">Marseille</option>
        </optgroup>
        <optgroup label="Germany" disabled="">
            <option value="Hamburg">Hamburg</option>
            <option value="Munich">Munich</option>
            <option value="Berlin">Berlin</option>
        </optgroup>
        <optgroup label="United States of America">
            <option value="New York">New York</option>
            <option value="Washington" disabled="">Washington</option>
            <option value="Michigan">Michigan</option>
        </optgroup>
        <optgroup label="Spain">
            <option value="Madrid">Madrid</option>
            <option value="Barcelona">Barcelona</option>
            <option value="Malaga">Malaga</option>
        </optgroup>
        <optgroup label="Canada">
            <option value="Montreal">Montreal</option>
            <option value="Toronto">Toronto</option>
            <option value="Vancouver">Vancouver</option>
        </optgroup>
    </select>
    <div id="emailHelp" class="form-text text-muted">Example help text to say something useful.</div>
</div>

Navigation

NEXT's in-app navigation follows the Bootstrap tabbed navigation. Please read the official documentation for a full list of options from Bootstrap's core library.

See Markup Example

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
    </li>
</ul>

Example with Javascript Behaviour

Link tab 1 content...

Link tab 2 content...

Link tab 3 content...

Link tab 4 content...

See Markup Example


<ul class="nav nav-tabs ">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="link1-tab" data-bs-toggle="tab" data-bs-target="#link1-tab-pane" type="button" role="tab" aria-controls="link1-tab-pane" aria-selected="true">Link 1</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="link2-tab" data-bs-toggle="tab" data-bs-target="#link2-tab-pane" type="button" role="tab" aria-controls="link2-tab-pane" aria-selected="false">Link 2</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="link3-tab" data-bs-toggle="tab" data-bs-target="#link3-tab-pane" type="button" role="tab" aria-controls="link3-tab-pane" aria-selected="false">Link 3</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="link4-tab" data-bs-toggle="tab" data-bs-target="#link4-tab-pane" type="button" role="tab" aria-controls="link4-tab-pane" aria-selected="false" disabled>Link 4 Disabled</button>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="link1-tab-pane" role="tabpanel" aria-labelledby="link1-tab" tabindex="0">
        Link tab 1 content...
    </div>
    <div class="tab-pane fade" id="link2-tab-pane" role="tabpanel" aria-labelledby="link2-tab" tabindex="0">
            Link tab 2 content...
    </div>
    <div class="tab-pane fade" id="link3-tab-pane" role="tabpanel" aria-labelledby="link3-tab" tabindex="0">
        Link tab 3 content...
    </div>
    <div class="tab-pane fade" id="link4-tab-pane" role="tabpanel" aria-labelledby="link4-tab" tabindex="0">
        Link tab 4 content...
    </div>
</div>

Pagination

Indicates a series of related content exists across multiple pages. Please see the official Bootstrap documentation for a full list of options.

Pagination

Results 39

See Markup Example

<div class="row align-items-center">
    <div class="col">
        <h4 class="m-0">Results 39</h4>
    </div>
    <div class="col">
        <ul class="pagination justify-content-end mb-0">
            <li class="page-item">
                <a class="page-link" href="#">
                    <span class="ti ti-chevrons-left"></span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">
                    <span class="ti ti-chevron-left"></span>
                </a>
            </li>
            <li class="page-item active">
                <a class="page-link" href="#">1</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">2</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">3</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">
                    <span class="ti ti-chevron-right"></span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#">
                    <span class="ti ti-chevrons-right"></span>
                </a>
            </li>
        </ul>
    </div>
</div>

Date Picker

flatpickr.js is an excellent full featured date picker library that comes bundled and styled to work natively. See flatpickr.js docs for additional options to when initializing.

Date Picker

Initialize a date picker using data-datepicker property on your form input.

Customize the date picker options by passing valid JSON, such as data-datepicker='{"mode": "range"}'.

Date Picker Example

Range Picker Example

See Markup Example


<div class="my-3">
    <label class="form-label">Date Picker Example</label>
    <input class="form-control" data-datepicker  placeholder="Example Date Picker" />
</div>
<div class="my-3">
    <label class="form-label">Range Picker Example</label>
    <input class="form-control" data-datepicker='{"mode": "range"}' placeholder="Example Date Range Picker" />
</div>

Feedback

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. Please see the official Bootstrap documentation for a full list of options.

Alerts

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!

See Markup Example

<div class="alert alert-primary alert-dismissible fade show" role="alert">
    A simple primary alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
    A simple secondary alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
    A simple success alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    A simple danger alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    A simple warning alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-dismissible fade show" role="alert">
    A simple info alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-light alert-dismissible fade show" role="alert">
    A simple light alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-dark alert-dismissible fade show" role="alert">
    A simple dark alert—check it out!
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Badges

Please read the official Bootstrap documentation for a full list of options.

Standard Badges

Primary Secondary Success Danger Warning Info Light Dark

See Markup 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>

Light Badges

Primary Secondary Success Danger Warning Info

See Markup Example

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

Dismissable Badges

Primary Secondary Success Danger Warning Info

See Markup Example

<span class="badge bg-primary-light badge-dismissible">Primary <button type="button" class="btn-close"></button></span>
<span class="badge bg-secondary-light badge-dismissible">Secondary <button type="button" class="btn-close"></button></span>
<span class="badge bg-success-light badge-dismissible">Success <button type="button" class="btn-close"></button></span>
<span class="badge bg-danger-light badge-dismissible">Danger <button type="button" class="btn-close"></button></span>
<span class="badge bg-warning-light badge-dismissible">Warning <button type="button" class="btn-close"></button></span>
<span class="badge bg-info-light badge-dismissible">Info <button type="button" class="btn-close"></button></span>

Loaders

Available loaders to use while waiting for content to load.

Spinner

See Markup Example

```html

```

Tooltips

Please read the official Bootstrap documentation for a full list of options.

Tooltips

See Markup Example


<button type="button" class="btn btn-" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
    Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
    Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
    Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
    Tooltip on left
</button>

Data

Charts

Chart.js is an excellent, fully customizable charting library bundled with a custom theme and styling. See examples below and Chart.js documenation for deep reference on chart integration.

Line Chart

See Markup Example

<div class="chart">
    <canvas id="lineComparison" data-toggle="legend" data-target="#lineComparisonLegend"></canvas>
    <div class="chart-legend" id="lineComparisonLegend"></div>
</div>
<script>
var lineComparison = document.getElementById('lineComparison');
if (typeof Chart !== 'undefined' && lineComparison) {
    new Chart(lineComparison, {
        type: 'line',
        data: {
            labels: ['Jan 1', 'Jan 2', 'Jan 3', 'Jan 5', 'Jan 12', 'Jan 15', 'Jan 18', 'Jan 20',
                'Jan 21', 'Jan 22', 'Jan 23', 'Jan 25'],
            datasets: [
                {
                    label: 'Jan 1 - Jan 25, 2019',
                    order: 1,
                    data: [100, 110, 120, 122, 127, 150, 134, 145, 155, 130, 155, 145],
                    borderColor: '#E3EBF6'
                }, {
                    label: 'Jan 1 - Jan 25, 2020',
                    order: 0,
                    data: [150, 170, 180, 160, 174, 256, 230, 250, 225, 234, 240, 240],
                    borderColor: '#2C7BE5'
                }]
        }
    });
};
</script>

Stacked Bar Chart

See Markup Example

<div class="chart">
    <canvas id="stackedBar" data-toggle="legend" data-target="#stackedBarLegend"></canvas>
    <div class="chart-legend" id="stackedBarLegend"></div>
</div>
<script>
var stackedBar = document.getElementById('stackedBar');
if (typeof Chart !== 'undefined' && stackedBar) {
    new Chart(stackedBar, {
        type: 'bar',
        options: {
            scales: {
                x: {
                    stacked: true,
                },
                y: {
                    stacked: true
                }
            }
        },
        data: {
            labels: ['Jan 1', 'Jan 2', 'Jan 3', 'Jan 5', 'Jan 12', 'Jan 15',
                'Jan 18', 'Jan 20', 'Jan 21', 'Jan 22', 'Jan 23', 'Jan 25'],
            datasets: [
                {
                    type: "bar",
                    label: 'Account Updater',
                    data: [1, 11, 12, 10, 6, 17, 7, 20, 6, 18, 3, 10],
                    backgroundColor: '#00D97E'
                },
                {
                    type: "bar",
                    label: 'Retry',
                    data: [11, 0, 4, 4, 12, 3, 12, 17, 5, 10, 20, 3],
                    backgroundColor: '#ccf7e5'
                },
                {
                    type: "bar",
                    label: 'Email',
                    data: [18, 2, 8, 7, 5, 4, 14, 20, 17, 3, 15, 11],
                    backgroundColor: '#3266ff'
                },
                {
                    type: "bar",
                    label: 'Storefront',
                    data: [15, 17, 16, 16, 15, 5, 4, 11, 13, 4, 15, 14],
                    backgroundColor: '#84a3ff'
                },
                {
                    type: "bar",
                    label: 'Dashboard',
                    data: [13, 5, 1, 11, 14, 20, 7, 17, 2, 10, 16, 10],
                    backgroundColor: '#d6e0ff'
                }
            ]
        }
    });
}
</script>

Line & Stacked Bar Chart Combo

See Markup Example

<div class="chart">
    <canvas id="barLineCombo" data-toggle="legend" data-target="#barLineCombo"></canvas>
    <div class="chart-legend" id="barLineComboLegend"></div>
</div>
<script>
var barLineChart = document.getElementById('barLineCombo');
if (typeof Chart !== 'undefined' && barLineChart) {
    new Chart(barLineChart, {
        type: 'bar',
        options: {
            scales: {
                x: {
                    stacked: true,
                },
                y: {
                    stacked: true
                }
            },
        },
        data: {
            labels: ['Jul 1', 'Jul 2', 'Jul 3', 'Jul 5', 'Jul 12', 'Jul 15', 'Jul 18',
                'Jul 20', 'Jul 21', 'Jul 22', 'Jul 23', 'Jul 25', 'Jul 27', 'Jul 29', 'Jul 31'],
            datasets: [
                {
                    type: 'line',
                    label: 'Net Revenue',
                    data: [125.00, 75.00, 42.00, -52.00, 331.00, -81.00, -28.00,
                        -33.00, 9.00, 43.00, 0.00, 63.00, 125.00, 75.00, 42.00],
                    borderColor: '#2c7be5'
                },
                {
                    type: "bar",
                    label: 'Sales',
                    data: [350.00, 300.00, 200.00, 120.00, 710.00, 210.00, 148.00, 136.00,
                        198.00, 163.00, 210.00, 232.00, 350.00, 300.00, 200.00],
                    backgroundColor: '#00D97E'
                },

                {
                    type: "bar",
                    label: 'Refunds',
                    data: [-125.00, -120.00, -130.00, -232.00, -173.00, -363.00, -332.00,
                        -232.00, -165.00, -126.00, -230.00, -133.00, -125.00, -120.00, -130.00],
                    backgroundColor: '#f6c343'
                }
            ]
        }
    });
}
</script>

Icons

Tabler icons comes fully bundled for a large selection of over 5,900 icons for UI elements that need a little extra spark.

Icon Usage

Example Icons

See Markup Example

<i class="ti ti-arrow-up"></i>
<i class="ti ti-arrow-down"></i>
<i class="ti ti-activity"></i>
<i class="ti ti-chevron-left"></i>
<i class="ti ti-chevron-right"></i>
<i class="ti ti-search"></i>

All Icons

Timeline

Timelines are a great way to show historical events to and provide context to for how things have changed over time.

Timeline

Delivered, Garage / Other Door / Other Location at Address

March 26, 2025, 4:36 p.m.

James Trapero

Example longer content shown as a note for reference in the future.

January 02, 2024, 6:29 a.m

Out for Delivery

January 02, 2024, 6:29 a.m

See Markup Example

<div class="timeline">
    <div class="card-timeline--item">
        <div class="card-timeline--dot"></div>
        <div class="card-timeline--content">
            Delivered, Garage / Other Door / Other Location at Address
            <div class="card-timeline--date text-muted">
                <small>January 02, 2024, 12:59 a.m</small>
            </div>
        </div>
    </div>
    <div class="card-timeline--item">
        <div class="card-timeline--dot"></div>
        <div class="card-timeline--content is-dropdown">
            <div class="card-timeline--dropdown collapsed" data-bs-toggle="collapse"
                    href="#exampleEvent" aria-expanded="false" role="button"  aria-controls="exampleEvent">
                    <span class="">Example timeline event message that has collapsed.</span>
                    <div class="ti ti-chevron-up ml-2 text-primary"></div>
                </div>
                <div class="p-2 collapse" id="exampleEvent">
                <dl>
                    <dt>Example Subheading Details</dt>
                    <dd>Deeper details on the timeline event.</dd>
                    <dt>Example Subheading Details</dt>
                    <dd>Deeper details on the timeline event.</dd>
                    <dt>Example Subheading Details</dt>
                    <dd>Deeper details on the timeline event.</dd>
                </dl>
            </div>
            <div class="card-timeline--date text-muted">
                <small>January 02, 2024, 12:59 a.m</small>
            </div>
        </div>
    </div>
    <div class="card-timeline--item is-note">
        <div class="card">
            <div class="card-body">
                <div class="mb-3">
                    <div class="row align-items-start">
                        <div class="col">
                            <h4 class="mb-1">
                                James Trapero
                            </h4>
                        </div>
                    </div>
                </div>
                <p>
                    Example longer content shown as a note for reference in the future.
                </p>
                <div class="card-timeline--date text-muted">
                    <small>January 02, 2024, 12:59 a.m</small>
                </div>
            </div>
        </div>
    </div>
    <div class="card-timeline--item no-event">
        <div class="card-timeline--dot"></div>
    </div>
    <div class="card-timeline--item">
        <div class="card-timeline--dot"></div>
        <div class="card-timeline--content">
            Out for Delivery
            <div class="card-timeline--date text-muted">
                <small>January 02, 2024, 6:29 a.m</small>
            </div>
        </div>
    </div>
</div>