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: Now add bootstrap5 js file inside body of the last line Here is the complete blog template example code Conclusion: In this bootstrap5 tutorial we create simple blog template. Related
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- 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>
<!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>
|
Article Contributed By :
|
|
|
|
|
563 Views |
|