In this tutorial, we are going to design a responsive blog list design using Bootstrap. The layout design comprises of a list of blog posts along with an image and title associated with it. The title is displayed over the image with gradient background in the image.
Source Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">
<style type="text/css">
body{
font-family: monospace;
background-color: lightblue;
}
h1{
border-bottom: 1px solid #dee2e6;
padding: 20px 0px;
text-align: center;
}
.news-block img{
width: 100%;
height: 100%;
object-fit: cover;
}
.news-block{
margin-top: 20px;
}
.news-block .col{
margin-bottom: 20px;
padding: 0px 20px;
}
.news-block .col div{
box-shadow: 0 3px 10px rgb(0,0,0);
position: relative;
height: 330px;
}
.news-block .col div:before{
content: '';
background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.88));
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.news-block .title{
text-align: center;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Responsive Blog List Design</h1>
</div>
<div class="row news-block">
<div class="col-lg-3 col-md-6 col-12 col">
<div>
<h4 class="title">Notebook Design using HTML & CSS</h4>
<img src="https://reeteshghimire.com.np/wp-content/uploads/2021/02/notebook.jpeg">
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 col">
<div>
<h4 class="title">Rainfall Effect using Canvas</h4>
<img src="https://reeteshghimire.com.np/wp-content/uploads/2021/03/rainfall-effect-using-canvas.png">
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 col">
<div>
<h4 class="title">Access Camera and Read QR code using JavaScript</h4>
<img src="https://reeteshghimire.com.np/wp-content/uploads/2021/05/Access-Camera-and-Read-QR-code-using-JavaScript.jpeg">
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 col">
<div>
<h4 class="title">Rotating 3D Cube effect using HTML and CSS</h4>
<img src="https://reeteshghimire.com.np/wp-content/uploads/2021/03/rotating-3d-cube-using-html-css.jpg">
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 col">
<div>
<h4 class="title">Skeleton Loading Screen Animation using HTML and CSS</h4>
<img src="https://reeteshghimire.com.np/wp-content/uploads/2021/02/skeleton-loading-screen-animation-using-html-css.jpg">
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 col">
<div>
<h4 class="title">Create an Analog Clock using HTML, CSS and jQuery</h4>
<img src="https://reeteshghimire.com.np/wp-content/uploads/2021/02/analog-clock-using-html-css-and-jquery.png">
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 col">
<div>
<h4 class="title">Random Quotes Generator using PHP API</h4>
<img src="https://reeteshghimire.com.np/wp-content/uploads/2021/02/random-quote-generator.jpg">
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 col">
<div>
<h4 class="title">Prevent Too Many Request From a Client using PHP</h4>
<img src="https://reeteshghimire.com.np/wp-content/uploads/2021/01/too-many-requests.png">
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 col">
<div>
<h4 class="title">Rotate Car using JQuery</h4>
<img src="https://reeteshghimire.com.np/wp-content/uploads/2020/11/car-rotating-using-jquery.jpg">
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 col">
<div>
<h4 class="title">Rotate Car using JQuery</h4>
<img src="https://reeteshghimire.com.np/wp-content/uploads/2020/11/car-rotating-using-jquery.jpg">
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 col">
<div>
<h4 class="title">Rotate Car using JQuery</h4>
<img src="https://reeteshghimire.com.np/wp-content/uploads/2020/11/car-rotating-using-jquery.jpg">
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 col">
<div>
<h4 class="title">Rotate Car using JQuery</h4>
<img src="https://reeteshghimire.com.np/wp-content/uploads/2020/11/car-rotating-using-jquery.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
Follow this video for complete guidance :
