graphql
react

Card

title: "Card" metaTitle: "Card Component for Contrast Bootstrap "

metaDescription: "Bootstrap Card is responsive and interactive slideshow which is created for presenting content, especially images and videos"

Card

Bootstrap Card is responsive and interactive slideshow which is created for presenting content, especially images and videos.

The Card is a slideshow for cycling through a series of content. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Basic Cards

Default Card example.

html
          <div class="card" style="width: 25rem">
            <img
              class="img-fluid card-img"
              src="/img/cardbg.png"
              style="width: 100%"
            />
            <div class="card-body">
              <div class="card-title">Basic</div>
              <div class="card-text">
                This is just a card text Get important notifications about you
                or activity you've missed
              </div>
              <div class="d-flex pt-3 pb-3">
                <button class="btn btn-dark">Button</button>
              </div>
            </div>
          </div>

Widget Cards

html
          <div class="card" style="width: 25rem">
            <div class="card-body">
              <div class="lead">Total Downloads</div>
              <h2 class="card-title">1,057,891</h2>
              <p class="small text-muted">
                Oct 1 - Dec 31,<i class="fa fa-globe"></i> Worldwide
              </p>
            </div>
          </div>

Counter Cards

html
          <div class="card" style="width: 25rem">
            <div class="card-body">
              <i class="fa fa-2x fa-line-chart p-4 bg-primary"></i>
              <div class="mt-2 lead">Customers</div>
              <h2 class="card-title" style="font-size:1.8em;">852k</h2>
              <p class="small text-muted">
                Oct 1 - Dec 31,<i class="fa fa-globe"></i> Worldwide
              </p>
              <p class="text-success">
                <i class="fa fa-angle-up"></i> 27.4%
                <span style="font-size: 0.9em" class="ml-2 text-muted"
                  >Since last quarter</span
                >
              </p>
            </div>
          </div>

Rating Cards

html
          <div class="card" style="width: 25rem">
            <div class="card-body">
              <h2 class="lead">Average Rating</h2>
              <h3 class="card-title" style="font-size:2em;">4.2</h3>
              <div>
                <div
                  id="rating1"
                  class="star-rating mt-0"
                  role="rating"
                  data-rating="4"
                >
                  <span class="star" data-value="1"
                    >&#9733;<span class="star-notification">Abysmal</span></span
                  >
                  <span class="star" data-value="2"
                    >&#9733;<span class="star-notification">Bad</span></span
                  >
                  <span class="star" data-value="3"
                    >&#9733;<span class="star-notification">Ok</span></span
                  >
                  <span class="star" data-value="4"
                    >&#9733;<span class="star-notification">Good</span></span
                  >
                  <span class="star" data-value="5"
                    >&#9733;<span class="star-notification"
                      >Excellent</span
                    ></span
                  >
                </div>
              </div>
              <p class="card-text text-muted">Based on 231,156 ratings</p>
              <div class="text-muted pt-4">
                <div class="d-flex align-items-between">
                  <div class="d-flex">
                    <span style="line-height: 100%">5</span>
                    <i class="fa fa-star ml-2"></i>
                  </div>
                  <div class="progress-container ml-3">
                    <div
                      class="progress progress-dark"
                      role="progress"
                      min="0"
                      max="100"
                      value="69"
                    >
                      <div class="progress-bar"></div>
                    </div>
                  </div>
                </div>
                <div class="d-flex align-items-between pt-1">
                  <div class="d-flex">
                    <span style="line-height: 100%">4</span>
                    <i class="fa fa-star ml-2"></i>
                  </div>
                  <div class="progress-container ml-3">
                    <div
                      class="progress progress-dark"
                      role="progress"
                      min="0"
                      max="100"
                      value="80"
                    >
                      <div class="progress-bar"></div>
                    </div>
                  </div>
                </div>
                <div class="d-flex align-items-between pt-1">
                  <div class="d-flex">
                    <span style="line-height: 100%">3</span>
                    <i class="fa fa-star ml-2"></i>
                  </div>
                  <div class="progress-container ml-3">
                    <div
                      class="progress progress-dark"
                      role="progress"
                      min="0"
                      max="100"
                      value="47"
                    >
                      <div class="progress-bar"></div>
                    </div>
                  </div>
                </div>
                <div class="d-flex align-items-between pt-1">
                  <div class="d-flex">
                    <span style="line-height: 100%">2</span>
                    <i class="fa fa-star ml-2"></i>
                  </div>
                  <div class="progress-container ml-3">
                    <div
                      class="progress progress-dark"
                      role="progress"
                      min="0"
                      max="100"
                      value="30"
                    >
                      <div class="progress-bar"></div>
                    </div>
                  </div>
                </div>
                <div class="d-flex align-items-between pt-1">
                  <div class="d-flex">
                    <span style="line-height: 100%">1</span>
                    <i class="fa fa-star ml-2"></i>
                  </div>
                  <div class="progress-container ml-3">
                    <div
                      class="progress progress-dark"
                      role="progress"
                      min="0"
                      max="100"
                      value="68"
                    >
                      <div class="progress-bar"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

