CODEWITHSUNDEEP
twitter-bootstrap-3
Sam
Sam

Reputation: 731

Bottom align a button Bootstrap

is there a helper class that i can use to bottom align the "Search" button below. I am using Boostrap 3.2. 

<div class="input-group col-md-2">
  <label for="FirstName">First Name</label>
  <input class="form-control" id="FirstName" maxlength="10" name="FirstName" placeholder="First Name" type="text" value="" />
</div>
<div class="input-group col-md-2">
  <label for="LastName">Last Name</label>
  <input class="form-control" id="LastName" maxlength="10" name="LastName" placeholder="Last Name" type="text" value="" />
</div>
<div class="input-group col-md-2">
  <label for="RecordNo">Record No</label>
  <input class="form-control" id="RecordNo" maxlength="6" name="RecordNo" placeholder="Record No" type="text" value="" />
</div>

<div class="input-group col-md-3">
  <label for="Department">Department</label>
  <select id="Department" class="form-control">
    <option value="">CHOOSE DEPARTMENT</option>
  </select>
</div>
<div class="col-md-3 input-group">
  <button id="Search" class="btn btn btn-success pull-right">
    Search &nbsp;<span class="glyphicon glyphicon-search"></span>
  </button>
</div>

enter image description here

Upvotes: 1

Views: 7359

Answers (2)

Thuso Mokopotsa
Thuso Mokopotsa

Reputation: 31

By default, bootstrap column is position relativeso to position your button just use:

button{
    position:absolute;
    bottom:0
}

Upvotes: 3

Dhaval
Dhaval

Reputation: 2379

 .col-lg-4, .col-lg-8     
 { 

float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
 }

OR use this

       .vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
          }

Upvotes: 0

Related Questions