LP13 LP13 - 24 days ago 13
CSS Question

How to get control and icon on the same line in bootstrap?

I am using bootstrap's grid system for page layout. In one of the column i want to show

input
control and font awesome icon in the same column side by side. However i am not able to get icon aligned properly. it always goes below the control.

Here is the JSfiddle

Can someone please help me?

Answer

Issue is that your not using form classes of bootstrap correctly. Bootstrap gives you ability to use it's form based classes and font awesome classes to design specifically. You can use the following html and bootstrap classes to achieve this.

HTML:

<div class="row">
   <div class="col-md-6">
      <div class="input-group">
          <input name="FirstName" class="form-control" id="FirstName" type="text">
          <span class="input-group-addon">
              <i class="fa fa-minus-circle" aria-hidden="true"></i>
          </span>
      </div>
   </div>
</div>

CSS:

.input-group-addon {
    cursor: pointer;
    color: red;
}

If you want to remove the background and bordering that joins the icon to the input then just change the .input-group-addon { css class to following.

.input-group-addon {
     cursor: pointer;
     color: red;
     border-radius: 4px;
     border: 0px;
     background-color: transparent;
}

Sample: http://codepen.io/Nasir_T/pen/VmvBXV

Comments