CODEWITHSUNDEEP
htmltwitter-bootstrapcssflexbox
mantebose
mantebose

Reputation: 93

Equal flexbox grid with different sized content + dividers

I'm currently working on one .psd template and using Bootstrap 4. I have problem with one section, which contains multiple rows and columns with different content. The main problem is one column, which text, inside header, wraps into two lines. How can I center other one-lined headers inside other blocks in relation to this one?

Image of the section from mockup

Additional question is about dividers. What option is better to insert them as on mockup? By using before/after?

Thanks.

.benefites {
  background: #0b3b52;
}

.benefites .headline {
  color: #fff;
  padding: 30px 0;
  font-weight: 100;
  text-transform: uppercase;
}

.benefites h4,
.benefites h2 {
  color: #92d050;
}

.benefites p {
  color: #fff;
}

.benefites .block {
  align-self: center;
}

.benefites img {margin: 10px 0;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<section class="benefites">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <h2 class="headline">Managing your team has never been easier!
        </h2>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-md-3 block">
        <h4>Players</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Manage team roster and member profiles easily with our amazing tool</p>
      </div>
      <div class="col-md-3">
        <h4>Players</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Save time and energy! Manage all your teams in one easy-to-use platform </p>
      </div>
      <div class="col-md-3">
        <h4>Practises & Games</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p> Figuring out the “when and where” has never been easier. Schedule your games, practices, quickly and easily!</p>
      </div>
      <div class="col-md-3">
        <h4>Injuries & Medical records</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Collect all the data about your player’s condition and medical records</p>
      </div>
      <div class="w-100"></div>
      <div class="col-md-3">
        <h4>Sponsors & Agents</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Manage all the sponsor and agent information with us </p>
      </div>
      <div class="col-md-3">
        <h4>Contacts</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>A full contact database that makes you easy to search, filter, and update</p>
      </div>
      <div class="col-md-3">
        <h4>Contracts</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Get full visibility and handle all the contracts online with CRM42</p>
      </div>
      <div class="col-md-3">
        <h4>Reports</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Our wide range of reports help you to take your management skills to a next level</p>
      </div>
      <div class="w-100"></div>
      <div class="col-md-3">
        <h4>Treatments</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Simply the best tool for managing all kind of team payments</p>
      </div>
      <div class="col-md-6 block">
        <h2>
          And many more amazing features ...
        </h2>
      </div>
      <div class="col-md-3 ">
        <h4>Customized platfrom</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Make the most out of your management tool. Create your own design quickly and easily.</p>
      </div>
    </div>
  </div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" </script>
  < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
</script>

Upvotes: 1

Views: 50

Answers (1)

Asons
Asons

Reputation: 87251

First, remove block from the 1st <div class="col-md-3"> so they all top align.

Second, as the h4 can't see each other (not being siblings), you either need to give them a fixed height (which you can adjust using a media query for different screen sizes) or use a script.

Here is a sample using fixed height, where I added this rule:

.benefites h4 {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Here is another answer of mine, how to get header from cards or similar to have the same height with flex box?, that has a script version, and also links to another CSS solution I made.

Stack snippet

.benefites {
  background: #0b3b52;
}

.benefites .headline {
  color: #fff;
  padding: 30px 0;
  font-weight: 100;
  text-transform: uppercase;
}

.benefites h4,
.benefites h2 {
  color: #92d050;
}

.benefites h4 {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.benefites p {
  color: #fff;
}

.benefites .block {
  align-self: center;
}

.benefites img {margin: 10px 0;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<section class="benefites">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <h2 class="headline">Managing your team has never been easier!
        </h2>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-md-3">
        <h4>Players</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Manage team roster and member profiles easily with our amazing tool</p>
      </div>
      <div class="col-md-3">
        <h4>Players</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Save time and energy! Manage all your teams in one easy-to-use platform </p>
      </div>
      <div class="col-md-3">
        <h4>Practises & Games</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p> Figuring out the “when and where” has never been easier. Schedule your games, practices, quickly and easily!</p>
      </div>
      <div class="col-md-3">
        <h4>Injuries & Medical records</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Collect all the data about your player’s condition and medical records</p>
      </div>
      <div class="w-100"></div>
      <div class="col-md-3">
        <h4>Sponsors & Agents</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Manage all the sponsor and agent information with us </p>
      </div>
      <div class="col-md-3">
        <h4>Contacts</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>A full contact database that makes you easy to search, filter, and update</p>
      </div>
      <div class="col-md-3">
        <h4>Contracts</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Get full visibility and handle all the contracts online with CRM42</p>
      </div>
      <div class="col-md-3">
        <h4>Reports</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Our wide range of reports help you to take your management skills to a next level</p>
      </div>
      <div class="w-100"></div>
      <div class="col-md-3">
        <h4>Treatments</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Simply the best tool for managing all kind of team payments</p>
      </div>
      <div class="col-md-6 block">
        <h2>
          And many more amazing features ...
        </h2>
      </div>
      <div class="col-md-3 ">
        <h4>Customized platfrom</h4>
        <img src="http://i.piccy.info/i9/f69f598e82ca5dd1e1603b1cc86cc39f/1517595403/422/1218424/icons.png" alt="">
        <p>Make the most out of your management tool. Create your own design quickly and easily.</p>
      </div>
    </div>
  </div>
</section>

Upvotes: 1

Related Questions