How to fit inline elements in a row with Bootstrap?

Try this DEMO

<div class="form-inline">
    <div class="form-group">
        <input class="form-control" type="text">
    </div>
    <a class="btn btn-default" href="#">Button 1</a>
    <a class="btn btn-default" href="#">Button 2</a>
    <a class="btn btn-default" href="#">Button 3</a>
</div>

Nowadays the correct solution is to use the flex classes: https://getbootstrap.com/docs/4.0/utilities/flex/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="d-flex flex-row bg-info">
  <div class="p-2 bg-warning">Flex item 1</div>
  <div class="p-2 bg-danger">Flex item 2</div>
  <div class="p-2 bg-secondary">Flex item 3</div>
</div>

Tags:

Html

Css

Twitter Bootstrap

Related