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...

enter image description here


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


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)

  • Not working....I'll just wait until the site is live and publish it, so someone can look at the live code. – Bruno Vincent Feb 22 '16 at 7:32
  • @BrunoVincent Let me know if live. I will take a look. – learnallskill Feb 22 '16 at 7:38
  • I have put a link to the site here xuzo.com/testing @learnallskill – Bruno Vincent Feb 23 '16 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 Feb 23 '16 at 2:05
  • How do I get into the HTML? What file? Approx line number? This is dynamic content yes? – Bruno Vincent Feb 23 '16 at 2:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.