"Understand Div's"
Bootstrap 4.1.1 Snippet by anvictor

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section> <div class="container h-100"> <div class="row h-100"> <div class="col-md-12 justify-content-center align-items-center"> <div class="d-sm-flex justify-content-center"> <div class="col-md-2"> <h5 class="font-weight-bold text-uppercase text-left">Jornal<br> Impressão </h5> </div> <div class="col-md-2"> <h5 class="font-weight-bold text-uppercase text-left">Jornal<br> Impressão </h5> </div> <div class="col-md-2"> <h5 class="font-weight-bold text-uppercase text-left">Jornal<br> Impressão </h5> </div> <div class="col-md-2"> <h5 class="font-weight-bold text-uppercase text-left">Jornal<br> Impressão </h5> </div> <div class="col-md-2"> <h5 class="font-weight-bold text-uppercase text-left">Jornal<br> Impressão </h5> </div> </div> </div> <div class="col-md-12 justify-content-center align-items-center"> <div class="d-sm-flex justify-content-center"> <div class="col-md-2"> <h5 class="font-weight-bold text-uppercase text-left">Jornal<br> Impressão </h5> </div> <div class="col-md-2"> <h5 class="font-weight-bold text-uppercase text-left">Jornal<br> Impressão </h5> </div> <div class="col-md-2"> <h5 class="font-weight-bold text-uppercase text-left">Jornal<br> Impressão </h5> </div> <div class="col-md-2"> <h5 class="font-weight-bold text-uppercase text-left"> </h5> </div> <div class="col-md-2"> <h5 class="font-weight-bold text-uppercase text-left"> </h5> </div> </div> </div> </div> </div> </section>
.col-md-12, .d-sm-flex { width: 100%; height: 100%; background: #3B1F60; } .col-md-2 { background: #fff; color: #3B1F60; position: relative; width: 192px; height: 170px; max-width: 100%; max-height: 100%; margin: 1rem; } h5 { margin: 0; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%) }

Related: See More


Questions / Comments: