Cards

Examples

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up.

Button

Basic Card with Title

Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up.

Button

Card with Background Color

Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up.

Button

Card with Background Gradient

Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up.

Button

Card with Header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Card with Sub Header

Card subtitle

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

Someone famous in Source Title

Featured Card Title

Go somewhere

2 days ago

Advanced Card

Card with Action Tools

With supporting text below as a natural lead-in to additional content.

Go somewhere

Card with Action Tools & Background Colors

With supporting text below as a natural lead-in to additional content.

Go somewhere

Card with Action Tools

With supporting text below as a natural lead-in to additional content.

Go somewhere

                                    
                                        <nav aria-label="breadcrumb">
                                            <ol class="breadcrumb bg-light bg-opacity-50 p-2 mb-2">
                                                <li class="breadcrumb-item active" aria-current="page"><i class="ti ti-smart-home me-1"></i>Home</li>
                                            </ol>
                                        </nav>
                                    

                                    
                                        <nav aria-label="breadcrumb">
                                            <ol class="breadcrumb bg-light bg-opacity-50 p-2 mb-2">
                                                <li class="breadcrumb-item"><a href="#"><i class="ti ti-smart-home"></i> Home</a></li>
                                                <li class="breadcrumb-item active" aria-current="page">Library</li>
                                            </ol>
                                        </nav>
                                    

                                    
                                        <nav aria-label="breadcrumb">
                                            <ol class="breadcrumb bg-light bg-opacity-50 p-2 mb-0">
                                                <li class="breadcrumb-item"><a href="#"><i class="ti ti-smart-home"></i> Home</a></li>
                                                <li class="breadcrumb-item"><a href="#">Library</a></li>
                                                <li class="breadcrumb-item active" aria-current="page">Data</li>
                                            </ol>
                                        </nav>

Bordered Card

Card with Colored Border

With supporting text below as a natural lead-in to additional content.

Button

Card with Simple Border

With supporting text below as a natural lead-in to additional content.

Button

Card with Double Border

With supporting text below as a natural lead-in to additional content.

Button

Card with Start Border

With supporting text below as a natural lead-in to additional content.

Button

Card with Colored Border

With supporting text below as a natural lead-in to additional content.

Button

Card with Colored Border

With supporting text below as a natural lead-in to additional content.

Button

Horizontal Card

Card with Horizontal Mode

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card with Horizontal Mode

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Stretched Link

Card with stretched link

Go somewhere

Card with stretched link

Some quick example text to build on the card up the bulk of the card's content.

Card with stretched link

Go somewhere

Card with stretched link

Some quick example text to build on the card up the bulk of the card's content.

Card Group

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago