raimond raimond - 1 month ago 5
CSS Question

How to center align columns nested in a column

Having troubles aligning these columns inside a section column.

Here is a screenshot of what's happening: https://gyazo.com/cfe7bfa58e98226d8e1718792631c035

And here's jsfiddle with all the required code: https://jsfiddle.net/8xxgn8vr/

<!-- Testimonials Section -->
<section id="testimonials" class="testimonials-section">
<div class="container testimonials-container center-block">
<div class="row">
<div class="col-lg-12">
<h1 class="">Testimonials</h1>
<div class="col-lg-12">
<div class="col-lg-6 testimonials">
Review 1
</div>
<div class="col-lg-6 testimonials">
Review 2
</div>
<div class="col-lg-6 testimonials">
Review 3
</div>
<div class="col-lg-6 testimonials">
Review 4
</div>
</div>
</div>
</div>
</div>
</section>


.container.testimonials-container {
margin: 0 50px 0 50px;
width: auto;
}

.col-lg-6.testimonials {
background: #E5E4DF;
height: 500px;
padding: 25px;
width: 300px;
margin: 50px 25px 50px 25px;
}

.testimonials-section {
background: #F6F6F6;
height: 100%;
padding-top: 40px;
text-align: center;
}


It's basically a section for reviews in index.html page and inside the section there will be 4 reviews which I want to be aligned in the center.

Thanks for all the help in advance.

Answer

Since you're using bootstrap I would suggest not altering directly the width of the grid elements, when you get a col-lg-6 that is supposed to occupy half of a row and set it to be 300px, you will be throwing away bootstrap responsiveness and it will eventually give you a hard time adjusting to the other specifics of the col-lg-6 class.

Since you mentioned you wanted to have 4 reviews all centered you could perhaps change your code to use a col-lg-3 that divides the row into 4 equal parts. Check this updated fiddle, but it would go like this:

HTML:

    <!-- Testimonials Section -->
    <section id="testimonials" class="testimonials-section">
        <div class="container testimonials-container center-block">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="">Testimonials</h1>
              </div>
          </div>
          <div class="row">
              <div class="col-md-3">
                <div class="testimonials">
                   Review 1
                </div>
              </div>
              <div class="col-md-3">
                <div class="testimonials">
                   Review 2
                </div>
              </div>
              <div class="col-md-3">
                <div class="testimonials">
                   Review 3
                </div>
              </div>
              <div class="col-md-3">
                <div class="testimonials">
                   Review 4
                </div>
              </div>
          </div>
      </div>
    </section>

Updated CSS:

.container.testimonials-container {
    margin: 0 50px 0 50px;
    width: auto;
}

.testimonials {
    background: #E5E4DF;
    height: 500px;
    padding: 25px;
    margin: 50px 25px 50px 25px;
}

.testimonials-section {
    background: #F6F6F6;
    height: 100%;
    padding-top: 40px;
    text-align: center;
}