CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3twitter-bootstrap-form
tdc
tdc

Reputation: 5464

Place icon inside submit button using Bootstrap 3

I am trying to achieve the effect as shown in below screenshot using Bootstrap 3.

enter image description here

As you can see, the search button is both:

1) inside the input

2) styled with a glyphicon so as to not appear like a "button".

How can I achieve a similar effect with Bootstrap 3? I would like to place a button with a magnifying glass glyphicon at the end of a text input, however the button keeps appearing below the input as opposed to inside of it.

Upvotes: 8

Views: 20218

Answers (3)

hugorut
hugorut

Reputation: 151

The problem is because the button is adhering to the normal flow of html and thus appears below the first element. What you need to do is wrap both the input and search button in an div and then make the search button absolute positioning. Then you can ad some jQuery functionality on a click function to achieve an event is needs be.

<html>
<body>

    <div>
        <input type="text" value="test"/>
        <span id="search" class="absolute">x</span>
    </div>
  

 <style>
    .absolute {
       position:absolute;
       top:9px;
       left:115px;
             }

 </style>

 <script>
    $(document).on('click','#search',function(){
     //some functionality
    }

 </script>


</body>

</html>

Upvotes: 1

Niklas
Niklas

Reputation: 1777

A wrapper div with position: relative; then positioning the submit button on top using position: absolute;. Like this:

http://jsfiddle.net/VtP5k/

HTML

<form>

    <div id="search">

        <input type="text" />
        <button type="sutmit">Search</button>

    </div>

</form>

CSS

#search {
    position: relative;
    width: 200px;
}

#search input {
    width: 194px;
}

#search button {
    position: absolute;
    top: 0;
    right: 0;
    margin: 3px 0;
}

Upvotes: 9

Suresh Karia
Suresh Karia

Reputation: 18218

Try this.

In bootstrap you have to use button type submit instead of input type; Both works fine! use button in bootstrap!

div {
  padding: 15px;
  background: #000;
}
.btn {
  text-align: left !important;
  font-size: 12px !important;
  padding: 20px 12px !important;
  width: 200px !important;
  color: #888 !important;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<div>
<button type="submit" class="btn btn-default">
  awesomeness <span class="glyphicon glyphicon-search pull-right"></span> 
</button>
  <div>

Or see this fiddle

<button type="submit" class="btn btn-default">
Awesomeness <span class="glyphicon glyphicon-search"></span> 
</button>

Upvotes: 3

Related Questions