Cards

Card title

Subtitle goes here

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

Button

<div class="card">

                                                  <div class="card-header d-flex align-items-center">

                                                    <div class="flex">

                                                      <h4 class="card-title">Title</h4>

                                                      <p class="card-subtitle">Subtitle</p>

                                                    </div>

                                                    <div class="dropdown">

                                                      <a href="#" class="dropdown-toggle" data-caret="false" data-toggle="dropdown">

                                                        <i class="material-icons">more_horiz</i>

                                                      </a>

                                                      <div class="dropdown-menu dropdown-menu-right">

                                                        <a class="dropdown-item" href="#">Action</a>

                                                      </div>

                                                    </div>

                                                  </div>

                                                  <div class="card-body">

                                                    <p class="card-text">Some quick example text</p>

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

                                                  </div>

                                                </div>

Card title

Titles can go in body as well

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

Go somewhere

2 days ago

<div class="card">

                                                  <div class="card-body">

                                                    <h4 class="card-title">Title</h4>

                                                    <p class="card-subtitle mb-3">Subtitle</p>

                                                    <p class="card-text">Lorem ipsum dolor.</p>

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

                                                  </div>

                                                  <div class="card-footer d-flex align-items-center">

                                                    <div class="text-muted flex">2 days ago</div>

                                                    <div class="dropup">

                                                      <a href="#" class="dropdown-toggle" data-caret="false" data-toggle="dropdown">

                                                        <i class="material-icons">more_horiz</i>

                                                      </a>

                                                      <div class="dropdown-menu dropdown-menu-right">

                                                        <a class="dropdown-item" href="#">Action</a>

                                                      </div>

                                                    </div>

                                                  </div>

                                                </div>

Background variants

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

<div class="card bg-primary text-white">

                                          <div class="card-body">

                                            ...

                                          </div>

                                        </div>

Card Groups

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 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

<div class="card-group">

                                          <div class="card">

                                            <div class="card-body">

                                              ...

                                            </div>

                                          </div>

                                          <div class="card">

                                            <div class="card-body">

                                              ...

                                            </div>

                                          </div>

                                        </div>

Custom borders

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid eos hic magni mollitia pariatur possimus quidem quis quo sunt?

<div class="card border-left-3 border-left-danger">

                                          <div class="card-body">

                                            ...

                                          </div>

                                        </div>