bootstrap center 3 col-md-3 divs

Question

I have a wrapper like so:

and inside this wrapper I have 3 col-md-3 divs:

        
                      

              相关标签:
       
      

Answer 1

Centering floating (moreover responsive) elements like the bootstrap columns requires some work with the margins, like yuyokk suggested.

Or you can unfloat the elements and use inline-block :

.community-images {
  text-align: center;
}

.col-md-3 {
  float: none;
  display: inline-block;
  text-align: left; //reset the text alignement to left
}

Works everywhere, including IE8.

Answer 2

For anyone using Bootstrap 4, this feature has been added: http://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-12 col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Answer 3

There are col-md-offset classes. Unfortunately you need col-md-offset-1-and-half class in order to have 12 cols in sum.

I'm talking about 1.5 + 3 + 3 + 3 + 1.5 = 12

So you can write you own class to offset the col. Smth like this.

@media (min-width: 992px) {
    .col-md-offset-1-and-half {
        margin-left: 12.499999995%; // col-md-offset-1 has 8.33333333
        // so you multiply 8.33333333 * 1.5 = 12.499999995%
    }
}

<div class="col-md-3 col-md-offset-1-and-half"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>

Answer 4

Code :

<div class="community-images">
<div class="col-md-3 community-margin"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>

css :

@media (min-width: 768px) {
.community-margin{
    margin-left: 12.5%;
}
}

.community-images {
  padding: 40px 0px 40px 0px;
}

.col-md-3 {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  min-height: 300px;
  box-shadow: 10px 10px 5px #888888;
}

Try above code. You definitely get a solution. You can refer below link also : https://wordpress.com/post/wpkuldip.wordpress.com/61

Answer 5

Update: This is good solution for normal layout, not for Twitter Bootstrap as it disrupts the Bootstrap behaviour. Check Jeben's answer for a better layout.

A modern browsers solution and apt for your problem. Flexbox technique with justified content.

@media (min-width:992px) {
  .community-images {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

Bootply