Databases
StackOverflow2013
Postsdbo
POIssue using bootstrap responsive for tablet and phones
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIssue using bootstrap responsive for tablet and phones
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload