CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
JellyAce
JellyAce

Reputation: 96

How to vertically center a div in Bootstrap

I just started using Bootstrap and I would like to have a vertically centered div. A div (not the content) that has equal margin on top and bottom. Something I can achieve by using position:absolute; but I want to achieve it the Bootstrap way.

This is my markup so far:

<div class="container">
  <div class="row">
    <div id="home" class="well well-lg col-lg-8 col-lg-offset-2">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus nisl non tortor hendrerit, ultrices volutpat velit lobortis. Donec blandit non ligula sed eleifend. Aliquam erat volutpat. Aliquam ac libero id elit pellentesque bibendum. Morbi lacinia ut ante in semper. Quisque eu urna aliquam, ultrices mauris ut, commodo mauris. Proin leo risus, congue quis turpis vitae, sagittis pulvinar ipsum. Aliquam tempor sapien ipsum, non iaculis mauris accumsan ut. Nullam dapibus ligula eu ante pellentesque, eget tristique ligula sodales. Quisque eleifend massa nec erat blandit aliquet.

      Phasellus consequat turpis hendrerit, venenatis dolor id, pharetra metus. Proin interdum vestibulum urna, rutrum dapibus mauris dapibus a. Cras scelerisque massa non nisi tempus porta. Nullam faucibus a nunc eget aliquet. Duis auctor purus et commodo porttitor. Quisque et commodo turpis. Duis tristique convallis sem, id ultrices diam elementum sed. Nullam adipiscing, nunc eget ornare molestie, turpis sapien luctus lectus, sed vestibulum sapien urna a justo. Curabitur at eros non nulla ornare porttitor. Curabitur ac tortor blandit, dapibus risus dictum, aliquam ligula. Nunc ultrices faucibus nibh, vel sagittis tortor mollis convallis. Ut pretium tortor id pellentesque hendrerit. Aliquam erat volutpat.
      <!--<div id="_prcButtons">
        <input type="button" id="_proceed" class="btnConfirm" title="Answer the question" value="I wholeheartedly agree">
        <input type="button" id="_rd" class="btnConfirm" title="Redirect to Google" value="I strongly disagree">
      </div>-->
    </div>
  </div>
</div>

jsFiddle
I hope someone can help me with this.

Cheers!

Upvotes: 0

Views: 102

Answers (3)

Tushar
Tushar

Reputation: 4418

Are you looking for some thing like this

DEMO

html, body, .container {
    height: 100%
}
.container {
    display: table;
}
.row {
    display: table-cell;
    vertical-align: middle;
}

Upvotes: 1

pavel
pavel

Reputation: 27072

http://jsfiddle.net/3ZepD/1/

Use the table-cell and vertical-align.

For better understanding I've added height, you can remove it.

Upvotes: 0

zafus_coder
zafus_coder

Reputation: 4591

CHeck this if this worked ? #home { display: inline-block; vertical-align: middle; float: none; }

or in css u can do by this : 

display: table-cell;
vertical-align: middle;

Working example here : http://jsbin.com/sociloke/2/edit

Upvotes: 0

Related Questions