Bootstrap5 blog template example

Published October 08, 2021


In this bootstrap5 examples i will show how to create a simple blog with bootstrap5. This is a simple blog template which will work in both mobile and desktops.

Bootstrap5 blog template

 

Let's check the simple blog template example code with bootstrap5

In our example html file first we need to add bootstrap5 css and js files

bootstrap5 css:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

 

Now add bootstrap5 js file inside body of the last line

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

 

Here is the complete blog template example code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
    a {
    color: #e3220f;
    text-decoration: underline;
}
</style>
      <title>Bootstrap 5 Blog Template</title>
</head>
<body>
<section class="pt-5 pb-5">
    <div class="container">
        <h1>Bootstrap5 Blog Template</h1>
          <div class="row">
            <div class="col-lg-7 mb-4">
             <div>
                  <img class="img-fluid rounded mb-3" src="https://c1.wallpaperflare.com/preview/823/579/815/beach-clouds-photos-girl.jpg" alt="2021 All What You Need To Know About Bootstrap 5"><a href="#" class="mt-4 h2 text-dark">2021 All What You Need To Know About Bootstrap 5...</a>
<p class="mt-4">Bootstrap is possibly the most used framework to design websites due to its versatility of use. Even, many website users have already replaced the CSS and JS of Bootstrap 5 obtaining a web with a fantastic performance without the need to do any complete migration. Be careful, this does not mean that the same thing happens to you. Still, I want to invite you to review the components and features of this new version.</p>

                <div class="d-flex text-small">
                    <a href="#">Programming</a>
                    <span class="text-muted ml-1">02th October</span>
                  </div>
             </div> <div>
                  <img class="img-fluid rounded mb-3" src="https://c1.wallpaperflare.com/preview/823/579/815/beach-clouds-photos-girl.jpg" alt="2021 All What You Need To Know About Bootstrap 5"><a href="#" class="mt-4 h2 text-dark">2021 All What You Need To Know About Bootstrap 5...</a>
<p class="mt-4">Bootstrap is possibly the most used framework to design websites due to its versatility of use. Even, many website users have already replaced the CSS and JS of Bootstrap 5 obtaining a web with a fantastic performance without the need to do any complete migration. Be careful, this does not mean that the same thing happens to you. Still, I want to invite you to review the components and features of this new version.</p>

                <div class="d-flex text-small">
                    <a href="#">Programming</a>
                    <span class="text-muted ml-1">02th October</span>
                  </div>
             </div>

            </div>
            <div class="col-lg-5 ">
              <ul class="list-unstyled">
              <li class="row mb-4">
                <a href="#" class="col-3">
                  <img src="https://rrtutors.com/uploads/langpostimg/bootstrap-logo.JPG" alt="Bootstrap5 Card Example" class="rounded img-fluid">
                </a>
                <div class="col-9">
                  <a href="https://rrtutors.com/tutorials/how-do-i-create-html-card-with-bootstrap5">
                    <h6 class="mb-3 h5 text-dark">Bootstrap5 Card Example</h6>
                  </a>
                  <div class="d-flex text-small">
                    <a href="#">Programming</a>
                    <span class="text-muted ml-1">&nbsp;12th September</span>
                  </div>
                </div>
              </li>

                  <li class="row mb-4">
                <a href="#" class="col-3">
                  <img src="https://cdn.stocksnap.io/img-thumbs/960w/business-people_DUXISHKTT3.jpg" alt="Bootstrap5 Card Example" class="rounded img-fluid">
                </a>
                <div class="col-9">
                  <a href="https://rrtutors.com/tutorials/how-do-i-create-html-card-with-bootstrap5">
                    <h6 class="mb-3 h5 text-dark">Business People Free Stock CC0 Photo - StockSnap.io</h6>
                  </a>
                  <div class="d-flex text-small">
                    <a href="#">Programming</a>
                    <span class="text-muted ml-1">&nbsp;29th November</span>
                  </div>
                </div>
              </li>
                  <li class="row mb-4">
                <a href="#" class="col-3">
                  <img src="https://c1.wallpaperflare.com/preview/428/584/38/silhouette-person-man-human.jpg" alt="Bootstrap5 Card Example" class="rounded img-fluid">
                </a>
                <div class="col-9">
                  <a href="https://rrtutors.com/tutorials/how-do-i-create-html-card-with-bootstrap5">
                    <h6 class="mb-3 h5 text-dark">
