Bootstrap 5 Components

Buttons

Button Styles

Button Sizes

Outline Buttons

Code Example:


                            <button type="button" class="btn btn-primary">Primary</button>

                            <button type="button" class="btn btn-outline-success">Success</button>

                            <button type="button" class="btn btn-primary btn-lg">Large button</button>

Cards

Cards are flexible content containers with multiple variants and options.

Basic Card

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

Go somewhere

Featured

Card with header

This card has a header and a footer for extra information.

Learn more

2 days ago

Text Card

Card subtitle

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

Card link Another link

Code Example:


                            <div class="card">

                              <img src="..." class="card-img-top" alt="...">

                              <div class="card-body">

                                <h5 class="card-title">Card title</h5>

                                <p class="card-text">Some text here...</p>

                                <a href="#" class="btn btn-primary">Go somewhere</a>

                              </div>

                            </div>

Alerts

Alerts provide contextual feedback messages for typical user actions.

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple primary alert with an example link. Give it a click if you like.

Well done!

This is an alert with additional content. It has a heading, paragraph text, and a horizontal rule.

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

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

Code Example:


                            <div class="alert alert-primary" role="alert">

                              A simple primary alert—check it out!

                            </div>


                            
                            <!-- Dismissible Alert -->

                            <div class="alert alert-warning alert-dismissible fade show" role="alert">

                              <strong>Holy guacamole!</strong> You should check in on some of those fields below.

                              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

                            </div>

Forms

Bootstrap's form controls expand on our Rebooted form styles with classes.

Basic Form

Form Controls

Inline Form

Code Example:


                            <form>

                              <div class="mb-3">

                                <label for="exampleInputEmail1" class="form-label">Email address</label>

                                <input type="email" class="form-control" id="exampleInputEmail1">

                              </div>

                              <div class="mb-3">

                                <label for="exampleInputPassword1" class="form-label">Password</label>

                                <input type="password" class="form-control" id="exampleInputPassword1">

                              </div>

                              <button type="submit" class="btn btn-primary">Submit</button>

                            </form>

Modals

Modals are dialog boxes/popups that are displayed on top of the current page.

Code Example:


                            <!-- Button trigger modal -->

                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">

                              Launch modal

                            </button>


                            
                            <!-- Modal -->

                            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

                              <div class="modal-dialog">

                                <div class="modal-content">

                                  <div class="modal-header">...

                                  <div class="modal-body">...

                                  <div class="modal-footer">...

                                </div>

                              </div>

                            </div>

Navs & Tabs

Navigation components for moving between related content.

Basic Nav

Nav Tabs

This is the home tab content. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.

This is the profile tab content. Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.

This is the contact tab content. Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack.

Nav Pills

Code Example:


                            <!-- Nav tabs -->

                            <ul class="nav nav-tabs" id="myTab" role="tablist">

                              <li class="nav-item" role="presentation">

                                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>

                              </li>

                              <!-- More tabs... -->

                            </ul>

                            <div class="tab-content" id="myTabContent">

                              <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>

                              <!-- More content... -->

                            </div>

Carousel

A slideshow component for cycling through elements—images or slides of text.

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.

Code Example:


                            <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">

                              <div class="carousel-indicators">

                                <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>

                                <!-- More indicators... -->

                              </div>

                              <div class="carousel-inner">

                                <div class="carousel-item active">

                                  <img src="..." class="d-block w-100" alt="...">

                                  <div class="carousel-caption d-none d-md-block">

                                    <h5>First slide label</h5>

                                    <p>Some content...</p>

                                  </div>

                                </div>

                                <!-- More items... -->

                              </div>

                              <!-- Controls... -->

                            </div>

Bootstrap 5 Components

Components on this page:

Buttons

Button Styles

Button Sizes

Outline Buttons

Code Example:

Cards

Basic Card

Card with header

Text Card

Card subtitle

Code Example:

Alerts

Well done!

Code Example:

Forms

Basic Form

Form Controls

Inline Form

Code Example:

Modals

Code Example:

Navs & Tabs

Basic Nav

Nav Tabs

Nav Pills

Code Example:

Carousel

First slide label

Second slide label

Third slide label

Code Example: