CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Heisenberg
Heisenberg

Reputation: 185

Need to align bootstrap element side by side

I'm trying to align two input elements,a button and a progress bar, in a single row(New to CSS and bootstrap).The button doesnot line up properly with input elements.The Progress bar doesnt even show up. The html that I'm using is as follows.

<div class="form-group">
   <input type="text" class="form-control" placeholder="from">
   <input type="text" class="form-control" placeholder="to">
   <input type="submit" class="form-control btn btn-default" value="Route">
   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
</div>

Upvotes: 0

Views: 473

Answers (1)

keithjgrant
keithjgrant

Reputation: 12739

Add the class form-inline to the top-level div (or the parent <form>):

<div class="form-group form-inline">
   <input type="text" class="form-control" placeholder="from">
   <input type="text" class="form-control" placeholder="to">
   <input type="submit" class="form-control btn btn-default" value="Route">
   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
</div>

Here’s the relevant documentation

Upvotes: 1

Related Questions