Event List Cards

html
          <div class="card" style="width: 25rem">
            <h2
              class="card-title lead p-4 border-bottom"
              style="font-weight: 600"
            >
              Events
            </h2>
            <div class="pane border-bottom p-3">
              <i
                class="fa fa-3x fa-calendar text-danger ml-2"
                aria-hidden="true"
              ></i>
              <div class="ml-3">
                <h2 class="card-title mb-1 lead" style="font-weight: 600">
                  Newmarket Nights
                </h2>
                <p class="card-text mb-2">Organized by University of Oxford</p>
                <p class="card-text mb-0 small text-muted">Time: 6:00AM</p>
                <p class="card-text mb-0 small text-muted">
                  Place: Cambridge Boat Club, Cambridge
                </p>
              </div>
            </div>
            <div class="pane border-bottom p-3">
              <i
                class="fa fa-3x fa-calendar text-danger"
                aria-hidden="true"
              ></i>
              <div class="ml-3">
                <h2 class="card-title mb-1 lead" style="font-weight: 600">
                  Noco Hemp Expo
                </h2>
                <p class="card-text mb-2">Organized by University of Oxford</p>
                <p class="card-text mb-0 small text-muted">
                  Thu, 12 Sep - Sat, 18 Sep 2020
                </p>
                <p class="card-text mb-0 small text-muted">
                  Place: Denver Expo Club, USA
                </p>
              </div>
            </div>
            <div class="pane border-bottom p-3">
              <i
                class="fa fa-3x fa-calendar text-danger ml-2"
                aria-hidden="true"
              ></i>
              <div class="ml-3">
                <h2 class="card-title mb-1 lead" style="font-weight: 600">
                  Canadian National Exhibition (CNE)
                </h2>
                <p class="card-text mb-2">Organized by University of Oxford</p>
                <p class="card-text mb-0 small text-muted">
                  Fri, 20 Sep - Mon, 07 Oct 2020
                </p>
                <p class="card-text mb-0 small text-muted">
                  Place: Toronto , Canada
                </p>
              </div>
            </div>
            <p class="card-text p-4 text-center pointer border-top">See All</p>
          </div>
        </div>

Invoice List Cards

html
          <div class="card" style="width: 25rem">
            <div class="card-body p-0">
              <div class="pane py-3 px-3 border-bottom">
                <div>
                  <h2 class="card-title mb-3 mt-0 lead">Order History</h2>
                  <p class="text-muted">
                    Manage billing information and view receipts
                  </p>
                </div>
              </div>
              <div class="pane py-3 px-3 border-bottom">
                <div>
                  <h2 class="card-title mb-3 mt-0 h6">Invoice #120345</h2>
                  <p class="text-muted">Billed August 21, 2019</p>
                </div>
                <button class="btn btn-flat btn-sm btn-outline-success ml-auto">
                  Pay now
                </button>
              </div>
              <div class="pane py-3 px-3">
                <div>
                  <h2 class="cadr-title mb-3 mt-0 h6">Invoice #120344</h2>
                  <p class="text-muted">Billed July 21, 2019</p>
                </div>
              </div>
            </div>

