How to remove gap between side-by-side elements in bootstrap?

I am trying to create a google-search style web page. Here is my relevant html snippet:

<div class="row">
  <div class=col-md-2></div>
  <div class="col-md-8">
     <input type="text" class="form-control" />
  </div>
  <div class="col-md-2" style="text-align:left;">
     <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
  </div>
</div>

Although this works, it leaves a noticeable gap between the input box and the search button.

I am wondering if there is a way to get rid of the gap between the two elements.

1 answer

  • answered 2018-11-08 07:44 Jean-Marc Zimmer

    This is what you're looking for :

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <div class="input-group mb-3">
      <input type="text" class="form-control" aria-describedby="searchBtn">
      <div class="input-group-append">
        <button class="btn btn-default" type="submit" id="searchBtn"><i class="glyphicon glyphicon-search"></i>[search icon]</button>
      </div>
    </div>

    You might want to read the documentation.