Search input with an icon Bootstrap 4

Question

No clue how I can do this  since BS 4 doesn t support glyphicons  Do I set it up as a background or do I apply different positioning to a font-awesome icon    This is my code so far    x000D   x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css  integrity  sha384-rwoIResjU2yc3z8GV NPeZWAv56rSmLldC3R AZzGRnGxQQKnKkoFVhFQhNUwEyJ  crossorigin  anonymous  gt  x000D   x000D   lt div class  form-group col-md-4  gt  x000D     lt input class  form-control rounded-0 py-2  type  search  value  search  id  example-search-input  gt  x000D   lt  div gt  x000D   lt  --   form-group -- gt  x000D   x000D   x000D    I want to use this font-awesome icon  And I ve tried adding it as a background-image too  as in    form-control     background-image  url  https   res cloudinary com dt9b7pad3 image upload v1502810110 angle-down-dark dkyopo png      background-position  right center 5px      But that doesn t do anything  The only way I can think of is to add font-awesome icon and then set the positioning to absolute  right  But I m not sure if that s the  clean  and correct way to do it  Do I need to take a different approach to this  Someone help  Thank you

User · Accepted Answer

Update 2019  Why not use an input-group    lt div class  input-group col-md-4  gt         lt input class  form-control py-2  type  search  value  search  id  example-search-input  gt         lt span class  input-group-append  gt           lt button class  btn btn-outline-secondary  type  button  gt               lt i class  fa fa-search  gt  lt  i gt           lt  button gt         lt  span gt   lt  div gt    And  you can make it appear inside the input using the border utils              lt div class  input-group col-md-4  gt               lt input class  form-control py-2 border-right-0 border  type  search  value  search  id  example-search-input  gt               lt span class  input-group-append  gt                 lt button class  btn btn-outline-secondary border-left-0 border  type  button  gt                       lt i class  fa fa-search  gt  lt  i gt                 lt  button gt               lt  span gt           lt  div gt    Or  using a input-group-text w o the gray background so the icon appears inside the input              lt div class  input-group  gt               lt input class  form-control py-2 border-right-0 border  type  search  value  search  id  example-search-input  gt               lt span class  input-group-append  gt                   lt div class  input-group-text bg-transparent  gt  lt i class  fa fa-search  gt  lt  i gt  lt  div gt               lt  span gt           lt  div gt    Alternately  you can use the grid  row col-  with no gutter spacing    lt div class  row no-gutters  gt        lt div class  col  gt             lt input class  form-control border-secondary border-right-0 rounded-0  type  search  value  search  id  example-search-input4  gt        lt  div gt        lt div class  col-auto  gt             lt button class  btn btn-outline-secondary border-left-0 rounded-0 rounded-right  type  button  gt                lt i class  fa fa-search  gt  lt  i gt             lt  button gt        lt  div gt   lt  div gt    Or  prepend the icon like this      lt div class  input-group  gt     lt span class  input-group-prepend  gt       lt div class  input-group-text bg-transparent border-right-0  gt         lt i class  fa fa-search  gt  lt  i gt       lt  div gt     lt  span gt     lt input class  form-control py-2 border-left-0 border  type  search  value       id  example-search-input    gt     lt span class  input-group-append  gt       lt button class  btn btn-outline-secondary border-left-0 border  type  button  gt       Search      lt  button gt     lt  span gt   lt  div gt    Demo of all Bootstrap 4 icon input options        Example with validation icons

User · Answer

I made another variant with dropdown menu  perhaps for advanced search etc    Here is how it looks like      lt div class  input-group my-4 col-6 mx-auto  gt       lt input class  form-control py-2 border-right-0 border  type  search  placeholder  Type something     id  example-search-input  gt       lt span class  input-group-append  gt           lt button type  button  class  btn btn-outline-primary dropdown-toggle dropdown-toggle-split border border-left-0 border-right-0 rounded-0  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt               lt span class  sr-only  gt Toggle Dropdown lt  span gt           lt  button gt           lt button class  btn btn-outline-primary rounded-right  type  button  gt               lt i class  fas fa-search  gt  lt  i gt           lt  button gt           lt div class  dropdown-menu dropdown-menu-right  gt               lt a class  dropdown-item  href     gt Action lt  a gt               lt a class  dropdown-item  href     gt Another action lt  a gt               lt a class  dropdown-item  href     gt Something else here lt  a gt               lt div role  separator  class  dropdown-divider  gt  lt  div gt               lt a class  dropdown-item  href     gt Separated link lt  a gt           lt  div gt       lt  span gt   lt  div gt    Note  It appears green in the screenshot because my site main theme is green

User · Answer

in ASPX bootstrap v4 0 0  no beta  dl 21-01-2018    lt div class  input-group  gt   lt asp TextBox ID  txt Product  runat  server  CssClass  form-control  placeholder  Product  gt  lt  asp TextBox gt   lt div class  input-group-append  gt       lt asp LinkButton ID  LinkButton3  runat  server  CssClass  btn btn-outline-primary  gt           lt i class  ICON-copyright  gt  lt  i gt       lt  asp LinkButton gt   lt  div gt

User · Answer

Here s a fairly simple way to achieve it by enclosing both the magnifying glass icon and the input field inside a div with relative positioning   Absolute positioning is applied to the icon  which takes it out of the normal document layout flow   The icon is then positioned inside the input   Left padding is applied to the input so that the user s input appears to the right of the icon   Note that this example places the magnifying glass icon on the left instead of the right  This is recommended when using  lt input type  search  gt  as Chrome adds an X button in the right side of the searchbox   If we placed the icon there it would overlay the X button and look fugly   Here is the needed Bootstrap markup    lt div class  position-relative  gt       lt i class  fa fa-search position-absolute  gt  lt  i gt       lt input class  form-control  type  search  gt   lt  div gt       and a couple CSS classes for the things which I couldn t do with Bootstrap classes   i       font-size  1rem      color   333      top   75rem      left   75rem    input       padding-left  2 5rem      You may have to fiddle with the values for top  left  and padding-left

User · Answer

Here is an input box with a search icon on the right                    lt div class  input-group  gt         lt input class  form-control py-2 border-right-0 border  type  search  placeholder  Search  gt         lt div class  input-group-append  gt             lt div class  input-group-text  id  btnGroupAddon2  gt  lt i class  fa fa-search  gt  lt  i gt  lt  div gt         lt  div gt     lt  div gt    Here is an input box with a search icon on the left                    lt div class  input-group  gt         lt div class  input-group-prepend  gt             lt div class  input-group-text  id  btnGroupAddon2  gt  lt i class  fa fa-search  gt  lt  i gt  lt  div gt         lt  div gt         lt input class  form-control py-2 border-right-0 border  type  search  placeholder  Search  gt     lt  div gt

User · Answer

you can also do in this way using input-group   lt div class  input-group  gt     lt input class  form-control           placeholder  I can help you to find anything you want   gt     lt div class  input-group-addon   gt  lt i class  fa fa-search  gt  lt  i gt  lt  div gt   lt  div gt    codeply

[css] Search input with an icon Bootstrap 4

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4

Examples related to font-awesome