Help with bootstrap grid system

Question

Help with bootstrap grid system

Asked 6 years, 8 months ago

Viewed 54 times

1

I’m studying Bootstrap and I would like to ask a question, I did an experiment here and I would like to know how to do it for when it is minimized to cell, how to automatically align the grids, when I minimize it is superimposed to my Serction, unless I put the div with less margin-top, but the idea is to stay in the middle and when they are minimized, get set up, as I do?

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!

Have you tried using the classes col-sm-*?

– Woss

2018/01/18 at 21:06
Already yes, Anderson, it did not help, to understand what I want best, when I edit the margin-top and put 40px and minimize pro col, it is the way I want!

– Diego Dias

2018/01/18 at 21:11
Vc is using margin-top only for white blocks to get in the middle?

– Sam

2018/01/18 at 21:17
Yes, I have my Section fixed at the size of 380 pixels, and I have 4 Ivs inside that Section, but in col-Md if they are aligned in the middle, when they go to col- they are superimposed due to the height and width of the default Section, wanted a solution for Ction to automatically increase width when it goes to col, or I can align the 4 Divs inside the Section, I’m able to be clear?

– Diego Dias

2018/01/18 at 21:25

1 answer

Browser other questions tagged html css bootstrap

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2018-01-18T21:28:34+00:00

Create a class .valign and put in the container:

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

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

In the div container you put the class valign:

<div class="container valign">

Edit:

Also puts 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;
}