Add Twitter Bootstrap icon to Input box

Question

How can we add a Twitter Bootstrap icon icon-search to the right of a text input element?

The following attempt placed all the icons inside the input el

Answer 1

Bootstrap 4.x with 3 different way.

1. Icon with default bootstrap Style

2. Icon Inside Input with default bootstrap class

3. Icon Inside Input with small custom css

   Custom Css

   .icon-inside {
         position: absolute;
         right: 10px;
         top: calc(50% - 12px);
         pointer-events: none;
         font-size: 16px;
         font-size: 1.125rem;
         color: #c4c3c3;
         z-index:3;
       }
   

.icon-inside {
      position: absolute;
      right: 10px;
      top: calc(50% - 12px);
      pointer-events: none;
      font-size: 16px;
      font-size: 1.125rem;
      color: #c4c3c3;
      z-index:3;
    }

    

    

    
Icon with default bootstrap Style

    

      
      

        
      
    

    
Icon Inside Input with default bootstrap class

    

      
      

        
      
    

    
Icon Inside Input with small custom css