title: Creating responsive divs in bootstrap
body: <p>I'm experimenting with bootstrap and this is the code which I wrote:  </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" href="./css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="./css/bootstrap-theme.min.css"&gt;
          &lt;style type="text/css"&gt;
              .row-centered {
                  text-align:center;
              }
              .col-centered {
                  display:inline-block;
                  float:none;
                  text-align:left;
                  margin-right:-4px;
              }
              .pos{
                  position: relative;
                  top: 240px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;div class="row row-centered pos"&gt;
                  &lt;div class="col-lg-8 col-centered"&gt;
                      &lt;div class="well"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-8 col-centered"&gt;
                      &lt;div class="well"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-8 col-centered"&gt;
                      &lt;div class="well"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The output is as shown in screen shot:<br>
  <img src="https://i.stack.imgur.com/CYc0Z.png" alt="img">
  But when I convert to mobile screen, I get like this:<br>
  <img src="https://i.stack.imgur.com/bFWis.png" alt="img1"><br>
  I want the divs to appear in center with one above one in mobile screens as well. How can I do it? 
  But it isn't responsive.</p>