0

I'm using bootstrap 3.3.7. I have a four divs that have a width base on col-xs-2 of bootstrap. This is my code:

<div class="container">
  <div class="row">
    <div id="first" class="col-sm-2 col-sm-offset-1 rec">
    </div>
    <div id="second" class="col-sm-2 col-sm-offset-1 rec">
    </div>
    <div id="third" class="col-sm-2 col-sm-offset-1 rec">
    </div>
    <div id="four" class="col-sm-2 col-sm-offset-1 rec">
    sss
    </div>
  </div>
</div>

CSS:

.rec {
  height: 100px;
}
#first {
  background-color: red;
}
#second {
  background-color: blue;
}
#third {
  background-color: yellow;
}
#four {
  background-color: green;
}

I wants that the four divs will be in the center of the screen, and I can't achieved it yet - See fiddle: https://jsfiddle.net/ptwbn2av/483/

If you have an idea without col-sm-offset it will be good also.

Web R
  • 565
  • 1
  • 6
  • 23
  • Think you would need to override the bootstrap styles - best bet is to make the cols in that row inline-block and apply text-align center to that row – Pete Mar 22 '18 at 16:43
  • 1
    Although there is an answer from the duplicate that has a cool codepen showing how to do it using offsets: https://www.codeply.com/go/Sv6Z9eR9kk – Pete Mar 22 '18 at 16:54
  • Thanks! After define that in my css it works without any offset! background-color: #ffeeee; background-clip: content-box; min-height: 80px; – Web R Mar 22 '18 at 17:05

0 Answers0