:: HexaBit :: Bootstrap UI

Please wait...

###### Choose Theme

###### General Settings

- Report Panel Usag
- Email Redirect
- Notifications
- Auto Updates

###### Account Settings

- Offline
- Location Permission
- Notifications

###### Recent

- Ava Alexander Just now Lorem ipsum Veniam aliquip culpa laboris minim tempor
- Debra Stewart 38min ago Many desktop publishing packages and web page editors
- Susie Willis 2hr ago Contrary to belief, Lorem Ipsum is not simply random text
- Folisise Chosielie 2hr ago There are many of passages of available, but the majority
- Marshall Nichols 1day ago It is a long fact that a reader will be distracted

## Bootstrap UI

Create New

## Alert Messages

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!

## Alert Messages with Link

A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like.

## Alert Messages With Icon

The system is running well
Your settings have been succesfully saved
Warning, check your permission settings
Your account has been suspended

## Labels

We restyled the default options for labels and we added the filled class, that can be used in any combination.

Default Primary Success Info Warning Danger

    <spanclass="badge badge-default">Default</span>
    <spanclass="badge badge-primary">Primary</span>
    <spanclass="badge badge-success">Success</span>
    <spanclass="badge badge-info">Info</span>
    <spanclass="badge badge-warning">Warning</span>
    <spanclass="badge badge-danger">Danger</span>

## Accordion

#####

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

#####

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

#####

Anim pariatur cliche reprehenderit, enim eiusmod high Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

###### Accordion Link

Link with href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

###### Multiple targets Accordion

Toggle first element

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

## Accordion style two with backgorund

- ### Lorem ipsum

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, quibusdam! Voluptate nobis, beatae tempora praesentium, illum quis illo, maiores quod similique placeat, saepe mollitia dolor officiis aspernatur deleniti debitis commodi!

- ### Dolor sit amet

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quos, accusamus! Enim labore totam dicta quibusdam? Eveniet quis asperiores reprehenderit eaque atque in iure voluptate, explicabo, placeat, id earum architecto!

- ### Consectetur adipisicing elit

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quos, accusamus! Enim labore totam dicta quibusdam? Eveniet quis asperiores reprehenderit eaque atque in iure voluptate, explicabo, placeat, id earum architecto!

- ### Lorem ipsum

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, quibusdam! Voluptate nobis, beatae tempora praesentium, illum quis illo, maiores quod similique placeat, saepe mollitia dolor officiis aspernatur deleniti debitis commodi!

- ### Dolor sit amet

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quos, accusamus! Enim labore totam dicta quibusdam? Eveniet quis asperiores reprehenderit eaque atque in iure voluptate, explicabo, placeat, id earum architecto!

- ### Consectetur adipisicing elit

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quos, accusamus! Enim labore totam dicta quibusdam? Eveniet quis asperiores reprehenderit eaque atque in iure voluptate, explicabo, placeat, id earum architecto!

## Pagination

###### Default

###### Working with icons

###### Disabled and active states

## Tooltips

###### Popovers

## Position

###### Common values

    <divclass="position-static">...</div>
    <divclass="position-relative">...</div>
    <divclass="position-absolute">...</div>
    <divclass="position-fixed">...</div>
    <divclass="position-sticky">...</div>

###### Sticky top

    <divclass="sticky-top">...</div>

.sticky-top

###### Fixed top

    <divclass="fixed-bottom">...</div>

###### Fixed bottom

    <divclass="fixed-bottom">...</div>

## Borders

###### Subtractive

###### Border color

###### Border-radius

## Shadows

No shadow
Small shadow
Regular shadow
Larger shadow

    <divclass="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
    <divclass="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
    <divclass="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
    <divclass="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>