HD wallpaper: silhouette of man, Person, Human, Sunset, shadow play, back light | Wallpaper Flare</h6>
                  </a>
                  <div class="d-flex text-small">
                    <a href="#">Programming</a>
                    <span class="text-muted ml-1">&nbsp;29th November</span>
                  </div>
                </div>
              </li>  <li class="row mb-4">
                <a href="#" class="col-3">
                  <img src="https://c1.wallpaperflare.com/preview/428/584/38/silhouette-person-man-human.jpg" alt="Bootstrap5 Card Example" class="rounded img-fluid">
                </a>
                <div class="col-9">
                  <a href="https://rrtutors.com/tutorials/how-do-i-create-html-card-with-bootstrap5">
                    <h6 class="mb-3 h5 text-dark">
HD wallpaper: silhouette of man, Person, Human, Sunset, shadow play, back light | Wallpaper Flare</h6>
                  </a>
                  <div class="d-flex text-small">
                    <a href="#">Programming</a>
                    <span class="text-muted ml-1">&nbsp;29th November</span>
                  </div>
                </div>
              </li>  <li class="row mb-4">
                <a href="#" class="col-3">
                  <img src="https://c1.wallpaperflare.com/preview/428/584/38/silhouette-person-man-human.jpg" alt="Bootstrap5 Card Example" class="rounded img-fluid">
                </a>
                <div class="col-9">
                  <a href="https://rrtutors.com/tutorials/how-do-i-create-html-card-with-bootstrap5">
                    <h6 class="mb-3 h5 text-dark">
HD wallpaper: silhouette of man, Person, Human, Sunset, shadow play, back light | Wallpaper Flare</h6>
                  </a>
                  <div class="d-flex text-small">
                    <a href="#">Programming</a>
                    <span class="text-muted ml-1">&nbsp;29th November</span>
                  </div>
                </div>
              </li>  <li class="row mb-4">
                <a href="#" class="col-3">
                  <img src="https://c1.wallpaperflare.com/preview/428/584/38/silhouette-person-man-human.jpg" alt="Bootstrap5 Card Example" class="rounded img-fluid">
                </a>
                <div class="col-9">
                  <a href="https://rrtutors.com/tutorials/how-do-i-create-html-card-with-bootstrap5">
                    <h6 class="mb-3 h5 text-dark">
HD wallpaper: silhouette of man, Person, Human, Sunset, shadow play, back light | Wallpaper Flare</h6>
                  </a>
                  <div class="d-flex text-small">
                    <a href="#">Programming</a>
                    <span class="text-muted ml-1">&nbsp;29th November</span>
                  </div>
                </div>
              </li>  <li class="row mb-4">
                <a href="#" class="col-3">
                  <img src="https://c1.wallpaperflare.com/preview/428/584/38/silhouette-person-man-human.jpg" alt="Bootstrap5 Card Example" class="rounded img-fluid">
                </a>
                <div class="col-9">
                  <a href="https://rrtutors.com/tutorials/how-do-i-create-html-card-with-bootstrap5">
                    <h6 class="mb-3 h5 text-dark">
HD wallpaper: silhouette of man, Person, Human, Sunset, shadow play, back light | Wallpaper Flare</h6>
                  </a>
                  <div class="d-flex text-small">
                    <a href="#">Programming</a>
                    <span class="text-muted ml-1">&nbsp;29th November</span>
                  </div>
                </div>
              </li>  <li class="row mb-4">
                <a href="#" class="col-3">
                  <img src="https://c1.wallpaperflare.com/preview/428/584/38/silhouette-person-man-human.jpg" alt="Bootstrap5 Card Example" class="rounded img-fluid">
                </a>
                <div class="col-9">
                  <a href="https://rrtutors.com/tutorials/how-do-i-create-html-card-with-bootstrap5">
                    <h6 class="mb-3 h5 text-dark">
HD wallpaper: silhouette of man, Person, Human, Sunset, shadow play, back light | Wallpaper Flare</h6>
                  </a>
                  <div class="d-flex text-small">
                    <a href="#">Programming</a>
                    <span class="text-muted ml-1">&nbsp;29th November</span>
                  </div>
                </div>
              </li>

            </ul>
            </div>
          </div>
        </div>
      </section>

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>
</html>

 

 

Conclusion: In this bootstrap5 tutorial we create simple blog template.

Related

Bootstrap5 E-Commerce Template


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

92 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions