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;
    
}

                                    
Vidéo background en html5 style01

Vidéo background en html5 style01

Scroll to div ID

Scroll to div ID

Nav Menu style02

Nav Menu style02

Image hover 06

Image hover 06

Gallery images with bootstrap4 Flexbox

Gallery images with bootstrap4 Flexbox

Form login et créer un compte style01

Form login et créer un compte style01

Form contact avec validation en css

Form contact avec validation en css

Elastic Content Slider

Elastic Content Slider

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Ajouter multiple input dynamique

Ajouter multiple input dynamique

Affichage des images aléatoire avec js

Affichage des images aléatoire avec js