Colors
Breakpoints
- xxs
- xs (≥400px)
- sm (≥576px)
- md (≥770px)
- lg (≥992px)
- xl (≥1200px)
- xxl (≥1400px)
Buttons
Default buttons
Outline buttons
Large buttons
Small buttons
Alerts
Breadcrumb
Navs
Default
Tabs
Pills
Underline
(custom) Sideline
(custom) Simple
Dropdowns
Pagination
Progressbars
Accordion
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
Plus Minus
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
Caret
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
List
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
Simple
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
.accordion-body
, though the transition does limit overflow.
Modals
Offcanvas
Link with hrefOffcanvas
Toasts
Tooltips & Popovers
Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how these tooltips on links can work in practice, once you use them on your own site or project.
Scroll triggered animations
Fade in
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Fade in & up
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Fade in & down
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Fade in & left
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Fade in & right
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Scale down
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Scale up
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Clip box
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Scroll effects
Scroll rotate (experimental)


Parallax horizontal
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua.
Parallax vertical



Scroll opacity
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Scroll scale

