Help with bootstrap grid system

Question

Help with bootstrap grid system

Navigation

#1 by (0 votes)

1

I am studying Bootstrap and would like to ask a question, I did an experiment here and would like to know how to do when it is minimized to cel, how to automatically align the grids, when minimizo it overlaps my section, unless that I put the div with less margin-top, but the idea is to stay in the middle and when they are minimized, get set, how do I?

My code below

 <div class="deve">
  <div class="container">
    <div class="row">
    <div class="col-md-3 col-6">
      <div class="branco">
      </div>
    </div>
      <div class="col-md-3 col-6">
      <div class="branco">
      </div>
    </div>
      <div class="col-md-3 col-6">
      <div class="branco">
      </div>
    </div>
      <div class="col-md-3 col-6">
      <div class="branco">
      </div>
    </div>
  </div>
  </div>

CSS

.deve { background: black; width: 100%; height: 380px; position: absolute; }
.branco { background: white; width: 100%; ; height: 130px; position: relative; margin-top: 90px;}

Thank you!

html css bootstrap

asked by anonymous 18.01.2018 / 22:04

1 answer

Error connecting PHP 7 (Debian) with Sybase 16 exec () function calls program in the background

score 0 · Accepted Answer

Create a class .valign and place in container :

.valign{
   position: relative;
   transform: translateY(-50%);
   top: 50%;
}

The above 3 styles will center vertically the div row within container .

In div container you put the class valign :

<div class="container valign">

Edit:

It also places a margin: 15px 0; in class .branco to be spaced one block from the other:

.branco {
   background: white; width: 100%; ; height: 130px; position: relative;
   margin: 15px 0;
}