BootStrap

<!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>  <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">  <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>  <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>  <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>  <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>  <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>  <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>  <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>  <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>  <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>  <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>  <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>  <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>  <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>  <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>  <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>  <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">  <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>  <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">  <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>