General

  1. Bootstrap UI
  2. General
Customizer
Judia Builder

Choose your themes & layouts etc.

Select Layouts

Choose your layout.

Vertical
Horizontal
Color Scheme

Choose Light or Dark Scheme.

Light
Dark
Brand
Card Layout

Choose borderless or border layout.

Borderless
Border
Layout Width

Choose Fluid or Boxed layout.

Fluid
Boxed
Layout Position

Choose Fixed or Scrollable Layout Position.

Topbar Color

Choose Light, Dark or Brand Topbar Color.

Light
Dark
Brand
Topbar Images

Choose Topbar Images.

Preloader

Choose a preloader.

Enable
Disable
Buy Now

Popovers

Popovers example are available with following options , Directions are mirrored when using Bootstrap in RTL.

HTML Preview
<div class="hstack flex-wrap gap-2">
    <button type="button" class="btn btn-light" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on top
    </button>
    <button type="button" class="btn btn-light" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on right
    </button>
    <button type="button" class="btn btn-light" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on bottom
    </button>
    <button type="button" class="btn btn-light" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        Popover on left
    </button>
    <button tabindex="0" class="btn  btn-success" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>
</div>

Tooltips

Tooltip example are available with following options, Directions are mirrored when using Bootstrap in RTL.

HTML Preview
<!-- Tooltips -->
<div class="hstack flex-wrap gap-2">
    <button type="button" class="btn btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
        Tooltip on top
    </button>
    <button type="button" class="btn btn-light" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
        Tooltip on right
    </button>
    <button type="button" class="btn btn-light" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
        Tooltip on bottom
    </button>
    <button type="button" class="btn btn-light" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
        Tooltip on left
    </button>
    <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
        Tooltip with HTML
    </button>
</div>

Tooltips Custom Colors

Use the data-bs-custom-class="*-tooltip" attributes to make a custom tooltip colors.

HTML Preview
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-custom-class="primary-tooltip" data-bs-placement="top" title="Tooltip primary">
    Primary Tooltip
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-custom-class="secondary-tooltip" data-bs-placement="top" title="Tooltip secondary">
    Secondary Tooltip
</button>
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-custom-class="success-tooltip" data-bs-placement="top" title="Tooltip success">
    Success Tooltip
</button>
<button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-custom-class="danger-tooltip" data-bs-placement="top" title="Tooltip danger">
    Danger Tooltip
</button>
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-custom-class="info-tooltip" data-bs-placement="top" title="Tooltip info">
    Info Tooltip
</button>
<button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-custom-class="warning-tooltip" data-bs-placement="top" title="Tooltip warning">
    Warning Tooltip
</button>
<button type="button" class="btn btn-dark" data-bs-toggle="tooltip" data-bs-custom-class="dark-tooltip" data-bs-placement="top" title="Tooltip dark">
    Dark Tooltip
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-custom-class="primary-tooltip" data-bs-placement="top" title="Tooltip primary">
    Primary Tooltip
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-custom-class="secondary-tooltip" data-bs-placement="top" title="Tooltip secondary">
    Secondary Tooltip
</button>
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-custom-class="success-tooltip" data-bs-placement="top" title="Tooltip success">
    Success Tooltip
</button>
<button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-custom-class="danger-tooltip" data-bs-placement="top" title="Tooltip danger">
    Danger Tooltip
</button>
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-custom-class="info-tooltip" data-bs-placement="top" title="Tooltip info">
    Info Tooltip
</button>
<button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-custom-class="warning-tooltip" data-bs-placement="top" title="Tooltip warning">
    Warning Tooltip
</button>
<button type="button" class="btn btn-dark" data-bs-toggle="tooltip" data-bs-custom-class="dark-tooltip" data-bs-placement="top" title="Tooltip dark">
    Dark Tooltip
</button>

Breadcrumb

Indicate the current page’s location within a navigational hierarchy

HTML Preview
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item active" aria-current="page">Home</li>
    </ol>
