CODEWITHSUNDEEP
htmlcsstwitter-bootstrapangular-ui-bootstrap
Naila Akbar
Naila Akbar

Reputation: 3358

CSS alignment issue of textbox and button in bootstrap

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

enter image description here

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.

Upvotes: 1

Views: 1660

Answers (5)

Naila Akbar
Naila Akbar

Reputation: 3358

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>

Upvotes: 0

Troy
Troy

Reputation: 211

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!

Upvotes: 0

RAVI PATEL
RAVI PATEL

Reputation: 992

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>

Upvotes: 2

Gautam Jha
Gautam Jha

Reputation: 1473

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>

Upvotes: 2

Rambler
Rambler

Reputation: 5482

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.

Upvotes: 0

Related Questions