CODEWITHSUNDEEP
csstwitter-bootstrapbuttoninputalignment
Andrew Vershinin
Andrew Vershinin

Reputation: 1968

Bootstrap input group and button alignment

I want the input group to be aligned to left, as it is, and "Add new" button aligned to right of the row.

<div class="row">
  <div class="input-group col-sm-6">        
    <input type="text" class="form-control" placeholder="Search by a substring in good's name.."></input>
    <span class="input-group-btn">
      <button class="btn btn-default" type="button" onclick="filter()">Search</button>
    </span>
  </div>

  <div class="col-sm-6">          
    <button class="btn btn-default text-right" type="button" onclick="addNew()">Add new</button>
  </div>
</div>

In action: Bootply

As you can see, input group and "Add new" button are stacked vertically, although they're in a single row.

Upvotes: 1

Views: 3202

Answers (2)

Billy Halim
Billy Halim

Reputation: 182

<div class="row">
    <div class="col-lg-6">
        <div class="input-group">        
          <input type="text" class="form-control" placeholder="Search by a substring in good's name..">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button" onclick="filter()">Search</button> 
          </span>
        </div>
  </div>  

        <div class="col-lg-6">          
          <button class="btn btn-default" type="button" onclick="addNew()">Add new</button>
        </div>
      </div>

Separete the col-lg-6 and input-group from the div

Bootply : http://www.bootply.com/W8ao9A0a4r

Upvotes: 1

ketchupisred
ketchupisred

Reputation: 651

See below. I moved the add new button code right next to your search button. The input is to the left and the add new button is to the right of that. If you want the add new button to hug the right side of the browser, let me know. 

<div class="actions row">
        <div class="input-group col-sm-6">        
          <input type="text" class="form-control" placeholder="Search by a substring in good's name..">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button" onclick="filter()">Search</button> 

          </span>
        </div>

        <div class="col-sm-6">          
          <button class="btn btn-default text-right" type="button" style="float:right; margin-right:-15px;" onclick="addNew()">Add new</button>
        </div>
      </div>

Upvotes: 0

Related Questions