HexaBit

Please wait...

Choose Theme
General Settings
Account Settings

Bootstrap UI

  • UI Elements
  • Bootstrap UI
Create New

Alert Messages

Alert Messages with Link

Alert Messages With Icon

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

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

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>