Move a bootstrap input element further down the page

Question

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.

<div class="row top">

    <div class="col-md-2">
    </div>

    <div class="col-md-8">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Type a hero">
          <span class="input-group-btn">
            <button class="btn btn-primary">
              <span class="glyphicon glyphicon-search">
              </span> Search
            </button>
          </span>
      </div>
    </div>

    <div class="col-md-2">
    </div>

</div>

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?

Here's what it currently looks like:

Answer 1

Try adding your own class to the div

CSS

.top-buffer { margin-top: 30px;}

HTML

<div class="row top top-buffer">

    <div class="col-md-8 col-md-offset-2">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Type a hero">
          <span class="input-group-btn">
            <button class="btn btn-primary">
              <span class="glyphicon glyphicon-search">
              </span> Search
            </button>
          </span>
      </div>
    </div>

</div>