Accordion

This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Accordion Flush

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.

Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.

Alerts

Holy guacamole! You should check in on some of those fields below.

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 with an example 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 warning alert with an example link. Give it a click if you like.

Alerts with Content

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Badges

Regular

Primary Secondary Success Danger Warning Info Light Dark

Rounded

Primary Secondary Success Danger Warning Info Light Dark

Link

Primary Secondary Success Danger Warning Info Light Dark

Icons

Primary Secondary Success Danger Warning Info Light Dark

Style

Breadcrumb

Custom Dividers

Buttons

Color

Outline

Style

Rounded

Outline Rounded

Colored Link

Primary link Secondary link Success link Danger link Warning link Info link Light link Dark link

Size

Right Icon

Left Icon

Social Buttons

States

Disabled Primary link

Cards

Project

Software Design

Lorem ipsum dolor et amet ed dos eius mod tempor incid ut veniam

6

10

Strategy

Lorem ipsum doloret nit uta amet, adipiscing elit, etsedo atun eiusmo tempor incid idunt do labore eton dolore magna ut amet aliqua. Ut enima minim veniam.

Learn More

Notification

2 mins ago

Lorem ipsum doloret nit uta amet, adipiscing elit, etsedo atun eiusmo tempor incid idunt do labore eton dolore magna ut amet aliqua. Ut enima minim veniam.

UX Research

Explore

2 Days Ago

Design Tools

Lorem ipsum doloret amet, adipiscing at elit, viniam do eiusmod incididunt utlor dolore magna aliqua ut enim ad minim.

Learn More

Built for Web Platforms

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Business

15 February, 2021

Lorem ipsum dolor ut adip iscing elit

JavaScript

15 Hours

Lorem ipsum doloret amet tenaim velit enitos ad iscing elit viniam dos leo ora per velitas ut.

$199

Interactive Reports

Lorem ipsum dolor ameton quis nos officia velit ut consect elit cing miniam at veniam

Customer Support

Success

July 15, 2021

Lorem ipsum utas veniam dos minim quis nos.

Ultrice neque ornare aene anaue viv erra ut vitae congue. At auctor urna nunc id cursus metus aliquam eleif.

Discover Our Work

Message

Quote of the day

"Lorem ipsum dolor consect etur nit amet, adip cing elit magna aliqua"

Someone Famous

Announcements

Design Updates

Lorem ipsum dolor veniam, consect adiping elit, dos eius mod minim ut incididunt ad labore et doloremag aliqua

Jan 4, 19 Upgrade Plan

Index Funds

Lorem ipsum dolor nit amet, consece tetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor magna aliqua

Explore

Powerful technology

Lorem ipsum dolor nit amet elit venim minim adiping, incididunt veniam nim eiusmod aliquant quis enim risus dos.

Learn More

Do more with less complexity

Learn More

Technology

Lorem ipsum dolor nit adip iscing elit ut veniam

Info

Built for web platforms

Lorem ipsum dolor amet, conseceur adiping elit, sed do ut eiusmod tempor incididunt ut labore et dolore magnos aliqua ut enim minim.

Project Managers

Lorem ipsum dolor ametad ut velit sea iriure bo ocrem.

Keep exploring features

Lorem ipsum dolor minim dos, consec etur adiping elit, do ut eiusmod tempor incid idunt lab ut et dolore magnos aliqua. Ut enim dos minim veniam, quis exer ullamco labris nisi ut aliquip ex ea com consequat duis aut eirure dolor in.

Lorem ipsum minim elit na amet adpin ut vinam esta eiusmod

Team

$9

per user

per month

Lorem ipsum dolor amet, consec tetur ut adiptu iscing elit sed do eiusm mag veniam inunt ut officia dolore

Lorem ipsum dolor sit amet

Team

$18

per user

per month

Lorem ipsum dolor amet, consec tetur ut adiptu iscing elit sed do eiusm mag veniam inunt ut officia dolore

Lorem ipsum dolor sit amet

Basic

Lorem ipsum dolor consecta amet elit dos eius empor ut inci didunt ut.

$9

per user

per month

Lorem ipsum nit
Amet consect adip
Do eiusmod temp
Incid ut labore et
Ut enim veniam
Duis irure dolor

Premium

Lorem ipsum dolor consecta amet elit dos eius empor ut inci didunt ut.

$19

per user

per month

Lorem ipsum nit
Amet consect adip
Do eiusmod temp
Incid ut labore et
Ut enim veniam
Duis irure dolor

Amy Baker

User Role

Lorem ipsum dolor amet veniam. Miniam aute irure dolor in ut officia.

Call or Text (123) 456-7890

Email

