title: Equal height and width boxes in Bootstrap?
body: <p>I am trying to make the bottom right greyish box (the one without image) same height and width as other boxes with images. It is supposed to be responsive but if I manage to make it fit this resolution it doesn't work in other resolutions. I tried with flexbox but couldn't make it work. I am using Bootstrap as you can see. I also tried using vh and vw but no luck...</p>
  
  <p>I would really appreciate if someone with more experience could tell me the proper way to do this? Thanks all for reading and trying to help!</p>
  
  <p>Here is the screenshot of what I am trying to achieve:<a href="https://i.stack.imgur.com/dNYSz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dNYSz.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my code so far:</p>
  
  <pre><code>&lt;!-- T E A M   S E C T I O N --&gt;
  &lt;section id="team" class="no-padding"&gt;
      &lt;div class="container-fluid"&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center"&gt;
                  &lt;h1&gt;&lt;span class="orange"&gt;[ &lt;/span&gt;Meet Our Team&lt;span class="orange"&gt; ]&lt;/span&gt;&lt;/h1&gt;
                  &lt;p&gt;A perfect blend of creativity and technical wizardry.&lt;/br&gt;The best people formula for great websites!&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row no-gutter"&gt;
  
              &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"&gt;
                  &lt;a class="team-box" rel="" href="img/team/1.jpg" title=""&gt;
                      &lt;img src="img/team/1.jpg" class="img-responsive" alt=""&gt;
                      &lt;div class="team-box-caption"&gt;
                          &lt;div class="team-box-caption-content"&gt;
                              &lt;div class="name"&gt;
                                  Full Name
                              &lt;/div&gt;
                              &lt;div class="position"&gt;
                                  Position
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"&gt;
                  &lt;a class="team-box" rel="" href="img/team/2.jpg" title=""&gt;
                      &lt;img src="img/team/2.jpg" class="img-responsive" alt=""&gt;
                      &lt;div class="team-box-caption"&gt;
                          &lt;div class="team-box-caption-content"&gt;
                              &lt;div class="name"&gt;
                                  Full Name
                              &lt;/div&gt;
                              &lt;div class="position"&gt;
                                  Position
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"&gt;
                  &lt;a class="team-box" rel="" href="img/team/3.jpg" title=""&gt;
                      &lt;img src="img/team/3.jpg" class="img-responsive" alt=""&gt;
                      &lt;div class="team-box-caption"&gt;
                          &lt;div class="team-box-caption-content"&gt;
                              &lt;div class="name"&gt;
                                  Full Name
                              &lt;/div&gt;
                              &lt;div class="position"&gt;
                                  Position
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"&gt;
                  &lt;a class="team-box" rel="" href="img/team/4.jpg" title=""&gt;
                      &lt;img src="img/team/4.jpg" class="img-responsive" alt=""&gt;
                      &lt;div class="team-box-caption"&gt;
                          &lt;div class="team-box-caption-content"&gt;
                              &lt;div class="name"&gt;
                                  Full Name
                              &lt;/div&gt;
                              &lt;div class="position"&gt;
                                  Position
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"&gt;
                  &lt;a class="team-box" rel="" href="img/team/5.jpg" title=""&gt;
                      &lt;img src="img/team/5.jpg" class="img-responsive" alt=""&gt;
                      &lt;div class="team-box-caption"&gt;
                          &lt;div class="team-box-caption-content"&gt;
                              &lt;div class="name"&gt;
                                  Full Name
                              &lt;/div&gt;
                              &lt;div class="position"&gt;
                                  Position
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"&gt;
                  &lt;a class="team-box" rel="" href="img/team/6.jpg" title=""&gt;
                      &lt;img src="img/team/6.jpg" class="img-responsive" alt=""&gt;
                      &lt;div class="team-box-caption"&gt;
                          &lt;div class="team-box-caption-content"&gt;
                              &lt;div class="name"&gt;
                                  Full Name
                              &lt;/div&gt;
                              &lt;div class="position"&gt;
                                  Position
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"&gt;
                  &lt;a class="team-box" rel="" href="img/team/7.jpg" title=""&gt;
                      &lt;img src="img/team/7.jpg" class="img-responsive" alt=""&gt;
                      &lt;div class="team-box-caption"&gt;
                          &lt;div class="team-box-caption-content"&gt;
                              &lt;div class="name"&gt;
                                  Full Name
                              &lt;/div&gt;
                              &lt;div class="position"&gt;
                                  Position
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"&gt;
                  &lt;a class="team-box" rel="" href="img/team/8.jpg" title=""&gt;
                      &lt;img src="img/team/8.jpg" class="img-responsive" alt=""&gt;
                      &lt;div class="team-box-caption"&gt;
                          &lt;div class="team-box-caption-content"&gt;
                              &lt;div class="name"&gt;
                                  Full Name
                              &lt;/div&gt;
                              &lt;div class="position"&gt;
                                  Position
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-4"&gt;
                  &lt;div class="team-box"&gt;
                      &lt;div class="team-box-last"&gt;
                          &lt;h3&gt;Want to join our team?&lt;/h3&gt;
                          &lt;p&gt;We’re always looking for talented designers, developers, project managers and anyone who’s driven and has a passion for the digital industries.
                          &lt;/p&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Check our jobs page&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="mailto: info@squares.com"&gt;Send us your CV&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  
      /* -------- TEAM SECTION -------- */
  #team{
      background-color: #fff;
      text-align: center;
      width: 100%;
  }
  #team h1{
      color: #345;
      font-weight: 700;
      margin-top: 50px;
      margin-bottom: 50px;
  }
  #team p{
      color: #345;
      font-size: 21px;
      margin-top: 0px;
      margin-bottom: 50px;
      padding-left: 15px;
      padding-right: 15px;
  }
  .no-padding {
      padding: 0;
  }
  .no-gutter &gt; [class*=col-] {
      padding-right: 0;
      padding-left: 0;
  }
  .team-box {
      display: block;
      position: relative;
      margin: 0 auto;
      max-width: 650px;
      overflow: hidden;
  }
  .team-box img{
      -moz-transition: all 1s;
      -webkit-transition: all 1s;
      transition: all 1s;
  }
  .team-box:hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  .team-box .team-box-caption {
      display: block;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      color: #fff;
      opacity: 1;
      background: transparent;
      /* background: rgba(67,208,243,0.9); 
      -webkit-transition: all .35s;
      -moz-transition: all .35s;
      transition: all .35s; */
  }
  .team-box .team-box-caption .team-box-caption-content {
      position: absolute;
      bottom: 12px;
      width: 100%;
      text-align: left;
  }
  .team-box .team-box-caption .team-box-caption-content .name,
  .team-box .team-box-caption .team-box-caption-content .position {
      padding: 0 15px;
      text-shadow: 0px 0px 5px #000;
  }
  .team-box .team-box-caption .team-box-caption-content .name {
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 700;
  }
  .team-box .team-box-caption .team-box-caption-content .position {
      font-size: 12px;
      text-transform: uppercase;
  }
  .team-box:hover .team-box-caption {
      opacity: 1;
  }
  @media(min-width:768px) {
      .team-box .team-box-caption .team-box-caption-content .name {
          font-size: 15px;
      }
  
      .team-box .team-box-caption .team-box-caption-content .position {
          font-size: 15px;
          text-transform: uppercase;
      }
  }
  .team-box-last{
      text-align: left;
      padding: 30px 30px;
  }
  .team-box:last-child{
      background-color: #f3f3f3;
  }
  #team .team-box-last h3{
      color: #345;
      padding-top: 15px;
      padding-left: 15px;
  }
  #team .team-box-last p{
      font-size: 18px;
      line-height: 23px;
      padding-top: 15px;
      margin-bottom: 30px;
  }
  #team .team-box-last ul{
      padding-left: 15px;
  }
  #team .team-box-last ul li{
      font-size: 18px;
      font-weight: 500;
  }
  #team .team-box-last ul li{
      list-style: none;
  }
  </code></pre>