<div class="row"> <div class="col-12"> <h4 class="d-inline">Card with Image code icon</h4> <!-- Row --> <div class="row"> <!-- column --> <div class="col-lg-3 col-md-6"> <!-- Card --> <div class="card"> <img class="card-img-top img-responsive" src="assets/images/big/img1.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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> <!-- Card --> </div> <!-- column --> <!-- column --> <div class="col-lg-3 col-md-6"> <!-- Card --> <div class="card"> <img class="card-img-top img-responsive" src="assets/images/big/img2.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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> <!-- Card --> </div> <!-- column --> <!-- column --> <div class="col-lg-3 col-md-6"> <!-- Card --> <div class="card"> <img class="card-img-top img-responsive" src="assets/images/big/img3.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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> <!-- Card --> </div> <!-- column --> <!-- column --> <div class="col-lg-3 col-md-6 img-responsive"> <!-- Card --> <div class="card"> <img class="card-img-top img-responsive" src="assets/images/big/img4.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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> <!-- Card --> </div> <!-- column --> </div> <!-- Row --> </div> </div> <!-- End Row --> <!-- Row --> <div class="row"> <div class="col-12 m-t-30"> <h4 class="m-b-0">Content types</h4> <p class="text-muted m-t-0">The building block of a card is the <code>.card</code> <code>.card-body</code> Use it whenever you need a padded section within a card.</p> <div class="card"> <div class="card-body collapse show"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> </div> <!-- End Row --> <!-- Row --> <div class="row"> <div class="col-12 m-t-30"> <h4 class="m-b-0">Titles, text, and links</h4> <p class="text-muted m-t-0">Card titles are used by adding <code>.card-title</code> & <code>.card-subtitle</code> for subtitle of card.</p> <div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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> </div> </div> <!-- End Row --> <!-- Row --> <div class="row"> <div class="col-12 m-t-30"> <h4 class="m-b-0">Header and footer</h4> <p class="text-muted m-t-0 font-12">Add an optional header and/or footer within a card.</p> <!-- Card --> <div class="card"> <div class="card-header"> Featured </div> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <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> <!-- Card --> </div> </div> <!-- End Row --> <!-- Row --> <div class="row"> <div class="col-12 m-t-30"> <h4 class="m-b-0">Header and footer</h4> <p class="text-muted m-t-0 font-12">Add an optional header and/or footer within a card. </p> <!-- Card --> <div class="card text-center"> <div class="card-header"> Featured </div> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-info">Go somewhere</a> </div> <div class="card-footer text-muted"> 2 days ago </div> </div> <!-- Card --> </div> </div> <!-- End Row --> <!-- Row --> <div class="row"> <div class="col-12 m-t-30"> <h4 class="m-b-0">Size Using grid markup</h4> <p class="text-muted m-t-0 font-12">Using the grid, wrap cards in columns and rows as needed.<code>.col-1 to .col-12</code></p> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-success">Go somewhere</a> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <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> <!-- End Row --> <!-- Row --> <div class="row"> <div class="col-12 m-t-30"> <h4 class="m-b-0">Text alignment</h4> <p class="text-muted m-t-0 font-12">You can quickly change the text alignment<code>.text-center .text-right</code>.</p> </div> <div class="col-md-4"> <div class="card"> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-info">Go somewhere</a> </div> </div> </div> <div class="col-md-4"> <div class="card text-center"> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <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-md-4"> <div class="card text-right"> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-inverse">Go somewhere</a> </div> </div> </div> </div> <!-- End Row --> <!-- Row --> <div class="row"> <div class="col-12 m-t-30"> <h4 class="m-b-0">Using utilities</h4> <p class="text-muted m-t-0 font-12">Using the utility, you can give direct width class to card like<code>.w-25, w-50, w-75, w-100</code></p> <div class="card w-75"> <div class="card-body"> <h3 class="card-title">This card has width of 75%</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-danger">Go somewhere</a> </div> </div> <div class="card w-50"> <div class="card-body"> <h3 class="card-title">This card has width of 50%</h3> <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> <!-- End Row --> <!-- Row --> <div class="row"> <div class="col-12 m-t-30"> <h4 class="m-b-0">Size Using grid markup</h4> <p class="text-muted m-t-0 font-12">Using the grid, wrap cards in columns and rows as needed.<code>.col-1 to .col-12</code></p> </div> <div class="col-md-6"> <div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a class="nav-link active" href="javascript:void(0)">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-inverse">Go somewhere</a> </div> </div> </div> <div class="col-md-6"> <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="javascript:void(0)">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="javascript:void(0)">Disabled</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-info">Go somewhere</a> </div> </div> </div> </div> <!-- End Row --> <!-- Row --> <div class="row"> <div class="col-12 m-t-30"> <h4 class="m-b-0">Card styles</h4> <p class="text-muted m-t-0 font-12">Cards include various options for customizing their backgrounds, borders, and color.<code>.card-primary info, warning, danger</code></p> </div> <div class="col-md-6"> <div class="card card-inverse" style="background-color: #333; border-color: #333;"> <div class="card-header"> <h4 class="m-b-0 text-white">Card Title</h4></div> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <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-md-6"> <div class="card card-inverse card-info"> <div class="card-header"> <h4 class="m-b-0 text-white">Card Title</h4></div> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-inverse">Go somewhere</a> </div> </div> </div> <div class="col-md-6"> <div class="card card-inverse card-primary"> <div class="card-header"> <h4 class="m-b-0 text-white">Card Title</h4></div> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-inverse">Go somewhere</a> </div> </div> </div> <div class="col-md-6"> <div class="card card-inverse card-danger"> <div class="card-header"> <h4 class="m-b-0 text-white">Card Title</h4></div> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-inverse">Go somewhere</a> </div> </div> </div> <div class="col-md-6"> <div class="card card-inverse card-warning"> <div class="card-header"> <h4 class="m-b-0 text-white">Card Title</h4></div> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-inverse">Go somewhere</a> </div> </div> </div> <div class="col-md-6"> <div class="card card-inverse card-success"> <div class="card-header"> <h4 class="m-b-0 text-white">Card Title</h4></div> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-inverse">Go somewhere</a> </div> </div> </div> </div> <!-- End Row --> <!-- Row --> <div class="row"> <div class="col-12 m-t-30"> <h4 class="m-b-0">Card styles</h4> <p class="text-muted m-t-0 font-12">Cards include various options for customizing their backgrounds, borders, and color.<code>.card-primary info, warning, danger</code></p> </div> <div class="col-md-6"> <div class="card card-outline-inverse"> <div class="card-header"> <h4 class="m-b-0 text-white">Card Title</h4></div> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <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-md-6"> <div class="card card-outline-info"> <div class="card-header"> <h4 class="m-b-0 text-white">Card Title</h4></div> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-inverse">Go somewhere</a> </div> </div> </div> <div class="col-md-6"> <div class="card card-outline-primary"> <div class="card-header"> <h4 class="m-b-0 text-white">Card Title</h4></div> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-inverse">Go somewhere</a> </div> </div> </div> <div class="col-md-6"> <div class="card card-outline-danger"> <div class="card-header"> <h4 class="m-b-0 text-white">Card Title</h4></div> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-inverse">Go somewhere</a> </div> </div> </div> <div class="col-md-6"> <div class="card card-outline-warning"> <div class="card-header"> <h4 class="m-b-0 text-white">Card Title</h4></div> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-inverse">Go somewhere</a> </div> </div> </div> <div class="col-md-6"> <div class="card card-outline-success"> <div class="card-header"> <h4 class="m-b-0 text-white">Card Title</h4></div> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" class="btn btn-inverse">Go somewhere</a> </div> </div> </div> </div> <!-- End Row --> <!-- Row --> <div class="row"> <div class="col-12 m-t-30"> <h4 class="m-b-0">Card Groups</h4> <p class="text-muted m-t-0 font-12">Use card groups to render cards as a single, attached element with equal width and height columns.</p> <div class="card-group"> <div class="card"> <img class="card-img-top img-responsive" src="assets/images/big/img1.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">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 img-responsive" src="assets/images/big/img2.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">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 img-responsive" src="assets/images/big/img3.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">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> </div> </div> <!-- End Row --> <h4 class="m-t-40">Card With action</h4> <p class="text-muted m-t-0 font-12">With action elements.</p> <div class="card"> <div class="card-header"> Title <div class="card-actions"> <a class="btn-minimize" data-perform="card-collapse"><i class="ti-minus"></i></a> <a class="btn-close"><i class="ti-close"></i></a> </div> </div> <div class="card-body collapse show"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> </div> <!-- Row --> <div class="row"> <div class="col-12 m-t-30"> <h4 class="m-b-0">Card with Deck</h4> <p class="text-muted m-t-0 font-12">Use card groups to render cards as a single, attached element with equal width and height columns.</p> <div class="card-deck"> <div class="card"> <img class="card-img-top img-responsive" src="assets/images/big/img1.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">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 img-responsive" src="assets/images/big/img2.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural.</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 img-responsive" src="assets/images/big/img3.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">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. 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> </div> </div> <!-- End Row --> <!-- Row --> <div class="row"> <div class="col-12 m-t-30"> <h4 class="m-b-0">Card columns</h4> <p class="text-muted m-t-0 font-12">Cards can be organized into Masonry-like columns with just CSS by wrapping them in <code>card-columns</code></p> <div class="card-columns"> <div class="card"> <img class="card-img-top img-fluid" src="assets/images/big/img6.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title that wraps to a new line</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> <div class="card p-3"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </div> <div class="card"> <img class="card-img-top img-fluid" src="assets/images/big/img5.jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">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 card-inverse bg-primary p-3 text-center text-white"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </div> <div class="card text-center"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">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 img-fluid" src="assets/images/big/img4.jpg" alt="Card image"> </div> <div class="card p-3 text-right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </div> <div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">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> </div> </div> <!-- End Row -->