Lorem ipsum dolor amet officia, ut consect adip cing miniam

info@company.com

Featured

Lorem ipsum dolorea nimamet consec etur elit adipiscing, ut do eiusmod..

Ut enim ad minim veniam dolor quisnos exercitation ullamco nisi ut aliquip ea utam em consequat. Duis aute irure dolor in reprehen de arit in voluptas velit essec dolore eu fugiat paritur nimamet.

Learn More

Featured

Lorem ipsum dolorea nimamet consec etur elit adipiscing, ut do eiusmod..

Ut enim ad minim veniam dolor quisnos exercitation ullamco nisi ut aliquip ea utam em consequat. Duis aute irure dolor in reprehen de arit in voluptas velit essec dolore eu fugiat paritur nimamet.

Learn More

Oakland, CA

$600,000

Lorem ipsum doloret amet, adip iscing ata elit viniam do eiusmod incididunt utlor do magna ut minim anim id est.

2400 Sqft. 4 2

Excellence

Lorem ipsum dolor sit amet consec adip iscing elita ut labore ets dolore magna aliqua aute irure dolor in

design

Lorem ipsum veniams esta velit enim quis aliqa ut atsa amet dos minim.

1000

June 6, 2021

Lorem ipsum veniams esta velit enim quis aliqa ut atsa amet dos minim.

Featured

Project Scoping

Lorem ipsum dolor nit amet, consect etur adiping elit, sed do eiusmod tempor incididunt ut labore et dolore

Learn More

Digital Marketing

Lorem ipsum dolor nit amet, consect etur adiping elit, sed do eiusmod tempor incididunt ut labore et dolore magna

2 days ago

Carousel

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

Fade Animation

Close Button

Close Button Example some important content.

Close Button Example Dark Variant some important content.

Dropdowns

Images

Rounded

Circle

Thumbnail

Thumbnail Circle

Aligning Images

List Groups

Contract Management With support text underneath to add more detail Team Meeting Some other text goes here Resource Planning And we end with another snippet of text Disabled option This option is disabled

Finish sales report 1:00–2:00pm Weekly All Hands 2:00–2:30pm Out of office Tomorrow

Current item
With badge 14
A third list item 2
A fourth item
And a fifth one

The current link item A second link item A third link item A fourth link item A disabled link item

Flush

An item
A second item
A third item
A fourth item
And a fifth one

Subheading
Cras justo odio
14
Subheading
Cras justo odio
14
Subheading
Cras justo odio
14

Contract Management

Lorem ipsum dolor Donna Alba

2 hrs ago

Resources

Lorem ipsum dolor Amy Baker

6 hrs ago

Team meating

Lorem ipsum dolor Eric Harris

Yesterday

Donna Alba

Lorem ipsum dolor

Eric Harris

Lorem ipsum dolor

Amy Baker

Lorem ipsum dolor

Modal

Active
Link
Link
Disabled

Tabs

Lorem ipsum dolor sit consectetur adipiscing elit, do eiusmod temp or incididunt ut et dolore magna qua. Utenim ad minim veniam, quisnos exercitation consequat. Duis aute irure dolor in reprehenderit.

Nec tincidunt praesent semper feugiat pulvinar proin gravida. Ultrices dui sapien eget mi. Urna neque viverra justo nec ultrices dui. Consectetur purus et ucibus pulvinar elementum integer enim ipsum vitae aliquet nec.

Elit pellentesque habitant morbi tris tique senectus netuset tinid. Unta pulvinar sapien et ligula ullamper. Ultrices sagittis orci a scelerisque purus semper eget. Pulvinar neque laoreet suspendisse interdum consectetur libero.

Pills with Icon

Lorem ipsum dolor sit consectetur adipiscing elit, do eiusmod temp or incididunt ut et dolore magna qua. Utenim ad minim veniam, quisnos exercitation consequat. Duis aute irure dolor in reprehenderit.

Nec tincidunt praesent semper feugiat pulvinar proin gravida. Ultrices dui sapien eget mi. Urna neque viverra justo nec ultrices dui. Consectetur purus et ucibus pulvinar elementum integer enim ipsum vitae aliquet nec.

Elit pellentesque habitant morbi tris tique senectus netuset tinid. Unta pulvinar sapien et ligula ullamper. Ultrices sagittis orci a scelerisque purus semper eget. Pulvinar neque laoreet suspendisse interdum consectetur libero.

Tabs Icon

Lorem ipsum dolor sit consectetur adipiscing elit, do eiusmod temp or incididunt ut et dolore magna qua. Utenim ad minim veniam, quisnos exercitation consequat. Duis aute irure dolor in reprehenderit.

