Cards
 
                                                Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere<div class="card">  <img src="image.jpg" class="card-img-top" alt="...">    <div class="card-body">      <h5 class="card-title">Card title</h5>      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>      <a href="#" class="btn btn-primary">Go somewhere</a>    </div></div>Content Types
Body
<div class="card">  <div class="card-body">    This is some text within a card body.  </div></div>Titles, text, and links
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card linkAnother link<div class="card">  <div class="card-body">    <h5 class="card-title">Card title</h5>    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>    <a href="#" class="card-link">Card link</a>    <a href="#" class="card-link">Another link</a>  </div></div>Images
 
                                                Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card">  <img src="image.jpg" class="card-img-top" alt="...">    <div class="card-body">      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>    </div></div>Body
<div class="card">  <div class="card-body">    This is some text within a card body.  </div></div>List groups
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div class="card">  <ul class="list-group list-group-flush">    <li class="list-group-item">Cras justo odio</li>    <li class="list-group-item">Dapibus ac facilisis in</li>    <li class="list-group-item">Vestibulum at eros</li>  </ul></div>- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div class="card">  <div class="card-header">    Featured  </div>  <ul class="list-group list-group-flush">    <li class="list-group-item">Cras justo odio</li>    <li class="list-group-item">Dapibus ac facilisis in</li>    <li class="list-group-item">Vestibulum at eros</li>  </ul></div>Header and footer
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card">  <div class="card-header">    Featured  </div>  <div class="card-body">    <h5 class="card-title">Special title treatment</h5>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<div class="card">  <div class="card-header">    Quote  </div>  <div class="card-body">    <blockquote class="blockquote mb-0">      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>    </blockquote>  </div></div>Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card text-center">  <div class="card-header">    Featured  </div>  <div class="card-body">    <h5 class="card-title">Special title treatment</h5>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div>  <div class="card-footer text-muted">    2 days ago  </div></div>Using grid markup
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="row">  <div class="col-sm-6">    <div class="card">      <div class="card-body">        <h5 class="card-title">Special title treatment</h5>        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>        <a href="#" class="btn btn-primary">Go somewhere</a>      </div>    </div>  </div>  <div class="col-sm-6">    <div class="card">      <div class="card-body">        <h5 class="card-title">Special title treatment</h5>        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>        <a href="#" class="btn btn-primary">Go somewhere</a>      </div>    </div>  </div></div>Navigation
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card text-center">  <div class="card-header pb-0">    <ul class="nav nav-tabs card-header-tabs">      <li class="nav-item">        <a class="nav-link active" href="#">Active</a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Link</a>      </li>      <li class="nav-item">        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>      </li>    </ul>  </div>  <div class="card-body">    <h5 class="card-title">Special title treatment</h5>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div>Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere<div class="card text-center">  <div class="card-header">    <ul class="nav nav-pills card-header-pills">      <li class="nav-item">        <a class="nav-link active" href="#">Active</a>      </li>      <li class="nav-item">        <a class="nav-link" href="#">Link</a>      </li>      <li class="nav-item">        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>      </li>    </ul>  </div>  <div class="card-body">    <h5 class="card-title">Special title treatment</h5>    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>    <a href="#" class="btn btn-primary">Go somewhere</a>  </div></div> China
China Tanzania
Tanzania United Kingdom
United Kingdom Tunisia
 Tunisia Spain
Spain 
                                             
                                             
                                             
                                             
                                            

 
                                            