Alerts and Notifications Cards

html
          <div class="card" style="width: 25rem">
            <div class="card-body py-0">
              <h2 class="card-title lead m-0 py-3 border-bottom">
                Alerts & Notifications
              </h2>
              <div class="pane py-3 border-bottom">
                <div>
                  <div class="card-title my-0 mb-2 h6">Company News</div>
                  <p class="small m-0">
                    Get Rocket news, announcements, and product updates
                  </p>
                </div>
                <div class="custom-check ml-auto">
                  <input
                    class="custom-check-input"
                    type="checkbox"
                    value=""
                    id="defaultCheck1"
                  />
                  <label class="custom-check-label" for="defaultCheck1">
                  </label>
                </div>
              </div>
              <div class="pane py-3 border-bottom">
                <div>
                  <div class="card-title my-0 mb-2 h6">Account Activity</div>
                  <p class="small m-0">
                    Get important notifications about you or activity you've
                    missed
                  </p>
                </div>
                <div class="custom-check ml-auto">
                  <input
                    class="custom-check-input"
                    type="checkbox"
                    value=""
                    id="defaultCheck2"
                    checked
                  />
                  <label class="custom-check-label" for="defaultCheck2">
                  </label>
                </div>
              </div>
              <div class="pane py-3">
                <div>
                  <h2 class="card-title my-0 mb-2 h6">Meetups Near You</h2>
                  <p class="small m-0">
                    Get an email when a Dribbble Meetup is posted close to my
                    location
                  </p>
                </div>
                <div class="custom-check ml-auto">
                  <input
                    class="custom-check-input"
                    type="checkbox"
                    value=""
                    id="defaultCheck3"
                  />
                  <label class="custom-check-label" for="defaultCheck3">
                  </label>
                </div>
              </div>
            </div>
          </div>

Profile Display Cards

html
          <div class="card" style="width: 25rem">
            <img
              class="card-img img-fluid"
              src="../img/cardbg.png"
            />
            <img
              class="pane-img position-relative  mx-auto border"
              style="margin-top:-5rem; width:8rem;"
              src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ7ntUU7AzmOxa5HB8zS83sa-JFHEfZJAoI2A&usqp=CAU"
            />
            <div class="card-body d-flex flex-column align-items-center my-4">
              <h2 class="card-title">Sam Russo</h2>
              <p class="card-text">Senior Software Developer</p>
              <p class="text-muted card-text">Detroit, USA</p>
              <div>
                <button class="btn btn-sm btn-dark">
                  <i class="fa fa-user-plus"></i> Connect
                </button>
                <button class="btn btn-warning btn-sm text-dark">
                  Send Message
                </button>
              </div>
            </div>
          </div>

Profile List Cards

