I am currently in the process of working on a .psd template and utilizing Bootstrap 4. I have encountered an issue with one section that contains multiple rows and columns with varying content. The main problem is with one column where the text inside the header wraps into two lines. How can I center the other headers, which are only one-lined, in relation to this particular column?
Here is an image showing the section from the mockup
Another question I have pertains to dividers. What is the better option for inserting them as shown in the mockup? Should I use before/after?
Thank you.
.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>