Twitter Bootstrap 3 vertical alignment

Question

I'm using Bootstrap 3 - and have two columns with content.

Column one is an image. Column two is some text.

Now what I want to do is to make the "row" take up the entire height of the browser window AND to have the image in column one AND the text inside column 2 centre horizontally and vertically. I've tried all solution from Stackoverflow, but with no luck.

Here the code I'm using:

    <div class="container" style="height:100%;"> 

      <div class="row">

        <div class="col-sm-6"> <img src="img/logo_frontpage.png" class="img-responsive center-block" style="height:70%; width:70%" alt=""> </div> <!-- should be vertical centre -->

        <div class="col-sm-6"> 
          <!-- start -->
          <div id="start" style="display:block;"> <!-- should be vertical centre -->
            <h1 class="text-center">Welcome!</h1>
            <p class="text-venter">to</p>
            <h3 class="text-center" >my site<br /></h3>
          </div>

         </div>
         </div>
         </div>

I'm having troubles making the container fill the entire screen area, and vertically centring the two columns.

Answer 1

Stackoverflow is not the only source for CSS techniques. You can find lots of information on CSS-Tricks.com and other places. DEMO: http://jsbin.com/bayoli/1/

CSS

@media (min-width:768px) { 
    html,
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .container.my-container {
        display: table;
        height: 100%;
    }
    .my-container .row {
        display: table-cell;
        height: 100%;
    }
    .my-container .col-sm-6 {
        display: table-cell;
        border: 5px dashed pink;
        height: 100%;
    }
    .my-container .col-sm-6 .inner {
        display: table;
        height: 100%;
        width:100%;
    }
    .my-container .col-sm-6 .inner > div {
        display: table-cell;
        vertical-align: middle;
        width: 100%:;
    }
}

/* fluid image */
img.img-full-width {width:100%;}

HTML

<div class="container my-container">
   <div class="row">
      <div class="col-sm-6">
         <div class="inner">
            <div>
               <img src="http://placehold.it/600x300/555555/FFFFFF&text=image+1" class="img-full-width img-responsive" />
            </div>
         </div>
      </div>
      <div class="col-sm-6 one">
         <div class="inner">
            <div>
               <ol>
                  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                  <li>Aliquam tincidunt mauris eu risus.</li>
                  <li>Vestibulum auctor dapibus neque.</li>
               </ol>
            </div>
         </div>
      </div>
   </div>
</div>