Question

I’m trying to build a search form using Bootstrap. Here’s the HTML:

<form class="form-search search-bar">
  <div class="input-append">
    <input type="text" class="search-query" placeholder="Enter your address here...">
    <button type="submit" class="btn btn-primary">
    Search <i class="icon-search icon-white"></i></button>
  </div>
</form>

I’m new to CSS – how do I style this so that the search elements are horizontally centered across the block? Also, how do I increase the height of the search elements?

Answer 1

You should add an ID

.search-bar {
    text-align: center; /* centers inline and inline-block children */
}
.search-bar .search-query,
.search-bar .btn-primary {
    display: inline-block; /* allows for heights to be set */
}
.search-bar .search-query {
    height: 30px;
}
.search-bar .btn-primary {
    height: 40px;
}