CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
sun
sun

Reputation: 1678

How to center align a div vertically which uses bootstrap?

I have a row with content which should be in the center of the site and a footer at the bottom. The content are divided into two 6 column. i want it to center align vertically according to the screen size. so i tried to give some percentage of top with a position relative but it doesn't work out.

If i give margin-top it is working. In order to make the top we have to give the position, so i have given it relative I don't want position absolute then the footer will come at the top of the site. Other content also will come top i thnik.

How to center align the contents and footer should stay at bottom all time all display size.

HTML

<div class='row'>
<div class='col-md-6 vertical'> content</div>
<div class='col-md-6 vertical'>content right</div>
</div>
<footer>sit at bottom</footer>

CSS

.vertical{
    position:relative;
   /* margin-top:20%; */ /*works*/
    top:20%; /*not works even providing position */
}

JSFIDDLE NOTE: Don't forgot to resize the window then only you can able to see the two column division

Upvotes: 0

Views: 2091

Answers (2)

ravisuhag
ravisuhag

Reputation: 1778

<div class='row'>
 <div class='col-md-6 '>
   <div class="vertical"> content</div>
 </div>
 <div class='col-md-6 '>
   <div class="vertical"> content</div>
 </div>
</div>
<footer>sit at bottom</footer>

.vertical{
  display: table-cell;
  vertical-align:middle;
  height: 200px /* Accordingly */
}

Working Fiddle Fiddle.

Upvotes: 1

myTerminal
myTerminal

Reputation: 1646

Apart from using display: table-cell, there is one more way to do it but is not so cross-browser at this moment. Take a look at CSS3 Flexbox.

Upvotes: 1

Related Questions