CSS alignment issue of textbox and button in bootstrap

Question

I'm newbie in Angular and trying to develop my first application but stuck in alignment using bootstrap classes.

Here is my Code:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="form-group col-md-4"> <label>Client</label> <Select class="form-control"> <option>Client 1</option> <option>Client 2</option> <option>Client 3</option> <option>Client 4</option> <option>Client 5</option> <option>Client 6</option> </Select> </div> <div class="form-group col-md-4"> <button type=submit class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Add</button> </div> <div class="form-group col-md-4"> <button type="submit" class="btn btn-sm btn-info pull-right" vertical-align="bottom"><i class="fa fa-dot-circle-o"></i> Get Data</button> </div> </div> 

and here the output of this code

Problem is that all these inputs are top-aligned but I want client dropdown and both buttons to be bottom aligned.

I tried input-group-btn class but that didn't work for me. Even here on StackOverflow, I found solutions only about right-alignment.

Answer 1

try this code, i am not sure but <label >&nbsp;</label> this should work to align them in one line.

update this css

<style>    
   label {
        width: 100%;
    }
</style>

 label { width: 100%; } 

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div class="row"> <div class="form-group col-md-4"> <label >Client</label> <Select class="form-control" > <option>Client 1</option> <option>Client 2</option> <option>Client 3</option> <option>Client 4</option> <option>Client 5</option> <option>Client 6</option> </Select> </div> <div class="form-group col-md-4"> <label >&nbsp;</label> <button type=submit class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Add </button> </div> <div class="form-group col-md-4"> <label >&nbsp;</label> <button type="submit" class="btn btn-sm btn-info pull-right" vertical-align="bottom"><i class="fa fa-dot-circle-o"></i> Get Data </button> </div> </div> 

Answer 2

you can also apply margin-top css style to div which contains those buttons.

<style>    
   .margin_top_25 {
       margin-top:25px;
    }
</style>

<div class="row">
  <div class="form-group col-md-4">
    <label >Client</label>
    <Select class="form-control" >
      <option>Client 1</option>
      <option>Client 2</option>
      <option>Client 3</option>
      <option>Client 4</option>
      <option>Client 5</option>
      <option>Client 6</option>
    </Select>
  </div>
  <div class="form-group col-md-4 margin_top_25">
    <button type=submit class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Add </button>
  </div>
  <div class="form-group col-md-4 margin_top_25">
    <button type="submit" class="btn btn-sm btn-info pull-right" vertical-align="bottom"><i class="fa fa-dot-circle-o"></i>  Get Data </button> 
  </div>
</div>

Answer 3

Create a table instead and vertical align your tds :

<table>
  <tr class="row">
   <td class="col-md-4"><label >Client</label>
    <Select class="form-control" >
      <option>Client 1</option>
      <option>Client 2</option>
      <option>Client 3</option>
      <option>Client 4</option>
      <option>Client 5</option>
      <option>Client 6</option>
    </Select>
   </td>
   <td class="col-md-4">
     <button type=submit class="btn btn-sm btn-success"><i class="fa      fa-dot-circle-o"></i> Add </button>
   </td>
   <td class="col-md-4">
     <button type="submit" class="btn btn-sm btn-info pull-right"  vertical-align="bottom"><i class="fa fa-dot-circle-o"></i>  Get Data </button> 
   </td>
</tr>
</table>

And then :

td{
 vertical-align:bottom
}

Note : This is not an absolute solution.Tweak your css and html to get the exact layout , but this should align your elements as desired.

Answer 4

You can do this alignment by using flex-box. I have attached a plunker I created. If you have any questions then please let me know.

Plunkr

.form-group {
  width: 50%;
  margin: 0 auto;
  margin-top: 10%;
}

.client-label {
  margin-left: 40%;
  font-size: 3vw;
  text-transform: uppercase;
  color: teal;
}

.add-button {
  width: 100px;
}

.data-button {
  width: 100px;
}

div.form-group {
  width: 50%;
  margin-left: 25%;
}

.buttons {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  justify-content: space-between;
}

Thanks!

Answer 5

div inside div resolved my problem.. here is my code

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

 <div class="row">
     <div class="col-md-12">
          <label >Client</label>
          <div class="row">
               <div class="form-group col-md-4">
                     <Select class="form-control" >
                           <option>Client 1</option>
                           <option>Client 2</option>
                           <option>Client 3</option>
                           <option>Client 4</option>
                           <option>Client 5</option>
                           <option>Client 6</option>
                          </Select>
                         </div>
                         <div class="form-group col-md-4">
                             <button type=submit class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> Add </button>
                         </div>
                         <div class="form-group col-md-4">
                              <button type="submit" class="btn btn-sm btn-info pull-right" vertical-align="bottom"><i class="fa fa-dot-circle-o"></i>  Get Data </button> 
                          </div>
                      </div>

              </div>
            </div>