CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Prabhu
Prabhu

Reputation: 13335

Centering divs that span odd number of columns in bootstrap

I am trying to center two of my divs in Bootstrap 3's grid. The problem is, together they span 9 columns, which is an odd number of columns. My first div spans 6 columns, and the second one spans 3 columns. This leaves me with 3 extra columns for whitespace, but I'm not able to figure out how to divide this up equally to the left and right. I can either have 2 empty columns on the left and 1 on the right or the other way round.

For example, this gets left aligned:

 <div class="row">
              <div class="col-md-2"></div>

              <div class="col-md-6">
                     <div id="myFirstDiv"></div>
              </div>

              <div class="col-md-3">
                     <div id="mySecondDiv"></div>
              </div>  

              <div class="col-md-1"></div>
    </div>

If there was a way to make the first column 1.5 and the last 1.5, that would be have been perfect. Is there anything I can do to center my content?

I have tried using center-block, but this doesn't seem to have any effect.

Upvotes: 3

Views: 1253

Answers (1)

maioman
maioman

Reputation: 18764

So you want a .col-md-1andahalf class?

Just create one, if that's what you need:

@media (min-width: 992px)/*or whatever*/{
.col-md-1-5 {
width: 12.5%;
}
 //.....
}

Upvotes: 3

Related Questions