CSS - Bootstrap center 5 col-md-4

Question

I have 5 col-md-4 wrapped inside a container, which is wrapped inside a row, which is wrapped inside a <section> element. Right now, I have 3 columns in first row and 2 in the second. What I am trying to do is center all the col-md-4 elements, so that the bottom 2 are not aligned to the left which is leaving a white space on the right. Here is my code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<section id="home-features">
  <div class="row">
    <div class="container">

      <div class="col-md-4">
        <div style="height: 229px; background: url(images/feature-custom-home.jpg); background-size: cover;">
          <a href="/custom-home/" class="service-link">
            <h3>Custom Homes</h3>
          </a>
        </div>
      </div>

      <div class="col-md-4">
        <div style="height: 229px; background: url(images/feature-home-renovations.jpg); background-size: cover;">
          <a href="/home-renovation" class="service-link">
            <h3>Home Renovations</h3>
          </a>
        </div>
      </div>

      <div class="col-md-4">
        <div style="height: 229px; background: url(images/feature-luxury-features.jpg); background-size: cover;">
          <a href="/luxury-features/" class="service-link">
            <h3>Luxury Features</h3>
          </a>
        </div>
      </div>

      <div class="col-md-4">
        <div style="height: 229px; background: url(images/feature-project-management.jpg); background-size: cover;">
          <a href="/project-management/" class="service-link">
            <h3>Project Management</h3>
          </a>
        </div>
      </div>

      <div class="col-md-4">
        <div style="height: 229px; background: url(images/feature-condo-renovation.jpg); background-size: cover;">
          <a href="/condo-renovations/" class="service-link">
            <h3>Condo Renovations</h3>
          </a>
        </div>
      </div>

    </div>
  </div>
</section>

Possible duplicate of [Center a column using Twitter Bootstrap 3](http://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3) — Nhan, Jun 24 '16 at 06:39
`Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.` http://getbootstrap.com/css/#grid-intro — Gleb Kemarsky, Jun 24 '16 at 06:48

score 1 · Accepted Answer · answered Jun 24 '16 at 06:36

1

IN your bottom first column which is

Add md-offset-2 ,

like this

 <div class="col-md-4 col-md-offset-2">

no need for second bottom column. Check here : http://codepen.io/ihemant360/pen/XKpXLE

answered Jun 24 '16 at 06:36

score 0 · Answer 2 · answered Jun 24 '16 at 06:32

<section id="home-features">

                                <div class="row">

                                        <div class="container">

                                                <div class="col-md-4">
                                                        <div style="height: 229px; background: url(images/feature-custom-home.jpg); background-size: cover;">
                                                                <a href="/custom-home/" class="service-link">
                                                                        <h3>Custom Homes</h3>
                                                                </a>
                                                        </div>
                                                </div>

                                                <div class="col-md-4">
                                                        <div style="height: 229px; background: url(images/feature-home-renovations.jpg); background-size: cover;">
                                                                <a href="/home-renovation" class="service-link">
                                                                        <h3>Home Renovations</h3>
                                                                </a>
                                                        </div>
                                                </div>

                                                <div class="col-md-4">
                                                        <div style="height: 229px; background: url(images/feature-luxury-features.jpg); background-size: cover;">
                                                                <a href="/luxury-features/" class="service-link">
                                                                        <h3>Luxury Features</h3>
                                                                </a>
                                                        </div>
                                                </div>

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

                                                <div class="col-md-4">
                                                        <div style="height: 229px; background: url(images/feature-project-management.jpg); background-size: cover;">
                                                                <a href="/project-management/" class="service-link">
                                                                        <h3>Project Management</h3>
                                                                </a>
                                                        </div>
                                                </div>

                                                <div class="col-md-4">
                                                        <div style="height: 229px; background: url(images/feature-condo-renovation.jpg); background-size: cover;">
                                                                <a href="/condo-renovations/" class="service-link">
                                                                        <h3>Condo Renovations</h3>
                                                                </a>
                                                        </div>
                                                </div>

                                        </div>

                                </div>

                        </section>

Use the above code to solve your issue.

Mohammad Usman · Answer 3 · 2016-06-24T07:30:15.003

By default Bootstrap's columns are styles with css float. You need to override this with display: inline-block which can be affected by text-align: center in turn.

.container.center {
  letter-spacing: -4px;
  text-align: center;
  font-size: 0;
}

.container.center .col-md-4 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: 0;
  text-align: left;
  font-size: 14px;
  float: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section id="home-features">

  <div class="row">

    <div class="container center">

      <div class="col-md-4">
        <div style="height: 229px; background: url(images/feature-custom-home.jpg); background-size: cover;">
          <a href="/custom-home/" class="service-link">
            <h3>Custom Homes</h3>
          </a>
        </div>
      </div>

      <div class="col-md-4">
        <div style="height: 229px; background: url(images/feature-home-renovations.jpg); background-size: cover;">
          <a href="/home-renovation" class="service-link">
            <h3>Home Renovations</h3>
          </a>
        </div>
      </div>

      <div class="col-md-4">
        <div style="height: 229px; background: url(images/feature-luxury-features.jpg); background-size: cover;">
          <a href="/luxury-features/" class="service-link">
            <h3>Luxury Features</h3>
          </a>
        </div>
      </div>

      <div class="col-md-4">
        <div style="height: 229px; background: url(images/feature-project-management.jpg); background-size: cover;">
          <a href="/project-management/" class="service-link">
            <h3>Project Management</h3>
          </a>
        </div>
      </div>

      <div class="col-md-4">
        <div style="height: 229px; background: url(images/feature-condo-renovation.jpg); background-size: cover;">
          <a href="/condo-renovations/" class="service-link">
            <h3>Condo Renovations</h3>
          </a>
        </div>
      </div>

    </div>

  </div>

</section>

I would rather use bootstrap instead of custom styles, there is a really great `col-x-offset-y` classes family — Marcin, Jun 24 '16 at 07:38
@tutok you didn't got his question. For example there are 7 columns, 3 in one row, 3 in 2nd and one in last row, then last column should be in center. similarly if there are 2 columns in last row they should be in center as well.. — Mohammad Usman, Jun 24 '16 at 07:42
@'Muhammad Usman' from what you are saying it is pretty achievable in bootstrap http://getbootstrap.com/css/#grid-offsetting, as you can see column in third row is centerd (I am referring to example in docs) — Marcin, Jun 24 '16 at 07:52
@tutok yes, but in case `.col-md-4` elements are generating dynamically and we don't know in advance how many elements will be in last row.. — Mohammad Usman, Jun 24 '16 at 09:16

CSS - Bootstrap center 5 col-md-4

3 Answers3