Bootstrap UI

  • UI Elements
  • Bootstrap UI

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 
<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>

Accordion

Accordion Link
Multiple targets Accordion

Pagination

Working with icons
Disabled and active states

Tooltips

Popovers

Position

Common values
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
Sticky top
<div class="sticky-top">...</div>
.sticky-top
Fixed top
<div class="fixed-bottom">...</div>
Fixed bottom
<div class="fixed-bottom">...</div>

Borders

Subtractive
Border color
Border-radius
... ... ... ... ... ... ...

Shadows

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