How to display two buttons beside each other [duplicate]

Question

I have the following two buttons:

<div>
    <input type="button" id="slide_start_button" value="Start">
    <input type="button" id="slide_stop_button"  value="Stop">
</div>

I would put both one beside each other (for example |Start||Stop|). I can but I have to use the position: relative CSS rule and an empty space was below buttons that I don't want.

How can I put the two buttons each beside other in portable manner?

Answer 1

Using Bootstrap , this can also be achieved. Please find the below piece of html.

<div class="container">
  <div class="row">
    <div class="col-xs-2">
      <button type="button" id="slide_start_button" value="Start" class="btn btn-success">Start</button>
    </div>
    <div class="col-xs-4">
      <button type="button" id="slide_stop_button" value="Stop" class="btn btn-success">Stop</button>
    </div>
  </div>
</div>

Output:

Edit 2:

Another alternate is to use the button group which can yield the required result.

<div class="btn-group">
   <button id="slide_start_button" value="Start">Start</button>
   <button id="slide_stop_button" value="Stop">Stop</button>
</div>