CODEWITHSUNDEEP
csstwitter-bootstrap
simon peter
simon peter

Reputation: 403

Putting image beside an input field using bootstrap

I will like to put an image beside and input field using bootstrap. i want my output to be like :`enter image description here

but with the below code i get enter image description here

 <div class="form-group row">
      <label for="inputTitle" class="col-sm-2 col-form-label">Title</label>
      <div class="col-sm-10">
<span class="glyphicon glyphicon-phone"></span>
        <input type="title" class="form-control" id="inputTitle" >
      </div>
    </div>

Upvotes: 0

Views: 3131

Answers (2)

Fiftywebs
Fiftywebs

Reputation: 184

I think this should do it

<div class="form-group">
     <label class="control-label">Title</label>
     <div class="input-group"><span class="input-group-addon"></span>
           <input type="text" class="form-control">
     </div>
</div>

Upvotes: 2

DavidG
DavidG

Reputation: 119156

The form-control class will make your input 100% wide, meaning it will flow onto the next line. Additionally, it will make it display as a block element.

If I were you, I would look at using input groups instead, this is a nice tidy way of achieving the same effect:

Also, you have given your text input a type of title which is not valid. It's likely just a text input.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-phone"></span></span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

Upvotes: 2

Related Questions