CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3font-awesome
LP13
LP13

Reputation: 34089

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?

Upvotes: 1

Views: 7222

Answers (3)

Nasir T
Nasir T

Reputation: 2643

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

Upvotes: 3

Sam W
Sam W

Reputation: 599

float:left is what you are looking for here. Just apply it to both the input and the icon's class and set the input's width so that it doesn't take up the whole width of the screen.

.mt-remove {
  cursor: pointer;
  color: red;
  float: left;
}
.mt-remove:before {
  font-family: 'FontAwesome';
  content: "\f056";
  font-size: 12px;
}
#FirstName {
  width: 200px;
  float: left;
}

Adding line-height on the mt-remove class might help you out also, if you find it useful.

Upvotes: 0

James
James

Reputation: 323

Grid system is based on a 12 column layout. You currently have two elements inside one 6 column.

Try two 6 columns instead:

<div class="row">
<div class="col-md-6">input</div>
<div class="col-md-6">icon</div>
</div>

Upvotes: 0

Related Questions