title: bootstrap3's grid layout not responsive in landscape mode of iphone 6s
body: <p>I have created a login/password page. The logo, login and password fields should be at centre of the page (vertically and horizontally) both when viewed on iphone 6s and surface pro 3 laptop. At the bottom, I want to create 3 list items (horizontally with pipe-like separator). I am facing following problem:</p>
  
  <p>1) The code below shows the content at centre when viewed on laptop (any orientation) and on iphone in potrait mode. In Landscape mode on phone, the logo gets clipped and the contents are not at the center.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" xmlns:font-variant="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
      &lt;title&gt;HTML Test&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/bootstrap.min.css")"&gt;
      &lt;!--link rel="stylesheet" href="stylesheets/bootstrap-theme.min.css"--&gt;
      &lt;style type="text/css"&gt;
  
          /* this makes the logo and login center vertically*/
          .center-form {
              width:100%;
              margin:auto;
              position:relative;
              top:50%;
              transform: translateY(-50%)
          }
          /* to centre an element (login and logo), the height of parent need to be set*/
          html, body{
              height:100%;
              margin:0;
              padding:0
          }
  
  ul#options li + li:before{
      content: " | ";
      padding: 0 10px;
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container center-form" &gt;
  
      &lt;!-- for medium and large screens,
      First row of Bootstrap grid contains logo. Total 3 columns (12/4). Logo in middle column--&gt;
  
      &lt;div class="row" &gt;
          &lt;!--empty column--&gt;
          &lt;div class="col-md-4 col-lg-4" &gt;&lt;/div&gt;
  
          &lt;!--logo column--&gt;
          &lt;div class="col-md-4 col-lg-4" &gt;
              &lt;div&gt;
                  &lt;img src="some image")" alt="someimage" height="64" width="303"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--empty column--&gt;
          &lt;div class="col-md-4 col-lg-4"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- for medium and large screens,
      Second row of Bootstrap grid contains the form for username and password. Total 3 columns (12/4). --&gt;
      &lt;div class="row" &gt;
          &lt;!--empty column--&gt;
          &lt;div class="col-md-4 col-lg-4"&gt;&lt;/div&gt;
  
          &lt;!--form--&gt;
          &lt;div class="col-md-4 col-lg-4"&gt;
  
              &lt;form action="#"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="email"&gt;Email&lt;/label&gt;
                      &lt;input type="email" class="form-control" id="email" required&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="password"&gt;Password&lt;/label&gt;
                      &lt;input type="password" class="form-control" id="password" required&gt;
                  &lt;/div&gt;
                  &lt;div class="checkbox"&gt;
                      &lt;label&gt;&lt;input type="checkbox"&gt; Remember me&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;button type="submit" class="btn btn-primary"&gt;Login&lt;/button&gt;
              &lt;/form&gt;
              &lt;br&gt;
              &lt;ul id="options" class="list-inline"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Forgot password&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Sign up&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About &lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!--empty column--&gt;
          &lt;div class="col-md-4 col-lg-4"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--script src="@routes.Assets.at("javascripts/jquery-1.9.0.min")"&gt;&lt;/script--&gt;
  &lt;!--script src="@routes.Assets.at("javascripts/bootstrap.min.js")"&gt;&lt;/script--&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>