Card : subtite, links & headings

Card Title

Subtitle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.

Read more Another Link

Card : borders

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card : bg colors

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card : text alignment center, end, default

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Card : quotes

Quote

A well-known quote, contained in a blockquote element.

Card : specials

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Card : card with top image

Card Title

Subtitle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.

Read more Another Link

Card : image with all corner round

Card Title

Subtitle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.

Read more Another Link

Card : card with bottom image

Card Title

Subtitle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.

Read more Another Link

Card : nav links in header with text in footer

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.

Card : with list group

  • Lorem ipsum dolor.
  • Lorem ipsum dolor.
  • Lorem ipsum dolor.
  • Lorem ipsum dolor.

Card : horizontal card

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.

Card : image overlay

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.

Card : simple card group

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing .

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.

Card : card group with footer

...
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.

...
Card title

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

...
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.

Card : card group with 2 col

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card : card group with 3 col

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

...
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Exported from Notepad++
<!DOCTYPR html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BootStrap</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <style> .container{ border: 5px solid #000; margin-bottom:3px; } </style> </head> <body> <!-- subtite, links & headings --> <div class="container"> <h2 class="py-2 text-center">Card : subtite, links & headings</h2> <div class="row py-2"> <div class="col-md-6"> <div class="card mb-3 border-success text-success"> <!-- <img src="road.jpg" class="card-img-top" alt=""> --> <div class="card-body"> <h4 class="card-title">Card Title</h4> <h5 class="card-subtitle text-muted">Subtitle </h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.</p> <a href="" class="card-link">Read more</a> <a href="" class="card-link">Another Link</a> </div> </div> </div> </div> </div> <!-- borders --> <div class="container"> <h2 class="py-2 text-center">Card : borders</h2> <div class="row py-2"> <div class="col-md-6"> <div class="card border-primary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body text-primary"> <h5 class="card-title">Primary 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> </div> </div> </div> </div> </div> <!-- bg color --> <div class="container"> <h2 class="py-2 text-center">Card : bg colors</h2> <div class="row py-2"> <div class="col-md-6"> <div class="card text-white bg-primary mb-3" style="max-width: 18rem;"> <div class="card-header">Header</div> <div class="card-body"> <h5 class="card-title">Primary 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> </div> </div> </div> </div> </div> <!-- text alignment center, end, default --> <div class="container"> <h2 class="py-2 text-center">Card : text alignment center, end, default </h2> <div class="row py-2"> <div class="col-md-6"> <div class="card text-end" style="width: 18rem;"> <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> </div> <!-- quotes --> <div class="container"> <h2 class="py-2 text-center">Card : quotes </h2> <div class="row py-2"> <div class="col-md-8"> <div class="card"> <div class="card-header"> Quote </div> <div class="card-body"> <blockquote class="blockquote mb-0"> <p>A well-known quote, contained in a blockquote element.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div> </div> </div> </div> <!-- specials --> <div class="container"> <h2 class="py-2 text-center">Card : specials </h2> <div class="row py-2 justify-content-center"> <div class="col-md-8"> <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> </div> </div> </div> <!-- card with top image --> <div class="container"> <h2 class="py-2 text-center">Card : card with top image</h2> <div class="row py-2"> <div class="col-md-6"> <div class="card mb-3 border-success text-success"> <img src="road.jpg" class="card-img-top" alt=""> <div class="card-body"> <h4 class="card-title">Card Title</h4> <h5 class="card-subtitle text-muted">Subtitle </h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.</p> <a href="" class="card-link">Read more</a> <a href="" class="card-link">Another Link</a> </div> </div> </div> </div> </div> <!-- image with all corner round --> <div class="container"> <h2 class="py-2 text-center">Card : image with all corner round</h2> <div class="row py-2"> <div class="col-md-6"> <div class="card mb-3 border-success text-success"> <img src="road.jpg" class="card-img" alt=""> <div class="card-body"> <h4 class="card-title">Card Title</h4> <h5 class="card-subtitle text-muted">Subtitle </h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.</p> <a href="" class="card-link">Read more</a> <a href="" class="card-link">Another Link</a> </div> </div> </div> </div> </div> <!-- card with bottom image --> <div class="container"> <h2 class="py-2 text-center"> Card : card with bottom image</h2> <div class="row py-2"> <div class="col-md-6"> <div class="card mb-3 border-success text-success"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <h5 class="card-subtitle text-muted">Subtitle </h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.</p> <a href="" class="card-link">Read more</a> <a href="" class="card-link">Another Link</a> </div> <img src="images/road.jpg" class="card-img-bottom" alt=""> </div> </div> </div> </div> <!-- nav links in header with text in footer --> <div class="container"> <h2 class="py-2 text-center">Card : nav links in header with text in footer</h2> <div class="row py-2"> <div class="col-md-6"> <div class="card mb-3"> <div class="card-header"> <ul class="nav nav-pills card-header-pills"> <li class="nav-item"> <a href="" class="nav-link">Link One</a> </li> <li class="nav-item"> <a href="" class="nav-link">Link Two</a> </li> <li class="nav-item"> <a href="" class="nav-link">Link Three</a> </li> <li class="nav-item"> <a href="" class="nav-link">Link Four</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.</p> </div> <div class="card-footer text-muted">Footer Goes Here</div> </div> </div> </div> </div> <!-- with list group --> <div class="container"> <h2 class="py-2 text-center">Card : with list group</h2> <div class="row py-2"> <div class="col-md-4"> <div class="card"> <img src="road.jpg" class="card-img-top" alt=""> <ul class="list-group list-group-flush"> <li class="list-group-item">Lorem ipsum dolor.</li> <li class="list-group-item">Lorem ipsum dolor.</li> <li class="list-group-item">Lorem ipsum dolor.</li> <li class="list-group-item">Lorem ipsum dolor.</li> </ul> </div> </div> </div> </div> <!-- horizontal card --> <div class="container"> <h2 class="py-2 text-center">Card : horizontal card</h2> <div class="row py-2"> <div class="col-md-7"> <div class="card"> <div class="row no-gutters"> <div class="col-md-4"> <img src="road.jpg" class="card-img" alt=""> </div> <div class="col-md-8"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.</p> </div> </div> </div> </div> </div> </div> </div> <!-- image overlay --> <div class="container"> <h2 class="py-2 text-center">Card : image overlay</h2> <div class="row py-2"> <div class="col-md-4"> <div class="card text-white"> <img src="road.jpg" class="card-img" alt=""> <div class="card-img-overlay"> <h4 class="card-title">Card Title</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.</p> <button class="btn btn-primary">Read More</button> </div> </div> </div> </div> </div> <!-- simple card group --> <div class="container"> <h2 class="py-2 text-center">Card : simple card group </h2> <div class="row py-2"> <div class="col"> <div class="card-group"> <div class="card"> <img src="road.jpg" class="card-img-top" alt=""> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.</p> </div> </div> <div class="card"> <img src="road.jpg" class="card-img-top" alt=""> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing .</p> </div> </div> <div class="card"> <img src="road.jpg" class="card-img-top" alt=""> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus iste dicta soluta alias aspernatur similique consequatur.</p> </div> </div> </div> </div> </div> </div> <!-- card group with footer --> <div class="container"> <h2 class="py-2 text-center">Card : card group with footer </h2> <div class="row py-2"> <div class="col"> <div class="card-group"> <div class="card"> <img src="road.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <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> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> <div class="card"> <img src="road.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> <div class="card"> <img src="road.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <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> </div> <div class="card-footer"> <small class="text-muted">Last updated 3 mins ago</small> </div> </div> </div> </div> </div> </div> <!-- card group with 2 col --> <div class="container"> <h2 class="py-2 text-center">Card : card group with 2 col </h2> <div class="row row-cols-1 row-cols-md-2 g-4"> <!-- row-cols-1 = below md this will happen , can use row-cols-3, insted of --> <div class="col"> <div class="card"> <img src="road.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <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> <div class="col"> <div class="card"> <img src="road.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <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> <div class="col"> <div class="card"> <img src="road.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="col"> <div class="card"> <img src="road.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <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> </div> </div> <!-- card group with 3 col --> <div class="container"> <h2 class="py-2 text-center">Card : card group with 3 col </h2> <div class="row row-cols-1 row-cols-md-3 g-4"> <!-- row-cols-1 = below md this will happen , can use row-cols-3, insted of --> <div class="col"> <div class="card"> <img src="road.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <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> <div class="col"> <div class="card"> <img src="road.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <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> <div class="col"> <div class="card"> <img src="road.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> <div class="col"> <div class="card"> <img src="road.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <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> </div> </div> </body> </html>