Bootstrap 4 Input Groups | How to add button with textbox

bootstrap 4 search box with icon inside

Hello friends today in this article we will learn how to add button with textbox inline.

Here in Bootstrap .input-group class is a container to contain button, icon, and text with text box.

Use .input-group-prepend to add button, icon, and text before textbox, and use class .input-group-append to add button, icon, and text after textbox.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  
  <style type="text/css">
  
  
     input:focus, textarea:focus, select:focus{
        outline: none;
    }
  
     select
	 {
		 border:1px solid #ced4da !important;
	 }
	 
	 .form-control
	 {
		 box-shadow:0px !important;
	 }
	 
  </style>
<div class="container mt-4">
<div class="row">
<div class="col-md-6">
 <form action="#">
   
    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Your Email" id="mail" name="email">
      <div class="input-group-append">
        <span class="input-group-text">SUMBIT</span>
      </div>
    </div>
    
    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Enter Amount" id="mail" name="email">
      <div class="input-group-append">
          <select>
             <option>Select Currency</option>
             <option>Rupees</option>
             <option>Dollor</option>
             <option>Euro</option>
          </select>
      </div>
    </div>
    
  </form>
</div>
</div>
</div>
</div>

Leave a Reply

avatar
  Subscribe  
Notify of