title: Move a bootstrap input element further down the page
body: <p>I'm trying to move the class "top" (my search bar/button) half way down the page but am having no luck using bottom or anything else. Currently it's just stuck at the top. I would also like to make the search box bigger but am not sure how to.</p>
  
  <pre><code>&lt;div class="row top"&gt;
  
      &lt;div class="col-md-2"&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-8"&gt;
        &lt;div class="input-group"&gt;
          &lt;input type="text" class="form-control" placeholder="Type a hero"&gt;
            &lt;span class="input-group-btn"&gt;
              &lt;button class="btn btn-primary"&gt;
                &lt;span class="glyphicon glyphicon-search"&gt;
                &lt;/span&gt; Search
              &lt;/button&gt;
            &lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-2"&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Also I'm sure there's a better way to center my search box instead of adding columns either side to appease the grid system but I have no idea, any tips? </p>
  
  <p>Here's what it currently looks like: </p>
  
  <p><a href="https://i.stack.imgur.com/Csm19.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Csm19.png" alt="Here&#39;s what it currently looks like"></a></p>