html
          <div class="card" style="width: 25rem">
            <h2 class="card-title lead p-3 border-bottom">Team Members</h2>
            <div class="py-0 card-body">
              <div class="pane mt-2">
                <img
                  class="pane-img pane-md"
                  src="../img/pane/pane1.png"
                />
                <div class="ml-3">
                  <h2 class="card-title my-0 h6">Warren Briggs</h2>
                  <p class="small m-0">
                    <i class="fa fa-circle small p-0 mr-1"></i>Online
                  </p>
                </div>
                <button class="btn btn-success btn-sm ml-auto flat">Add</button>
              </div>
              <div class="pane mt-4">
                <img
                  class="pane-img pane-md"
                  src="../img/pane/pane2.png"
                />
                <div class="ml-3">
                  <h2 class="card-title my-0 h6">Lu Chen</h2>
                  <p class="small m-0">
                    <i class="fa fa-circle small text-warning mr-1"></i>In a
                    meeting
                  </p>
                </div>
                <button class="btn btn-success btn-sm ml-auto flat">Add</button>
              </div>
              <div class="pane mt-4">
                <img
                  class="pane-img pane-md"
                  src="../img/pane/pane3.png"
                />
                <div class="ml-3">
                  <h2 class="card-title my-0 h6">Lilah Loselev</h2>
                  <p class="small m-0">
                    <i class="fa fa-circle small text-muted mr-1"></i>Not
                    Available
                  </p>
                </div>
                <button class="btn btn-success btn-sm ml-auto flat">Add</button>
              </div>
              <div class="pane my-4">
                <img
                  class="pane-img pane-md"
                  src="../img/pane/pane4.png"
                />
                <div class="ml-3">
                  <h2 class="card-title my-0 h6">Danny</h2>
                  <p class="small m-0">
                    <i class="fa fa-circle small text-danger mr-1"></i>Offline
                  </p>
                </div>
                <button class="btn btn-success btn-sm ml-auto flat">Add</button>
              </div>
            </div>
          </div>

Blog Cards

html
          <div class="card" style="width: 25rem">
            <div class="card-body p-1">
              <div class="pane border-bottom p-3">
                <img
                  class="pane-img pane-sm"
                  src="../img/pane/pane2.png"
                />
                <p class="card-text m-0 ml-3">techlead</p>
                <div class="dropdown ml-auto">
                  <button
                    class="btn btn-white btn-flat mr-0"
                    type="button"
                    id="dropdownMenuButton"
                    data-toggle="dropdown"
                    aria-expanded="false"
                  >
                    <i class="text-dark fa fa-ellipsis-h"></i>
                  </button>
                  <ul
                    class="dropdown-menu"
                    aria-labelledby="dropdownMenuButton"
                  >
                    <li>
                      <a class="dropdown-item disabled" href="#"
                        >Edit Profile</a
                      >
                    </li>
                    <li><a class="dropdown-item divider" href="#"></a></li>
                    <li><a class="dropdown-item" href="#">Action 1</a></li>
                    <li><a class="dropdown-item" href="#">Action 2</a></li>
                  </ul>
                </div>
              </div>
              <img
                class="card-img img-fluid my-3"
                src="../img/cardbg.png"
              />
              <div class="mx-2 mb-4">
                <h2 class="card-title">A Dummy blog title sample</h2>
                <p class="card-text text-muted mb-5">
                  Lorem ipsum dolor sit amet, consectetur adipisicing 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
                </p>
                <div>
                  <button class="btn btn-dark py-1 mr-2">
                    <i class="fa fa-arrow-up pl-0"></i> 11
                  </button>
                  <button class="btn btn-dark py-1">
                    <i class="fa fa-arrow-down pl-0"></i>
                    2
                  </button>
                </div>
                <div class="my-2">
                  <button flat class="p-0 btn btn-flat">
                    <i class="fa fa-comments"></i>
                    21.4k
                  </button>
                  <button class="p-0 btn btn-flat mx-4">
                    <i class="fa fa-share"></i>
                    Share
                  </button>
                  <button class="btn btn-warning py-1">
                    <i class="fa fa-save"></i>
                    Save
                  </button>
                </div>
              </div>
            </div>

Simple Cards

html
          <div class="card" style="width: 25rem">
            <div class="card-body">
              <h2 class="card-title">Heading</h2>
              <p class="card-text">Paragraph</p>
              <div class="d-flex justify-content-center">
                <button class="btn btn-light btn-flat btn-rounded">
                  Button
                </button>
              </div>
            </div>
          </div>
          <div class="card" style="width: 25rem">
            <div class="card-body">
              <h2 class="card-title">Heading</h2>
              <button class="btn btn-flat btn-block btn-light">Button</button>
            </div>
          </div>
          <div class="card" style="width: 25rem">
            <div class="card-body">
              <h2 class="card-title">Heading</h2>
              <p class="card-text">Paragraph</p>
              <button class="btn btn-flat btn-rounded btn-light">Button</button>
            </div>
          </div>

