How to get grid items to align center in Bootstrap views?

Question

I'm using Bootstrap views Drupal 7.

Live site is over here to have a look at the code:

When a 3 column grid gets minimized, the 3 items stack 2 on top and 1 on the bottom.

But the bottom one is left aligned.

How can I have them align in the center so I get a nice triangle?

This looks easy with css, but I can't get it to work, tried:

 margin: 0 auto;

And others but can't get it working for some reason...

learnallskill · Accepted Answer · 2016-02-22 07:04:29Z

1

If you can create div tag, you can use css as show below.

Example:

html: <div class="secLayerContainer"><div class="secLayerContent">.....</div></div>

css: .secLayerContainer { display: inline; float: left; width: 100% } .secLayerContent { display: block; float: none; width: 200px; margin: 0px auto}

note: 200px also can change 20%. (your preference)

answered Feb 22, 2016 at 7:04

learnallskill

3052 silver badges12 bronze badges

Not working....I'll just wait until the site is live and publish it, so someone can look at the live code.
– Bruno Vincent
Commented Feb 22, 2016 at 7:32
@BrunoVincent Let me know if live. I will take a look.
– learnallskill
Commented Feb 22, 2016 at 7:38
I have put a link to the site here xuzo.com/testing @learnallskill
– Bruno Vincent
Commented Feb 23, 2016 at 0:15
Add one more class at your last div. HTML: <div class=" col-xs-12 col-sm-12 col-md-6 col-lg-4 imgCenter"> CSS: .imgCenter { display: block; float: none; margin: 0px auto; }
– learnallskill
Commented Feb 23, 2016 at 2:05
How do I get into the HTML? What file? Approx line number? This is dynamic content yes?
– Bruno Vincent
Commented Feb 23, 2016 at 2:51

| Show 1 more comment

1 Answer 1