Mono provides a variety of Bootstrap Card components with a little customization that suits its design standards. For more information, please see the official Bootstrap documentation.

Basic Examples



<div class="row">
  <div class="col-lg-6 col-xl-3">
    <div class="card mb-4">
      <img class="card-img-top" src="images/elements/cc1.jpg">
      <div class="card-body">
        <h5 class="card-title ">Card Title</h5>
        <p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
        <a href="#" class="btn btn-outline-primary btn-pill">Go somewhere</a>
      </div>
    </div>
  </div>

  <div class="col-lg-6 col-xl-3">
    <div class="card mb-4 p-0">
      <h5 class="card-title  pt-4 px-6">Card Title</h5>
      <div class="card-body">
        <img class="card-img-top mb-4 rounded" src="images/elements/cc1a.jpg">
        <p class="card-text pb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
        <a href="#" class="btn btn-link  px-0 mr-3">Go somewhere</a>
        <a href="#" class="btn btn-link text-success px-0">Go somewhere</a>
      </div>
    </div>
  </div>

  <div class="col-lg-6 col-xl-3">
    <div class="card  mb-4 p-0">
      <h5 class="card-title  pt-4 px-6">Card Title</h5>
      <div class="card-body">
        <p class="card-text pb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
        <a href="#" class="btn btn-outline-primary btn-pill">Card Link</a>
      </div>
      <img class="card-img rounded-0" src="images/elements/cc1b.jpg">
    </div>
  </div>

  <div class="col-lg-6 col-xl-3">
    <div class="card mb-4">
      <div class="card-body">
        <h5 class="card-title mb-1">Card Title</h5>
        <p class="pb-3">Sub-heading text</p>
        <img class="mb-4 card-img" src="images/elements/cc1c.jpg">
        <p class="card-text pb-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor </p>
        <a href="#" class="btn btn-link px-0 text-info mr-3">Card Link</a>
        <a href="#" class="btn btn-link px-0 text-danger">Card Link</a>
      </div>
    </div>
  </div>
</div>


      
Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor

Go somewhere
Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor

Go somewhere Go somewhere
Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor

Card Link
Card Title

Sub-heading text

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor

Card Link Card Link

Horizontal Cards


<div class="row">
  <div class="col-xl-6">
    <div class="card mb-3">
      <div class="row no-gutters">
        <div class="col-md-3">
          <img src="images/elements/hc1.jpg" class="rounded-left horizontal-img" alt="Image">
        </div>
        <div class="col-md-9">
          <div class="card-body">
            <h5 class="card-title pt-2">Card title</h5>
            <p class="card-text mb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiumod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco
              laboris nisi ut aliquip ex ea commodo consequat.</p>
            <a href="#" class="btn btn-outline-primary">go somewhere</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-xl-6">
    <div class="card mb-3">
      <div class="row no-gutters">
        <div class="col-md-9">
          <div class="card-body">
            <h5 class="card-title pt-2">Card title</h5>
            <p class="card-text mb-6">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiumod tempor
              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco
              laboris
              nisi ut aliquip ex ea commodo consequat.</p>
            <a href="#" class="btn btn-outline-primary">go somewhere</a>
          </div>
        </div>
        <div class="col-md-3">
          <img src="images/elements/hc2.jpg" class="rounded-right horizontal-img" alt="Image">
        </div>
      </div>
    </div>
  </div>
</div>

      
Image
Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiumod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

go somewhere
Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiumod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

go somewhere
Image

Card with Deck


<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="images/elements/cc3a.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title ">Card Title</h5>
      <p class="card-text pb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco ut laboris nisi ut
        aliquip ex commodo consequat. duis
        aute irure dolor in reprehenderit.
      </p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>

  <div class="card">
    <img class="card-img-top" src="images/elements/cc3b.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title ">Card Title</h5>
      <p class="card-text pb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco ut laboris nisi ut
        aliquip ex commodo consequat. duis
        aute irure dolor in reprehenderit.</p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>

  <div class="card">
    <img class="card-img-top" src="images/elements/cc3c.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title ">Card Title</h5>
      <p class="card-text pb-3">Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco ut laboris nisi ut
        aliquip ex commodo consequat. duis
        aute irure dolor in reprehenderit.</p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
</div>

      
Card image cap
Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco ut laboris nisi ut aliquip ex commodo consequat. duis aute irure dolor in reprehenderit.

Last updated 3 mins ago

Card image cap
Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco ut laboris nisi ut aliquip ex commodo consequat. duis aute irure dolor in reprehenderit.

Last updated 3 mins ago

Card image cap
Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. enim ad minim veniam, quis nostrud exercitation ullamco ut laboris nisi ut aliquip ex commodo consequat. duis aute irure dolor in reprehenderit.

Last updated 3 mins ago

Text Alignment


<div class="row">
  <div class="col-md-6 col-xl-4">
    <div class="card py-3 mb-4">
      <div class="card-body">
        <h5 class="card-title ">Card Title</h5>
        <p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor
        </p>
        <a href="#" class="btn btn-link text-primary px-0">Go somewhere</a>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-xl-4">
    <div class="card mb-4 py-3">
      <div class="card-body text-center">
        <h5 class="card-title ">Card Title</h5>
        <p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor
        </p>
        <a href="#" class="btn btn-link text-success px-0">Go somewhere</a>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-xl-4">
    <div class="card mb-4 py-3">
      <div class="card-body text-right">
        <h5 class="card-title ">Card Title</h5>
        <p class="card-text pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor
        </p>
        <a href="#" class="btn btn-link text-danger px-0">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

      
Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor

Go somewhere
Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor

Go somewhere
Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor

Go somewhere

Card with Image Overlay


<div class="row">

  <div class="col-md-12 col-lg-6 col-xl-3">
    <div class="card mb-4 bg-overlay-primary">
      <img class="card-img-top" src="images/elements/cc2a.jpg">
      <div class="card-img-overlay">
        <h5 class="card-title text-white">Card Title</h5>
        <p class="card-text text-white pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
          eiusmod tempor </p>
        <a href="#" class="text-white">Last update 2 mins ago</a>
      </div>
    </div>
  </div>

  <div class="col-md-12 col-lg-6 col-xl-3">
    <div class="card mb-4 bg-overlay-success">
      <img class="card-img-top" src="images/elements/cc2a.jpg">
      <div class="card-img-overlay">
        <h5 class="card-title text-white">Card Title</h5>
        <p class="card-text pb-4 pt-1 text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
          eiusmod tempor
        </p>
        <a href="#" class="text-white">Last update 2 mins ago</a>
      </div>
    </div>
  </div>

  <div class="col-md-12 col-lg-6 col-xl-3">
    <div class="card mb-4 bg-overlay-secondary">
      <img class="card-img-top" src="images/elements/cc2a.jpg">
      <div class="card-img-overlay">
        <h5 class="card-title text-white">Card Title</h5>
        <p class="card-text text-white pb-4 pt-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
          eiusmod tempor
        </p>
        <a href="#" class="text-white">Last update 2 mins ago</a>
      </div>
    </div>
  </div>

  <div class="col-md-12 col-lg-6 col-xl-3">
    <div class="card mb-4 bg-overlay-info">
      <img class="card-img-top" src="images/elements/cc2a.jpg">
      <div class="card-img-overlay">
        <h5 class="card-title text-white ">Card Title</h5>
        <p class="card-text pb-4 pt-1 text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
          eiusmod tempor
        </p>
        <a href="#" class="text-white">Last update 2 mins ago</a>
      </div>
    </div>
  </div>

</div>

      
Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor

Last update 2 mins ago
Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor

Last update 2 mins ago
Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor

Last update 2 mins ago
Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor

Last update 2 mins ago

Card Groups


<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="images/elements/cc4a.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title text-primary">Card Title</h5>
      <p class="card-text pb-4">This is a wider card with supporting text below as a natural lead-in to additional
        content. This content is a little
        bit longer.</p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>

  <div class="card">
    <img class="card-img-top" src="images/elements/cc4b.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title text-primary">Card Title</h5>
      <p class="card-text pb-4">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>

  <div class="card">
    <img class="card-img-top" src="images/elements/cc4c.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title text-primary">Card Title</h5>
      <p class="card-text pb-4">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.</p>
      <p class="card-text">
        <small class="text-muted">Last updated 3 mins ago</small>
      </p>
    </div>
  </div>
</div>

      
Card image cap
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 image cap
Card Title

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

Last updated 3 mins ago

Card image cap
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

Using Utilities


<div class="card w-75 mb-5">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text pb-3">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.</p>
    <a href="#" class="btn btn-outline-primary btn-pill">Button</a>
  </div>
</div>

<div class="card w-50 mb-5">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text pb-3">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.</p>
    <a href="#" class="btn btn-outline-primary btn-pill">Button</a>
  </div>
</div>

      
Card title

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.

Button
Card title

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.

Button

Background variants


<div class="row">
  <div class="col-md-4">
    <div class="card text-white bg-success mb-3">
      <h5 class="card-header text-white">card title</h5>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.
        </p>
        <a href="#" class="btn btn-link text-white px-0">Go Somewhere</a>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="card text-white bg-primary mb-3">
      <h5 class="card-header text-white">card title</h5>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.
        </p>
        <a href="#" class="btn btn-link text-white px-0">Go Somewhere</a>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="card text-white bg-secondary mb-3">
      <h5 class="card-header text-white">card title</h5>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.
        </p>
        <a href="#" class="btn btn-link text-white px-0">Go Somewhere</a>
      </div>
    </div>
  </div>
</div>

      
card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.

Go Somewhere
card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.

Go Somewhere
card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt.

Go Somewhere

Contacts

Add New