Put search icon near textbox using bootstrap

Question

I am using bootstrap by default textbox taking full width of column and I want to  put search icon at the end to textbox   My code is like this    lt div class  container  gt       lt div class  row  gt           lt div class  form-group col-lg-4  gt               lt label class  control-label  gt Name lt  label gt               lt input id  txtName  class  form-control input-sm    gt               lt span class  glyphicon glyphicon-search  gt  lt  span gt            lt  div gt           lt div class  col-lg-4  gt  lt  div gt           lt div class  col-lg-4  gt  lt  div gt       lt  div gt   lt  div gt    I don t want to use input group   Please suggest an alternate way or alternate html with css

User · Answer

I liked  KyleMit s answer on how to make an unstyled input group  but in my case  I only wanted the right side unstyled - I still wanted to use an input-group-addon on the left side and have it look like normal bootstrap  So  I did this   css   input-group input-group-unstyled-right input form-control       border-top-right-radius  4px      border-bottom-right-radius  4px     input-group-unstyled-right  input-group-addon input-group-addon-unstyled       border-radius  4px      border  0px      background-color  transparent      html   lt div class  input-group input-group-unstyled-right  gt       lt span class  input-group-addon  gt           lt i class  fa fa-envelope-o  gt  lt  i gt       lt  span gt       lt input type  text  class  form-control  gt       lt span class  input-group-addon input-group-addon-unstyled  gt           lt i class  fa fa-check  gt  lt  i gt       lt  span gt   lt  div gt

User · Answer

Here are three different ways to do it   Here s a working Demo in Fiddle Of All Three Validation  You can use native bootstrap validation states  No Custom CSS     lt div class  quot form-group has-feedback quot  gt       lt label class  quot control-label quot  for  quot inputSuccess2 quot  gt Name lt  label gt       lt input type  quot text quot  class  quot form-control quot  id  quot inputSuccess2 quot   gt       lt span class  quot glyphicon glyphicon-search form-control-feedback quot  gt  lt  span gt   lt  div gt   For a full discussion  see my answer to Add a Bootstrap Glyphicon to Input Box Input Group  You can use the  input-group class like this   lt div class  quot input-group quot  gt       lt input type  quot text quot  class  quot form-control quot   gt       lt span class  quot input-group-addon quot  gt           lt i class  quot fa fa-search quot  gt  lt  i gt       lt  span gt   lt  div gt   For a full discussion  see my answer to adding Twitter Bootstrap icon to Input box Unstyled Input Group  You can still use  input-group for positioning but just override the default styling to make the two elements appear separate  Use a normal input group but add the class input-group-unstyled   lt div class  quot input-group input-group-unstyled quot  gt       lt input type  quot text quot  class  quot form-control quot    gt       lt span class  quot input-group-addon quot  gt           lt i class  quot fa fa-search quot  gt  lt  i gt       lt  span gt   lt  div gt   Then change the styling with the following css   input-group input-group-unstyled input form-control       -webkit-border-radius  4px         -moz-border-radius  4px              border-radius  4px     input-group-unstyled  input-group-addon       border-radius  4px      border  0px      background-color  transparent      Also  these solutions work for any input size

User · Answer

lt input type  text  name  whatever  id  funkystyling    gt    Here s the CSS for the image on the left    funkystyling       background  white url  path to icon png  left no-repeat      padding-left  17px      And here s the CSS for the image on the right    funkystyling       background  white url  path to icon png  right no-repeat      padding-right  17px

User · Answer

You can do it in pure CSS using the  after pseudo-element and getting creative with the margins   Here s an example  using Font Awesome for the search icon    x000D   x000D   search-box-container input   x000D    padding  5px 20px 5px 5px  x000D    x000D   x000D   search-box-container after   x000D      content    f002   x000D      font-family  FontAwesome  x000D      margin-left  -25px  x000D      margin-right  25px  x000D    x000D   lt  -- font awesome -- gt  x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 7 0 css font-awesome min css  rel  stylesheet   gt  x000D   x000D   x000D   lt div class  search-box-container  gt  x000D     lt input type  text  placeholder  Search        gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Adding a class with a width of 90  to your input element and adding the following input-icon class to your span would achieve what you want I think    input   width  90      input-icon       display  inline-block      height  22px      width  22px      line-height  22px      text-align  center      color   000      font-size  12px      font-weight  bold      margin-left  4px      EDIT Per dan s suggestion  it would not be wise to use  input as the class name  some more specific would be advised   I was simply using  input as a generic placeholder for your css

[html] Put search icon near textbox using bootstrap

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to icons