Nec tincidunt praesent semper feugiat pulvinar proin gravida. Ultrices dui sapien eget mi. Urna neque viverra justo nec ultrices dui. Consectetur purus et ucibus pulvinar elementum integer enim ipsum vitae aliquet nec.

Elit pellentesque habitant morbi tris tique senectus netuset tinid. Unta pulvinar sapien et ligula ullamper. Ultrices sagittis orci a scelerisque purus semper eget. Pulvinar neque laoreet suspendisse interdum consectetur libero.

Pills

Home
Data
User
Contract

Lorem ipsum dolor sit consectetur adipiscing elit, do eiusmod temp or incididunt ut et dolore magna qua. Utenim ad minim veniam, quisnos exercitation consequat. Duis aute irure dolor in reprehenderit.

Nec tincidunt praesent semper feugiat pulvinar proin gravida. Ultrices dui sapien eget mi. Urna neque viverra justo nec ultrices dui. Consectetur purus et ucibus pulvinar elementum integer enim ipsum vitae aliquet nec.

Elit pellentesque habitant morbi tris tique senectus netuset tinid. Unta pulvinar sapien et ligula ullamper. Ultrices sagittis orci a scelerisque purus semper eget. Pulvinar neque laoreet suspendisse interdum consectetur libero.

Enim ut sem viverra aliquet eget sit amet. Eget eget nunc aictum non consect etur a erat nam at lectus. Bibendum ut tristique et egestas. Id porta nibh venenatis cras sed felis. Libero laor eet sit amet cursus kit amet.

Vertical Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Nec tincidunt praesent semper feugiat pulvinar proin gravida. Ultrices dui sapien eget mi. Urna neque viverra justo nec ultrices dui. Consectetur purus et ucibus pulvinar elementum integer enim ipsum vitae aliquet nec.

Elit pellentesque habitant morbi tris tique senectus netuset tinid. Unta pulvinar sapien et ligula ullamper. Ultrices sagittis orci a scelerisque purus semper eget. Pulvinar neque laoreet suspendisse interdum consectetur libero.

Enim ut sem viverra aliquet eget sit amet. Eget eget nunc aictum non consect etur a erat nam at lectus. Bibendum ut tristique et egestas. Id porta veniam venenatis cra se felis. Libero laor eet sit ametkit consect amet.

Vertical Pills

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Nec tincidunt praesent semper feugiat pulvinar proin gravida. Ultrices dui sapien eget mi. Urna neque viverra justo nec ultrices dui. Consectetur purus et ucibus pulvinar elementum integer enim ipsum vitae aliquet nec.

Elit pellentesque habitant morbi tris tique senectus netuset tinid. Unta pulvinar sapien et ligula ullamper. Ultrices sagittis orci a scelerisque purus semper eget. Pulvinar neque laoreet suspendisse interdum consectetur libero.

Enim ut sem viverra aliquet eget sit amet. Eget eget nunc aictum non consect etur a erat nam at lectus. Bibendum ut tristique et egestas. Id porta veniam venenatis cra se felis. Libero laor eet sit ametkit consect amet.

Offcanvas

Link with href

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

...

Pagination

Regular

Style

Sizes

Placeholders

Animation

Width

Size

Color

Popovers

Popover right

Popover bottom

Popover left

Progress

25%

Quotes

Primary Blockquote

Primary title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Secondary Blockquote

Secondary title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Success Blockquote

Success title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Info Blockquote

Info title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Warning Blockquote

Warning title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Danger Blockquote

Danger title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Spinners

Spinner With Text

Loading...

Size

Scrollspy

home

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

features

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

about

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

one

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

two

This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

Tables

Default

#	Name	Team	Social
1	John	Tech	@tech
2	Emily	Product	@product
3	Tom		@company

Striped

#	Name	Team	Social
1	John	Tech	@tech
2	Emily	Product	@product
3	Tom		@company

Accented

#	Name	Team	Social
1	John	Tech	@tech
2	Emily	Product	@product
3	Tom		@company

Variants

Use contextual classes to color tables, table rows or individual cells.

#	Name	Team	Social
1	John	Tech	@tech
2	Emily	Product	@product
3	Tom		@company

Toasts

See? Just like this.

Heads up, toasts will stack automatically

Hello, world! This is a toast message.

Tooltip

Typography

Headings

Heading 1

Bootstrap heading

Heading 2

Bootstrap heading

Heading 3

Bootstrap heading

Heading 4

Bootstrap heading

Heading 5

Bootstrap heading

Heading 6

Bootstrap heading

Display

Display 1

Display heading

Display 2

Display heading

Display 3

Display heading

Display 4

Display heading

Display 5

Display heading

Display 6

Display heading

Paragraphs

Primary Text