Bootstrap Cards

A new flexible and extensible content container—the card component—in place of old panels, wells, and thumbnail component. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

The outer wrapper require the base class .card, whereas content can be placed inside the .card-body.

 

Ex.

...

<style>

    .bs-example{

        margin: 20px;       

    }

</style>

</head>

<body>

<div class="bs-example">

    <div class="card" style="width: 300px;">

        <img src="/examples/images/nkr.svg" class="card-img-top" alt="...">

        <div class="card-body text-center">

            <h5 class="card-title">Naveen Kumar </h5>

            <p class="card-text">Naveen is a freelance web designer and developer based in noida. She is specialized in Python, HTML5, CSS3, JavaScript, Bootstrap, etc.</p>

            <a href="#" class="btn btn-primary stretched-link">View Profile</a>

        </div>

    </div>

</div>

</body>

 

Content Types for Card

It support a wide variety of content, including images, text, list groups, links, navs, and more.

Ex.

<div class="card">

<div class="card-body">This is some text within a padded box.</div>

</div>

 

Card with Header and Footer

Using the .card-header and .card-footer class, respectively.

 

Ex.

<div class="card text-center">

<div class="card-header">Hi</div>

<div class="card-body">

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

<p class="card-text">CodersArts Bootstrap tutorial.</p>

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

</div>

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

</div>

 

Placing List Groups within Card

You can also place list groups inside the card along with other content types.

 

Ex.

<div class="card" style="width: 18rem;">

<div class="card-header">CodersArts</div>

<ul class="list-group list-group-flush">

   <li class="list-group-item">About</li>

   <li class="list-group-item">Services </li>

   <li class="list-group-item">contact </li>

</ul>

<div class="card-body">

   <a href="#" class="card-link">Add More</a>

   <a href="#" class="card-link">Share</a>

</div>

</div>

 

Set Card Background

 

Ex.

<div class="row">

    <div class="col-sm-6">

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

       <div class="card-body">

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

         <p class="card-text">Hi, codersArts </p>

       </div>

       </div>

    </div>

    <div class="col-sm-6">

        <div class="card text-white bg-secondary mb-4">

        <div class="card-body">

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

      <p class="card-text">Hi, CodersArts.</p>

       </div>

       </div>

   </div>

</div>

 

Card Border and Text

Ex.

<div class="row">

<div class="col-sm-6">

<div class="card border-primary mb-4">

<div class="card-body text-primary">

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

<p class="card-text">Hi, codersArts </p>

</div>

</div>

</div>

<div class="col-sm-6">

<div class="card border-secondary mb-4">

<div class="card-body text-secondary">

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

<p class="card-text">Hi, this is codersArts.</p>

</div>

</div>

</div>

</div>

 

Other related topics

Read and apply through Bootstrap official website.

  • Card Layout

  • Card decks- Assign all card with same width and height and each card not attached to each other. Assign space between each of them.

  • Card columns

  • Creating Horizontal card

  • Card image overlays

  • Test alignment inside card

  • Specify card size

  • Card with Stretched link

Powered  by Codersarts