Bordered Cards

html
          <div class="card card-border" style="width: 25rem">
            <div class="card-body">
              <h2 class="card-title">Heading</h2>
              <p class="card-text">Paragraph</p>
              <div class="d-flex justify-content-center">
                <button class="btn btn-light btn-flat btn-rounded">
                  Button
                </button>
              </div>
            </div>
          </div>
          <div class="card card-border" style="width: 25rem">
            <div class="card-body">
              <h2 class="card-title">Heading</h2>
              <button class="btn btn-flat btn-block btn-light">Button</button>
            </div>
          </div>
          <div class="card card-border" style="width: 25rem">
            <div class="card-body">
              <h2 class="card-title">Heading</h2>
              <p class="card-text">Paragraph</p>
              <button class="btn btn-flat btn-rounded btn-light">Button</button>
            </div>
          </div>
        </div>

Artwork Top Cards

html
          <div class="card" style="width: 25rem">
            <img
              class="card-img img-fluid"
              src="../img/cardbg.png"
            />
            <div class="card-body">
              <h2 class="card-title">Heading</h2>
              <p class="card-text">Paragraph</p>
              <div class="d-flex justify-content-center">
                <button class="btn btn-light btn-flat btn-rounded">
                  Button
                </button>
              </div>
            </div>
          </div>
          <div class="card card-border" style="width: 25rem">
            <img
              class="card-img img-fluid"
              src="../img/cardbg.png"
            />
            <div class="card-body">
              <h2 class="card-title">Heading</h2>
              <p class="card-text">Paragraph</p>
              <button class="btn btn-flat btn-block btn-light">Button</button>
            </div>
          </div>
        </div>

Artwork Middle Cards

html
          <div class="card" style="width: 25rem">
            <div class="card-body">
              <h2 class="card-title">Heading</h2>
              <p class="card-text">Paragraph</p>
            </div>
            <div
              class="cdb-iframe"
              role="cdb-iframe"
              src="https://www.youtube.com/embed/LebxiFwmYBc"
            ></div>
            <div class="card-body">
              <button class="btn btn-light btn-flat btn-rounded">Button</button>
            </div>
          </div>

Artwork Full Cards

html
          <div
            class="card"
            style="
              width: 25rem;
              background-image: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg');
            "
          >
            <div class="card-body" style="color: white">
              <h2 class="card-title">Heading</h2>
              <p class="card-text">Paragraph</p>
            </div>
            <div class="card-body">
              <button class="btn btn-light btn-rounded btn-flat">Button</button>
            </div>
          </div>
          <div
            class="card card-border"
            style="
              width: 25rem;
              background-image: url('https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg');
            "
          >
            <div class="card-body" style="color: white">
              <h2 class="card-title">Heading</h2>
              <p class="card-text">Paragraph</p>
            </div>
            <div class="card-body">
              <button class="btn btn-light btn-block btn-rounded">
                Button
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="blockcode">
        <div class="header d-flex align-items-center">
          Profile Card
          <span
            class="badge-flat badge-pill ml-2 badge badge-sm bg-secondary"
            style="height: fit-content"
            >Pro Component</span
          >
        </div>
        <div class="description">Profile cards</div>
        <div class="example">
          <div
            class="card"
            style="
              position: relative;
              width: 25rem;
              height: 33rem;
              padding: 25px;
              background-image: url('/img/rectangle.png');
              background-repeat: no-repeat;
              background-position: center;
            "
          >
            <div
              class="card-body"
              style="
                background-color: white;
                width: calc(100% - 50px);
                text-align: center;
                align: center;
                position: absolute;
                bottom: 25px;
              "
            >
              <h2
                class="card-title"
                style="color: #333333"
                class="font-weight-normal"
              >
                Chukwudi Mezue
              </h2>
              <p
                class="card-text"
                style="color: #333333; font-size: 0.9rem"
                class="font-weight-lighter"
              >
                Product Designer
              </p>
              <p style="color: #333333" class="card-text font-weight-light">
                Enugu, Nigeria
              </p>
              <div
                class="card-body"
                style="
                  display: flex;
                  justify-content: space-between;
                  padding: 0 50px;
                  margin: 20px 0;
                "
              >
                <i class="fa fa-2x fa-facebook" style="color: #333333"></i>
                <i class="fa fa-2x fa-twitter" style="color: #333333"></i>
                <i class="fa fa-2x fa-instagram" style="color: #333333"></i>
              </div>
              <button class="btn btn-dark btn-block">Add User</button>
            </div>
          </div>
          <div
            class="card"
            style="
              position: relative;
              width: 25rem;
              height: 33rem;
              padding: 25px;
              background-image: url('/img/rectangle.png');
              background-repeat: no-repeat;
              background-position: center;
            "
          >
            <div
              class="card-body"
              style="
                background-color: white;
                width: calc(100% - 50px);
                text-align: center;
                align: center;
                position: absolute;
                bottom: 25px;
              "
            >
              <h2
                class="card-title"
                style="color: #333333"
                class="font-weight-normal"
              >
                Chukwudi Mezue
              </h2>
              <p
                class="card-text"
                style="color: #333333; font-size: 0.9rem"
                class="font-weight-lighter"
              >
                Product Designer
              </p>
              <p style="color: #333333" class="card-text font-weight-light">
                Enugu, Nigeria
              </p>
              <button class="btn btn-dark btn-block">Send Message</button>
            </div>
          </div>
        </div>
        <div class="example">
          <div
            class="card"
            style="
              position: relative;
              width: 25rem;
              height: 33rem;
              padding: 25px;
              background-image: url('/img/rectangle.png');
              background-repeat: no-repeat;
              background-position: center;
            "
          >
            <div
              class="card-body"
              style="
                background-color: white;
                width: calc(100% - 50px);
                text-align: center;
                align: center;
                position: absolute;
                bottom: 25px;
              "
            >
              <h2 style="color: #333333" class="font-weight-normal">
                Mac Xenon
              </h2>
              <p
                style="color: #333333; font-size: 0.9rem"
                class="font-weight-lighter"
              >
                Product Designer
              </p>
              <p style="color: #333333" class="font-weight-light">
                Enugu, Nigeria
              </p>
              <div
                class="card-body"
                style="
                  display: flex;
                  justify-content: space-between;
                  padding: 0 50px;
                  margin: 20px 0;
                "
              >
                <i class="fa fa-2x fa-facebook" style="color: #333333"></i>
                <i class="fa fa-2x fa-twitter" style="color: #333333"></i>
                <i class="fa fa-2x fa-instagram" style="color: #333333"></i>
              </div>
              <button class="btn btn-dark btn-block">Add User</button>
            </div>
          </div>
          <div
            class="card"
            style="
              position: relative;
              width: 25rem;
              height: 33rem;
              background-image: url('/img/rectangle.png');
              background-repeat: no-repeat;
              background-position: center;
            "
          >
            <div
              class="card-body"
              style="
                background-color: white;
                width: calc(100% - 50px);
                text-align: left;
                align: center;
                position: absolute;
                bottom: 0;
              "
            >
              <h2 style="color: #333333" class="font-weight-normal">
                Mac Xenon
              </h2>
              <p
                style="color: #333333; font-size: 0.9rem"
                class="font-weight-lighter"
              >
                Product Designer
              </p>
              <p style="color: #333333" class="font-weight-light">
                Enugu, Nigeria
              </p>
              <button class="btn btn-dark btn0block">Send Message</button>
            </div>
          </div>
          <div
            class="card"
            style="
              position: relative;
              width: 25rem;
              height: 33rem;
              background-image: url('/img/rectangle.png');
              background-repeat: no-repeat;
              background-position: center;
            "
          >
            <div
              class="card-body"
              style="
                background-color: white;
                width: 100%;
                text-align: center;
                align: center;
                position: absolute;
                bottom: 0;
              "
            >
              <h2 style="color: #333333" class="font-weight-normal">
                Mac Xenon
              </h2>
              <p
                style="color: #333333; font-size: 0.9rem"
                class="font-weight-lighter"
              >
                Product Designer
              </p>
              <p style="color: #333333" class="font-weight-light">
                Enugu, Nigeria
              </p>
              <button class="btn btn-dark btn-block" color="dark" block>
                Send Message
              </button>
              <div
                class="card-body"
                style="
                  display: flex;
                  justify-content: space-between;
                  padding: 0 50px;
                  margin: 20px 0;
                "
              >
                <i class="fa fa-2x fa-facebook text-dark"></i>
                <i class="fa fa-2x fa-twitter text-dark"></i>
                <i class="fa fa-2x fa-instagram text-dark"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="example2">
          <div class="card" style="width: 25rem;">
            <img
              class="img-fluid w-100"
              src="../img/uber.png"
            />
            <img style="margin-top:-5rem; border-style:solid; border-width:4px;"
              class="mx-auto border-white rounded-circle" width="130px" src="../img/ellipse.png" />
            <div class="card-body d-flex flex-column align-items-center mb-4 pt-1">
              <h4>Chukwudi Mezue</h4>
              <p class="text-muted">Product Designer</p>
              <p style="font-size:16;color:#333;">Enugu, Nigeria</p>
              <p style="color:#333;">
                Creating High Quality Resources and tools to Aid developers during the developement of
                their projects
              </p>
              <div class="d-flex justify-content-between w-100">
                <button class="w-50 mr-4 btn btn-dark">Add User</button>
                <button class="w-50 btn btn-outline-dark"> Send Message </button>
              </div>
            </div>
          </div>
          <div class="card mt-4" style="width: 25rem;">
            <img
              class="img-fluid w-100"
              src="../img/uber.png"
            />
            <div class="card-body d-flex justify-content-between">
              <img style="margin-top:-6rem; border-style:solid; border-width:4px;"
                class="border-white rounded-circle" width="130px" height="130px" src="../img/ellipse.png" />
              <div class="align-items-left pt-1 pb-0">
                <h4>Chukwudi Mezue</h4>
                <p class="text-muted">Product Designer</p>
              </div>
            </div>
            <div class="card-body d-flex flex-column align-items-center mb-2">
              <p style="color:#333;">
                Creating High Quality Resources and tools to Aid developers during the developement of
                their projects
              </p>
              <div class="d-flex justify-content-between w-100">
                <button class="w-50 mr-4 btn btn-dark">Add User</button>
                <button class="w-50 btn btn-outline-dark"> Send Message </button>
              </div>
            </div>
            <div style="
              display:flex;
              justify-content:space-between;
              padding:0 20%;
              margin:0 0 20px;
            ">
              <button class="btn btn-block btn-outline-dark btn-flat btn-sm">
                <i class="fa-lg fa fa-facebook-f"></i>
              </button>
              <button class="btn btn-block btn-outline-dark btn-flat btn-sm">
                <i class="fa-lg fa fa-twitter"></i>
              </button>
              <button class="btn btn-block btn-outline-dark btn-flat btn-sm">
                <i class="fa-lg fa fa-instagram"></i>
              </button>
            </div>
          </div>
          <div class="card mt-4" style="width: 25rem;">
            <img style="margin-top:2rem; border-style:solid; border-width:4px;"
              class="mx-auto border-white rounded-circle" width="130px" src="../img/ellipse.png" />
            <div class="card-body d-flex flex-column align-items-center mb-4 pt-1">
              <h4>Chukwudi Mezue</h4>
              <p class="text-muted">Product Designer</p>
              <p style="font-size:16;color:#333;">Enugu, Nigeria</p>
              <p style="color:#333;">
                Creating High Quality Resources and tools to Aid developers during the developement of
                their projects
              </p>
              <div class="w-100">
                <button class="btn btn-block btn-dark">Send Message</button>
                <button class="btn btn-block btn-outline-dark"> Send Message </button>
              </div>
            </div>
          </div>
        </div>
        <div class="example2">
          <div class="card" style="width: 25rem;">
            <img
              class="img-fluid w-100"
              src="../img/uber.png"
            />
            <img style="margin-top:-5rem; border-style:solid; border-width:4px;"
              class="mx-auto border-white rounded-circle" width="130px" src="../img/ellipse.png" />
            <div class="card-body d-flex flex-column align-items-center mb-4 pt-1">
              <h4>Chukwudi Mezue</h4>
              <p class="text-muted">Product Designer</p>
              <p style="font-size:16;color:#333;">Enugu, Nigeria</p>
              <div style="
                width:100%;
                display:flex;
                justify-content:space-between;
                padding:0 70px;
                margin:10px 0 30px;"
              >
                <i class="fa-lg fa text-dark fa-facebook-f"></i>
                <i class="fa-lg fa text-dark fa-twitter"></i>
                <i class="fa-lg fa text-dark fa-instagram"></i>
              </div>
              <div class="w-100">
                <button class="btn btn-block btn-dark mb-3">Add User</button>
                <button class="btn btn-block btn-outline-dark"> Send Message </button>
              </div>
            </div>
          </div>
          <div class="card mt-4" style="width: 25rem;">
            <img
              class="img-fluid w-100"
              src="../img/uber.png"
            />
            <img style="margin-top:-5rem; border-style:solid; border-width:4px;"
              class="mx-auto border-white rounded-circle" width="130px" src="../img/ellipse.png" />
            <div class="card-body d-flex flex-column align-items-center mb-4 pt-1">
              <h4>Chukwudi Mezue</h4>
              <p class="text-muted">Product Designer</p>
              <p style="font-size:16;color:#333;">Enugu, Nigeria</p>
              <p style="color:#333; margin:20px 0 30px;">
                Creating High Quality Resources and tools to Aid developers during the developement of
                their projects
                            </p>
              <div class="w-100">
                <button class="btn btn-dark btn-block mb-0">Send Message</button>
              </div>
            </div>
          </div>
          <div class="card" style="width:25rem; margin-top:6rem;">
            <img style="margin-top:-4rem; border-style:solid; border-width:4px;"
              class="mx-auto border-white rounded-circle" width="130px" src="../img/ellipse.png" />
            <div class="card-body d-flex flex-column align-items-center mb-4 pt-1">
              <h4>Chukwudi Mezue</h4>
              <p class="text-muted">Product Designer</p>
              <p style="font-size:16;color:#333;">Enugu, Nigeria</p>
              <p style="color:#333;">
                Creating High Quality Resources and tools to Aid developers during the developement of
                their projects
              </p>
              <div class="w-100">
                <button class="btn btn-dark btn-block mb-3">Send Message</button>
                <button class="btn btn-outline-dark btn-block"> Send Message </button>
              </div>
            </div>
          </div>
        </div>
      </div>
Script
    <script src="../build/cdbbootstrap.js"></script>
    <script>
      new CDB.Rating(document.querySelector('.star-rating'));
      [].slice
        .call(document.querySelectorAll('[role=progress]'))
        .forEach(progress => {
          new CDB.Progress(progress);
        });
    </script>
Previous
Mask
Next
Multiselect