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.
 |
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"> 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"> 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"> 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"> 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"> 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"> 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"> 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"> 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 :
|
|
|
|
|
632 Views |
|