title: How to make the images in my html all equal in size?
body: <p>I am learning Bootstrap and in my html page I have used its version 4. In the code I have used "card" to give a shape to images but the images remain elongated not aligned. <a href="https://codepen.io/ebad07/pen/NwXmxa" rel="nofollow noreferrer">Here is my code</a> If anyone can help. I have mentioned in the code where I need help.If you go  to the Codepen site you will find the error</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Image Gallery&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"&gt;
  &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  &lt;style type="text/css"&gt;
       body { padding-top: 70px; }
      .material-icons { font-size: 38px; }
      .card { 
          margin: 10px 0; 
          }
      .flex {
            display: flex;
            flex-wrap: wrap;
          }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;nav &gt;
      &lt;nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark"&gt;
          &lt;button  class="navbar-toggler" type="button" data-toggle="collapse" 
          data-target="#nav-content" aria-controls="nav-content" aria-
          expanded="false" aria-label="Toggle navigation"&gt;
           &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;!-- Brand --&gt;
          &lt;a class="navbar-brand" href="#"&gt;PICS&lt;/a&gt;
  
          &lt;!-- Links --&gt;
          &lt;div class="collapse navbar-collapse" id="nav-content"&gt;   
          &lt;ul class="navbar-nav mr-auto"&gt;
              &lt;li class="nav-item active"&gt;
                  &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="#"&gt;Contacts&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;!--Search--&gt;
          &lt;form class="form-inline my-2 my-lg-0"&gt;
              &lt;input class="form-control mr-sm-2" type="search"   placeholder= "Search"  aria-label="Search"&gt;
              &lt;button class="btn btn-outline-success my-2 my-sm-0" type=" submit"&gt;Search&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/nav&gt;
  &lt;div class="container"&gt;
      &lt;div class="jumbotron" style="background-color: #CCCDCE"&gt;
          &lt;h1&gt;&lt;i class="material-icons"&gt;photo_camera&lt;/i&gt; The Image Gallery&lt;/h1&gt;
          &lt;p&gt; My first image gallery creation&lt;/p&gt;
      &lt;/div&gt;
      &lt;!--I NEED HELP HERE--&gt;
      &lt;div class="row flex"&gt;
          &lt;div class="col-lg-4 col-sm-6"&gt;
              &lt;div class="card"&gt;
                  &lt;img src="https://source.unsplash.com/ucdh5HMkRMg"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-4 col-sm-6"&gt;
              &lt;div class="card"&gt;
                  &lt;img src="https://source.unsplash.com/tLNRTxieD7k"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-4 col-sm-6"&gt;
              &lt;div class="card"&gt;
                  &lt;img src="https://source.unsplash.com/TxoMYFip9d0"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row flex"&gt;
          &lt;div class="col-lg-4 col-sm-6"&gt;
              &lt;div class="card"&gt;
                  &lt;img src="https://source.unsplash.com/bJHWJeiHfHc"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-4 col-sm-6"&gt;
              &lt;div class="card "&gt;
                  &lt;img src="https://source.unsplash.com/tGTVxeOr_Rs"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-4 col-sm-6"&gt;
              &lt;div class="card"&gt;
                  &lt;img src="https://source.unsplash.com/Lm5rkxzgiFQ"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row flex"&gt;
          &lt;div class="col-lg-4 col-sm-6"&gt;
              &lt;div class="card"&gt;
                  &lt;img src="https://source.unsplash.com/Ecxnzl-FbV4"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-4 col-sm-6"&gt;
              &lt;div class="card"&gt;
                  &lt;img src="https://source.unsplash.com/dfo06_DqxpA"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-lg-4 col-sm-6"&gt;
              &lt;div class="card"&gt;
                  &lt;img src="https://source.unsplash.com/_iP1Vf1WzrE"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;!--JQuery--&gt;
  &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;!-- Popper --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;!--JS--&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>
  </p>