Move Button to be in the same line with Checkbox and Textbox Bootstrap

Issue

I'm trying to move the button to be in the same line as the checkbox and textbox. Currently it displays the elements as shown below...

What I want is to have something shown below...

Also, the textbox beside the checkbox fills up the whole space in its line. How can I make it shorter?

<div class="input-group">
    <span class="input-group-addon">
    <input type="checkbox"> Break After
    </span>
    <input type="text" class="form-control">
</div>

<button id="btnextra" type="button" class="btn btn-default btn-md">Extra</button>

I have my jsfiddle here.

Thank you so much.

Solution

You can just wrap the <button> in <span class="input-group-btn">, update: I added a wrapper <div class="form-group row"> to contain the form elements also used .col-xs-8 class to control the size, I really suggest using the standard classes and provided by bootstrap, here is a working snippet:

.btnextra {
  margin-left: 10px;
}

.form-group-centered {
  width: 400px;
  margin: 0 auto;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<br />
<div class="form-group row">
  <div class="col-xs-12">
    <div class="form-group-centered">
      <div class="input-group pull-left" style="
      width: 300px;
  ">
          <span class="input-group-addon"> <input type="checkbox"> Break After </span>
          <input type="text" class="form-control">

      </div>
      <button id="btnextra" type="button" class="btn btn-default btn-md btnextra pull-left" style="
  ">Extra</button>
    </div>
  </div>
</div>

Answered By - ROOT