CODEWITHSUNDEEP
csstwitter-bootstrap
David Gourde
David Gourde

Reputation: 3914

Inline input and image in a bootstrap form

I'm new to bootstrap and was wondering how could I place my icon/picture inline to the right of my textfield?

I would like my textField to be a little bit smaller (without hardcoding anything) so the image is on the same line, using the same space. I should work with any col-*-* screen size.

This is my code right now. The image is under the textfield instead of at it's right.

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

<br>
<br>
<div class="col-lg-6">
  <div class="input-group" style="float:left;">
    <textarea class="form-control"></textarea>
    <div style="float:left;"><a href="#" tabindex="-1" style="width: 100%;"><img class="clIcon" src="http://dummyimage.com/15x15/26bf8f/fff" /></a></div>
  </div>
</div>

PS: I tried to use form-inline with form-controlon the text field and the image, but it did not work. It's possible I did something incorrectly.

Upvotes: 0

Views: 1014

Answers (1)

T J
T J

Reputation: 43166

Use proper markup for input group and just override the styles you don't want:

.input-group .input-group-addon {
  background-color: transparent;
  border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<br>
<br>
<div class="col-lg-6">
  <div class="input-group">
    <textarea class="form-control"></textarea>
    <span class="input-group-addon" id="basic-addon1"><a href="#" tabindex="-1"><img class="clIcon" src="http://dummyimage.com/15x15/26bf8f/fff" /></a></span>
  </div>
</div>

Upvotes: 1

Related Questions