Responsive image grid
<!DOCTYPE html>
<html>
<head>
<title>Responsive image grid | Par NGLESSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="Responsive image grid">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body class="container">
<div class="row">
<div class="col-lg-12">
<div class="container-fluid Blockimg">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-10">
<div class="col-md-4">
<img src="https://place-hold.it/260x200"class="img-responsive">
<span>lorem ipsum lorem ipsum </span>
<button type="button" class="btn btn-lg">Lire la suite</button>
<img src="https://place-hold.it/260x400"class="img-responsive">
<span style="top: 50%">lorem ipsum lorem ipsum</span>
<button type="button" class="btn btn-lg">Lire la suite</button>
<img src="https://place-hold.it/260x200"class="img-responsive">
<span style="top: 85%">lorem ipsum lorem ipsum lorem</span>
<button type="button" class="btn btn-lg">Lire la suite</button>
</div>
<div class="col-md-4 col-xs-12">
<img src="https://place-hold.it/260x300"class="img-responsive">
<span style="top: 18%; margin-left: 15px;">lorem ipsum lorem ipsum lorem</span>
<button type="button" class="btn btn-lg">Lire la suite</button>
<img src="https://place-hold.it/260x200"class="img-responsive">
<span style="top: 50%">lorem ipsum lorem ipsum lorem</span>
<button type="button" class="btn btn-lg">Lire la suite</button>
<img src="https://place-hold.it/260x300"class="img-responsive">
<span style="top: 85%">lorem ipsum lorem ipsum lorem?</span>
<button type="button" class="btn btn-lg">Lire la suite</button>
</div>
<div class="col-md-4 col-xs-12">
<img src="https://place-hold.it/260x200" class="img-responsive">
<span>lorem ipsum lorem ipsum lorem ipsum</span>
<button type="button" class="btn btn-lg">Lire la suite</button>
<img src="https://place-hold.it/260x400" class="img-responsive">
<span style="top: 50%">lorem ipsum lorem ipsum lorem</span>
<button type="button" class="btn btn-lg">Lire la suite</button>
<img src="https://place-hold.it/260x200" class="img-responsive">
<span style="top: 85%">lorem ipsum lorem ipsum lorem</span>
<button type="button" class="btn btn-lg">Lire la suite</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.Blockimg
{
margin-top: 30px;
}
.Blockimg img
{
width: 100%;
}
.Blockimg span
{
color: #fff;
position: absolute;
top: 10%;
text-align: center;
font-size: 20px;
text-transform: uppercase;
margin-right: 15px;
}
.Blockimg .btn-lg
{
border-radius: 0px;
background-color: #FFD51E;
width: 100%;
font-size: 11px;
margin-top: 0px;
margin-bottom: 5px;
text-transform: uppercase;
font-weight: 600;
}
