CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Robert Ross
Robert Ross

Reputation: 1189

Displayin two elements on one line

I have a bootstrap input field and a font awesome edin icon. Currently the icon is displayed below the input box. What I am trying to do is to display them on one line. Sadly, as basic as this is, i can't make it work. I tried with floating the elements, giving them an inline-block and other thing, which didn't work. Please, help : 

<div class="col-sm-2">
              <input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"><i class="fa fa-pencil" aria-hidden="true"></i>
            </div>

Upvotes: 2

Views: 53

Answers (3)

Sarower Jahan
Sarower Jahan

Reputation: 1495

I have a simple solution by css. Firstly add a new class to column.

HTML=>>>

<div class="col-sm-2 myForm">
     <input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly"><i class="fa fa-pencil" aria-hidden="true"></i>
</div>

CSS=>>>

.myForm .form-control{
     float:left;
     width:calc(100% - 35px);
}
.myForm .fa{
     float:right;
     width:30px;
 }

Try this ... Here is the live demo on jsfiddle

Better solution is bootstrap form css. Follow this link: http://getbootstrap.com/css/#forms

Upvotes: 0

Zeev Katz
Zeev Katz

Reputation: 2273

You should try display: flex; on the container and <i> tag & align-self: center; only on the <i>.

Here an example:

.col-sm-2 {
  display: flex;
}

.col-sm-2 > i {
  display: flex;
  align-self: center;
  width: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-2">
  <i class="fa fa-pencil" aria-hidden="true"></i>
  <input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly">
</div>

Fiddle demo

Upvotes: 1

Joan Vil&#224;
Joan Vil&#224;

Reputation: 265

According to the bootstrap documentation (http://getbootstrap.com/css/#forms-inline) you can use the input group with an addon to put the icon inside the addon:

<div class="input-group">
  <input type="email" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly">
  <div class="input-group-addon">
    <i class="fa fa-pencil" aria-hidden="true"></i>
  </div>
</div>

Upvotes: 2

Related Questions