Richard Martinez
Richard Martinez

Reputation: 25

Can't center this Bootstrap div

Every other div is centered but this one. And it's been driving me nuts for a few hours. I finally broke down and posted. Attached is a pic where you can see it's not centered.

You can see it live here.

Image of div not centered:

Image of div not centered

Upvotes: 0

Views: 94

Answers (4)

TPoy
TPoy

Reputation: 962

If I understand you right, you want each testimonial centered in its containing div? How about adding margin-left: 25%; to both .testimonial-section and .testimonial-description?

Upvotes: 0

Ena
Ena

Reputation: 11

Try this:

.testimonial-section { margin: 0 auto; }

Upvotes: 0

Kld
Kld

Reputation: 7068

You can use bootstrap helper classes .center-block and .text-center to center the content

<div class="col-md-6">
    <div class="testimonial-section center-block">
         Denim you probably haven't heard of. Lorem ipsum dolor met consectetur adipisicing sit amet, consectetur adipisicing elit, of them jean shorts sed magna aliqua. Lorem ipsum dolor met.
    </div>
    <div class="testimonial-desc text-center">
        <img src="https://placeholdit.imgix.net/~text?txtsize=9&amp;txt=100%C3%97100&amp;w=100&amp;h=100" alt="">
        <div class="testimonial-writer">
            <div class="testimonial-writer-name">Zahed Kamal</div>
            <div class="testimonial-writer-designation">Front End Developer</div>
            <a href="#" class="testimonial-writer-company">Touch Base Inc</a>
        </div>
    </div>
    </div>

Upvotes: 2

Nirmalya Ghosh
Nirmalya Ghosh

Reputation: 2500

You need to add the following:

.testimonial-section {
    margin: 0 auto;
}

.testimonial-desc {
    text-align: center;
}

enter image description here

Optionally, you can add the following:

.testimonial-section:after {
    margin-left: 5px;
}

which will make it:

enter image description here

Upvotes: 1

Related Questions