Gallery images with bootstrap4 Flexbox

<!DOCTYPE html>
<html>
<head>
  <title>Gallery images with bootstrap4 Flexbox | 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="author" content="Mezgani said">
  <meta name="copyright" content="NGLESSON">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container-fluid">
    <div class="d-flex flex-row flex-wrap justify-content-center">
        <div class="d-flex flex-column">
            <img src="https://images.unsplash.com/photo-1485963631004-f2f00b1d6606?auto=format&fit=crop&w=668&q=80" class="img-fluid">            
            <img src="https://images.unsplash.com/photo-1502865787650-3f8318917153?auto=format&fit=crop&w=334&q=80" class="img-fluid">
        </div>
        <div class="d-flex flex-column">
            <img src="https://images.unsplash.com/photo-1500816558239-6b91f4256ead?auto=format&fit=crop&w=331&q=80" class="img-fluid">
            <img src="https://images.unsplash.com/photo-1487376318617-f43c7b41e2e2?auto=format&fit=crop&w=750&q=80" class="img-fluid scale">
        </div>
        <div class="d-flex flex-column">
            <img src="https://images.unsplash.com/photo-1497888329096-51c27beff665?auto=format&fit=crop&w=751&q=80" class="img-fluid scale mb-2">
            <img src="https://images.unsplash.com/photo-1505253468034-514d2507d914?auto=format&fit=crop&w=334&q=80"  class="img-fluid">
        </div>
        <div class="d-flex flex-column">
            <img src="https://images.unsplash.com/photo-1502550900787-e956c314a221?auto=format&fit=crop&w=334&q=80" class="img-fluid m-1 p-1">
              <img src="https://images.unsplash.com/photo-1455853659719-4b521eebc76d?auto=format&fit=crop&w=750&q=80" class="img-fluid image m-1 p-1">
        </div>
    </div>
  </div>
</body>
</html>
.container {
  background: #f9f9f9;
}

.flex-column {
  max-width: 260px;
}

img {
  margin: 5px;
}

.scale {
  transform: scaleY(1.05);
  padding-top: 5px; 
}

                                    
input file récupérer le nom du fichier

input file récupérer le nom du fichier

Up Down Animation With CSS Style01

Up Down Animation With CSS Style01

Tablet style code texte

Tablet style code texte

Nav Menu style01

Nav Menu style01

Image hover style border top

Image hover style border top

Image hover effects style

Image hover effects style

Image hover Flip Flap Style

Image hover Flip Flap Style

Form Step With B4 Style01

Form Step With B4 Style01

Background overlay

Background overlay

Asidebar Menu Style01

Asidebar Menu Style01

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table