Clever Geek Handbook

Move bootstrap input element further down the page

I am trying to move the "top" class (my search bar / button) halfway down the page, but I have no luck using the bottom or whatever. It is currently just stuck at the top. I would also like to increase the size of the search box, but I don't know how.

<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 is a better way to focus on my search box instead of adding columns on both sides to quiet the grid, but I have no idea, any advice?

Here it looks like this:

This is what it currently looks like:> </a> </p></div></body> </html>

+3


source to share


1 answer


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>
+1


source






More articles:


All Articles