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.

what do you mean by "top-aligned"? how do you exactly want it to be? — Roysh, Jun 09 '16 at 08:09
@Roysh I want Add button aligned with client dropdown not with client label as it is right now — Naila Akbar, Jun 09 '16 at 08:14
Got it. Well the easiest and ugliest solution is to add some padding/margin to the the buttons and align them with the input. Otherwise, try to take the label tag out of the row. Btw, can you try to upload a fiddle? — Roysh, Jun 09 '16 at 08:16
I tried margin/ padding and it worked for me but that's not a good solution. Isn't there something like pull-right? — Naila Akbar, Jun 09 '16 at 08:18
And in case of Label, empty label does not work and a label with content is useless for me — Naila Akbar, Jun 09 '16 at 08:19
try to look here: http://stackoverflow.com/questions/14416563/bootstrap-use-pull-right-without-having-to-hardcode-a-negative-margin-top http://stackoverflow.com/questions/19404861/bootstrap-3-pull-right-for-col-lg-only — Roysh, Jun 09 '16 at 08:19

Gautam Jha · Answer 1 · 2016-06-09T08:33:38.080

try this code, i am not sure but <label > </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>

Impossible, it may work. I don't like this empty tags, but it should work perfectly. You are missing some details — Marcos Pérez Gude, Jun 09 '16 at 08:32
I've used your code and place the label tag outside of the to row tag and it seems to work — Roysh, Jun 09 '16 at 08:32
look at this fiddle: https://jsfiddle.net/DTcHh/ Pull the window wide to view the result as a full page — Roysh, Jun 09 '16 at 08:34

score 2 · Answer 2 · answered Jun 09 '16 at 08:47

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>

score 0 · Answer 3 · answered Jun 09 '16 at 08:31

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.

Tables are not responsive.. and i guess for two inputs, table implementation isn't good approach — Naila Akbar, Jun 10 '16 at 07:24

Troy · Answer 4 · 2016-06-09T09:37:18.340

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!

score 0 · Accepted Answer · answered Jun 10 '16 at 09:58

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>

CSS alignment issue of textbox and button in bootstrap

5 Answers5