на flexbox я могу сделать justify-content: space-between
но тут он не работает а text-align: center;
не могу использовать по дизайну, а если делать отступы то нужно их будет долго рассчитывать на каждом разрешении
* {
border: 2px solid #e7e7e7
}
.inner {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<!-- Column -->
<div class="col-xs-3 col-sm-6 col-md-6 col-lg-3 no-gutters">
<div class="inner d-flex justify-content-center no-gutters m-auto">
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
</div>
<div class="col-xs-3 col-sm-6 col-md-6 col-lg-3 no-gutters">
<div class="inner d-flex justify-content-center no-gutters m-auto">
<h1>voluptatibus</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur corporis dolorem eligendi enim mollitia quidem quis rem saepe sed voluptatibus?</p>
</div>
</div>
<div class="col-xs-3 col-sm-6 col-md-6 col-lg-3 no-gutters">
<div class="inner d-flex justify-content-center no-gutters m-auto">
<h1>dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
</div>
<div class="col-xs-3 col-sm-6 col-md-6 col-lg-3 no-gutters">
<div class="inner d-flex justify-content-center no-gutters m-auto">
<h1>consectetur</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
</div>
</div>
</div>
</div>