Walter White Bootstrap grid

by Darko

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="page">
  <div class="container-fluid" style="display:flex; flex-flow: column; flex: 0 0 100%">
    <div class="container-fluid" style="display:flex; flex-flow: column; flex-grow: 1">
      <div class="top-content">
        <h4 class="">TITLE</h4>
      </div>
      <div class="row team-wrap" style="display:flex; flex-grow: 1">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
          <div class="img-team-wrap" style="display:flex; flex-grow: 1;">
            <img class="img-team" src="https://sparkwebservices.com/img/ww-1.jpg" />
          </div>
          <div>
            <h4 class="xxx">Walter White</h4>
            <h4 class="xxx">More text</h4>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
          <div class="img-team-wrap" style="display:flex; flex-grow: 1">
            <img class="img-team" src="https://sparkwebservices.com/img/ww-2.jpg" />
          </div>
          <div>
            <h4 class="xxx">Walter White</h4>
            <h4 class="xxx">More text</h4>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
          <div class="img-team-wrap" style="display:flex; flex-grow: 1">
            <img class="img-team" src="https://sparkwebservices.com/img/ww-3.jpg" />
          </div>
          <div>
            <h4 class="xxx">Walter White</h4>
            <h4 class="xxx">More text</h4>
          </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="display:flex; flex-grow: 1; flex-flow: column">
          <div class="img-team-wrap" style="display:flex; flex-grow: 1">
            <img class="img-team" src="https://sparkwebservices.com/img/ww-1.jpg" />
     ...

CSS

html,
body {
  margin: 0;
  padding: 0;
}

.page {
  display: flex;
}

.top-content,
.team-wrap {
  height: 50vh;
}

.team-wrap > div {
  flex: 1;
  justify-content: flex-end;
}

.img-team-wrap {  
  /* 1:1 Aspect Ratio */
  padding-top: 100%;
  /* For Positioning Image Inside */
  position: relative;
  overflow: hidden;
}

.img-team {
  overflow: hidden;
  height: 101%;
  width: 101%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -o-object-fit: cover;
  object-fit: cover;
}