</nav>
    
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Library</li>
    </ol>
</nav>
    
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Base UI</a></li>
        <li class="breadcrumb-item active" aria-current="page">General</li>
    </ol>
</nav>

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="ri-home-5-fill"></i></a></li>
        <li class="breadcrumb-item"><a href="#">Base UI</a></li>
        <li class="breadcrumb-item active" aria-current="page">General</li>
    </ol>
</nav>

Pagination

Default Pagination

Use pagination class to ul element to indicate a series of related content exists across multiple pages.

Disabled and Active states

Use disabled class to links that appear un-clickable and active class to indicate the current page.

Sizing

Use pagination-lg or pagination-sm to set different pagination sizes.

Alignment

Use justify-content-start, justify-content-center, or justify-content-end, class to pagination class to change the alignment of pagination respectively.

Custom Separated Pagination

Use pagination-separated class to pagination class to set custom separated pagination.

Custom Rounded Pagination

Use pagination-rounded class to pagination class to set custom rounded pagination.

HTML Preview
<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><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="#">Next</a></li>
    </ul>
</nav>

<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
                <i class="bi bi-chevron-left"></i>
            </a>
        </li>
        <li class="page-item"><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="#" aria-label="Next">
                <i class="bi bi-chevron-right"></i>
            </a>
        </li>
    </ul>
</nav>


<!-- Pagination Disabled & Active -->
<nav aria-label="...">
    <ul class="pagination">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active">
            <a class="page-link" href="#">2 <span class="visually-hidden">(current)</span></a>
        </li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
            <a class="page-link" href="#">Next</a>
        </li>
    </ul>
</nav>

<nav aria-label="...">
    <ul class="pagination">
        <li class="page-item disabled">
            <span class="page-link"><i class="bi bi-chevron-left"></i></span>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active">
            <span class="page-link">
                2
                <span class="visually-hidden">(current)</span>
            </span>
        </li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
            <a class="page-link" href="#"><i class="bi bi-chevron-right"></i></a>
        </li>
    </ul>
</nav>


<!-- Pagination sizing -->

<!-- Pagination Large -->
<nav aria-label="...">
    <ul class="pagination pagination-lg">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><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="#">Next</a>
        </li>
    </ul>
</nav>

<!-- Pagination Small -->
<nav aria-label="...">
    <ul class="pagination pagination-sm">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><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="#">Next</a>
        </li>
    </ul>
</nav>


<!-- Pagination Alignment -->

<!-- Center Alignment -->
<nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><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="#">Next</a>
        </li>
    </ul>
</nav>

<!-- Right Alignment -->
<nav aria-label="Page navigation example">
    <ul class="pagination justify-content-end">
        <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1">Previous</a>
        </li>
        <li class="page-item"><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="#">Next</a>
        </li>
    </ul>
</nav>

<!-- Pagination Rounded -->
<ul class="pagination pagination-rounded">
    <li class="page-item disabled">
        <a href="#" class="page-link"><i class="bi bi-chevron-left"></i></a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">1</a>
    </li>
    <li class="page-item active">
        <a href="#" class="page-link">2</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">3</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">4</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link">5</a>
    </li>
    <li class="page-item">
        <a href="#" class="page-link"><i class="bi bi-chevron-right"></i></a>
    </li>
</ul>

Spinners

Border spinner

Use spinner-border class for a lightweight loading indicator.

Growing spinner

Use spinner-grow class for a lightweight spinner with growing effect.

HTML Preview
<!-- Border spinner -->
<div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

<!-- Growing spinner -->
<div class="spinner-grow text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
    <span class="visually-hidden">Loading...</span>
</div>

Spinners Size

Add .spinner-border-sm and .spinner-grow-sm to make a smaller spinner that can quickly be used within other components.

HTML Preview
<div class="spinner-border spinner-border-sm" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Spinners Buttons

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

HTML Preview
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
    <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> Loading...
</button>
© Judia.
Design & Develop by Themesbrand