CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
fightstarr20
fightstarr20

Reputation: 12598

Bootstrap 3 1.5 column offset

I am trying to come up with a Bootstrap 3 grid layout where the top row has 4 columns and the bottom has 3 columns centered against the first like so...

enter image description here

I have looked at using offset but because they bottom row would need to use a left offset of 1.5 columns it isn't working.

Has anyone got a similar working example I can look at?

Upvotes: 2

Views: 2780

Answers (1)

LOTUSMS
LOTUSMS

Reputation: 10240

I made something similar for an org-chart like this:

HTML

<div class="container">
    <div class="row">
        <div class="col-md-3 box">
          Column
        </div>
        <div class="col-md-3 box">
          Column
        </div>
        <div class="col-md-3 box">
          Column
        </div>
        <div class="col-md-3 box">
          Column
        </div>
    </div>
    <div class="row center-boxes">
        <div class="col-md-3 col-md-push-1 box">
          Column
        </div>
        <div class="col-md-3 col-md-push-1 box">
          Column
        </div>
        <div class="col-md-3 col-md-push-1 box">
          Column
        </div>
    </div>
 </div>

CSS

  .container{
    background:#ccc;
  }

  .box{
    background: gray;
    height:50px;
    text-align:center;
    padding:15px;
    border:1px solid black;
  }

  .center-boxes div{
     margin:0 -4% 0 4%;
  }

*This only satisfies the desktop view, adjust accordingly to smaller devices until you end up with col-xs-12 which at that point the offset (push) won't matter

And some @media query adjustments will be needed at 1024px and 991px with the margin:0 -4% 0 4%;

See the working demo here

Upvotes: 3

Related Questions