How to center align columns nested in a column - html

Question

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 1

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;
}

Answer 2

You are trying to fit 4 sections of lg-6 into a row of lg-12. Bootstrap is a grid system based on 12 parts. If you want the parts to align you always need to think about the 12 sections.
If you have only 4 reviews, you have to make sure you are using 12 divide by 4 = 3, so you need lg-3.
If you have less than 4 parts but you still want them to take space of 4 parts you'll have to intervene with bootstrap. (there is a SO post about aligning a row)
Also in your css you are changing the width of the bootstraps' divs and that's not good. (also margin). Never do that ;)
Example with 4 divs:
(using inner div)
HTML:
<!-- 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-3 testimonials">
<div>
Review 1
</div>
</div>
<div class="col-lg-3 testimonials">
<div>
Review 2
</div>
</div>
<div class="col-lg-3 testimonials">
<div>
Review 3
</div>
</div>
<div class="col-lg-3 testimonials">
<div>
Review 4
</div>
</div>
</div>
</div>
</div>
</div>
</section>
CSS:
.container.testimonials-container {
margin: 0 50px 0 50px;
width: auto;
}
.testimonials div {
height: 500px;
background: #E5E4DF;
padding: 25px;
margin: 50px 25px 50px 25px;
}
.testimonials-section {
background: #F6F6F6;
height: 100%;
padding-top: 40px;
text-align: center;
}
Fiddle

Answer 3

Use the following code:
.col-lg-6.testimonials {
background: #E5E4DF;
height: 500px;
padding: 25px;
width: 300px;
margin: 50px 25px 50px 25px;
display: inline-block;
float: none;
}

Answer 4

You can just add class "row" to the outer column? Works for me in your fiddle.
<div class="row">
<div class="col-lg-12 row">
<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>

Answer 5

.testimonials-section {
background: #F6F6F6;
height: 100%;
padding-top: 40px;
text-align: center;
}
.testimonials {
background: #FFFFFF;
}
.testimonials_content{
width: 95%;
margin: 0 auto;
border: thin black solid;
height: 500px;
background: #F5F5F5;
padding: 25px;
text-align: center;
font-size: 16px;
}
<section id="testimonials">
<div class="container testimonials-container">
<div class="row">
<h1>Tetimonials</h1>
<div class="col-lg-3 testimonials">
<div class="testimonials_content">
Review 1
</div>
</div>
<div class="col-lg-3 testimonials">
<div class="testimonials_content">
Review 2
</div>
</div>
<div class="col-lg-3 testimonials">
<div class="testimonials_content">
Review 3
</div>
</div>
<div class="col-lg-3 testimonials">
<div class="testimonials_content">
Review 4
</div>
</div>
</div></div>
</section>
you can't fit 4 sections into lg-6 for that you have to take lg-3. and under it you can take div by giving margin or width as per your need.
hope this helps.