brandv1.0
Utilities
Data Display
Data Entry
Feedback
Tables
Charts
Maps
Navigation
BEHAVIORAL
Layout
Explore Our Templates 🚀
New
Powerful Svelte-Bootstrap SaaS App Template
Powerful Svelte-Bootstrap SaaS App Template
Admin CRM Application Template
Admin CRM Application Template
Robust Next.js SaaS App Template
Robust Next.js SaaS App Template
Powerful React-Bootstrap SaaS App Template
Powerful React-Bootstrap SaaS App Template
Modern Remix SaaS App Template
Modern Remix SaaS App Template
VueJS-Bootstrap SaaS App Template
VueJS-Bootstrap SaaS App Template
Intuitive Nuxt-Bootstrap SaaS App Template
Intuitive Nuxt-Bootstrap SaaS App Template

Scrollable Content

SimpleBar does only one thing: replace the browser's default scrollbar with a custom CSS-styled one without losing performances.

Scrollable with card

Use class .nicescroll-bar and use parent element as a SimpleBar to initialize scrollbar.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
Card Header
Special title treatment

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

With supporting text below as a natural lead-in to additional content.

Card Footer
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
Scroll horizontal & vertical

Both directions are available for scroll.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte

&qout;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.&qout;

&qout;At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."

"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."

<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
Drawer Overlay
section 1.0

High quallity bootstrap template

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,

section 2.0

Start your next web project

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,

Scroll modal & drawer

Check modal and drawer for scroll.

Preview
Next
HTML
React
Remix
Vue
Nuxt
Svelte
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<template>
    <div class="row">
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control" placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4 mb-3">
            <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Input Box">
        </div>
        <div class="col-md-4 mb-md-0 mb-3">
            <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
        </div>
    </div>
</template>
<div class="row">
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control"placeholder="Readonly"  value="Readonly"  readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control" placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4 mb-3">
        <input type="text" class="form-control is-valid"  placeholder="Disabled" disabled>
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Input Box">
    </div>
    <div class="col-md-4 mb-md-0 mb-3">
        <input type="text" class="form-control is-invalid"  placeholder="Readonly" value="Readonly" readonly>
    </div>
    <div class="col-md-4">
        <input type="text" class="form-control is-invalid"  placeholder="Disabled" disabled>
    </div>
</div>
Jump to