Issue using bootstrap responsive for tablet and phones <p>I am designing a page using bootstrap responsive for the following image and I'm beginner for using bootstrap responsive..<img src="https://i.stack.imgur.com/ssSyK.png" alt="create_account.png for create_account page"></p> <p>And the html is as follows.</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html" /&gt; &lt;meta name="author" content="" /&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Bootstrap Responsive&lt;/title&gt; &lt;meta content="width=device-width, initial-scale=1.0" name="viewport"&gt; &lt;meta content="" name="description"&gt; &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt; &lt;link rel="stylesheet" href="css/bootstrap-responsive.min.css"&gt; &lt;style&gt; .container { margin-top: 80px; } #main-form { margin: auto; width: 500px; } .profile-photo { vertical-align: middle; } .form { text-align: center; } .profile-image { width: 100%; height: 100%; } &lt;/style&gt; </code></pre> <p></p> <pre><code>&lt;body&gt; &lt;div class="container"&gt; &lt;div class="row text-center"&gt; &lt;img src="img/slider/1.jpg" width="250px" height="250px" /&gt; &lt;/div&gt; &lt;div class="row text-center"&gt; &lt;h2&gt;Create your account&lt;/h2&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div id="main-form"&gt; &lt;div class="span2"&gt; &lt;div class="profile-photo"&gt; &lt;img class="profile-image" src="img/slider/1.jpg" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="span3 form"&gt; &lt;div class="widget-container widget-box4"&gt; &lt;div class="control-group"&gt; &lt;div class="controls"&gt; &lt;input type="text" id="inputEmail" placeholder="Username"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="control-group"&gt; &lt;div class="controls"&gt; &lt;input type="text" id="inputEmail" placeholder="Email"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="control-group"&gt; &lt;div class="controls"&gt; &lt;input type="password" id="inputPassword" placeholder="Password"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="control-group"&gt; &lt;div class="controls"&gt; &lt;input type="password" id="inputPassword" placeholder="Confirm Password"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="control-group"&gt; &lt;div class="controls"&gt; &lt;input type="checkbox"&gt; Remember me &lt;/div&gt; &lt;/div&gt; &lt;div class="control-group"&gt; &lt;div class="controls"&gt; &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap.min.js"&gt; &lt;script type="text/javascript"&gt; $('.carousel').carousel(); &lt;/script&gt; &lt;/body&gt; </code></pre> <p></p> <p>I wanted it in the middle of the page and I'm getting correctly in Desktop.</p> <p>But problem is the form and profile image are not coming in center.</p> <p>Please help me how to do that?. </p> <p>The work is more appreciated.</p>