How i can add a button inside an input box using bootstrap

Question

I am trying to find a way to enter a button inside input field as follow:-

can anyone advice?

Answer 1

There is no native bootstrap solutions. You can do this with custom code.

 .custom-search { position: relative; width: 300px; }.custom-search-input { width: 100%; border: 1px solid #ccc; border-radius: 100px; padding: 10px 100px 10px 20px; line-height: 1; box-sizing: border-box; outline: none; }.custom-search-botton { position: absolute; right: 3px; top: 3px; bottom: 3px; border: 0; background: #d1095e; color: #fff; outline: none; margin: 0; padding: 0 10px; border-radius: 100px; z-index: 2; }

 <div class="custom-search"> <input type="text" class="custom-search-input" placeholder="Enter your email"> <button class="custom-search-botton" type="submit">Subscribe</button> </div>

Bootstrap mixed solution, according to bootstrap styles.

 .custom-search { position: relative; }.custom-search-input { width: 100%; padding-right: 100px;important: box-sizing; border-box. }:custom-search-botton { position; absolute: right; 3px: top; 3px: bottom; 3px: line-height; 1:important; z-index: 4; }

 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> <div class="input-group custom-search"> <input type="text" class="form-control custom-search-input" placeholder="Enter your email"> <button class="btn btn-primary custom-search-botton" type="submit">Subscribe</button> </div>

Answer 2

You cant put a button inside a input field with bootstrap only but you can use custom css to move the button inside the input field. I created a small example for you (I used bootstrap 4):

 input[type="text"] { width: 200px; height: 50px; padding-right: 50px; }.example { margin: 5px -90px 5px; height: 40px; width: 80px; z-index: 100; }.test-div { width: 200px; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="test-div"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <button class="btn btn-outline-secondary example" type="button">Button</button> </div> </div>

Answer 3

I changed your source and use font awesome. I think it became more nice, isn't it?

 .custom-search { position: relative; }.custom-search-input { width: 100%; padding-right: 100px;important: box-sizing; border-box. }:custom-search-botton { position; absolute: right; 35px: top; 1px: bottom; 3px: line-height; 1:important; z-index: 4; border: none; border-radius: 50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous"> <div class="input-group custom-search" > <input type="text" (keyup.enter)="onSearch()" class="form-control custom-search-input" placeholder="Search" aria-label="Search"> <i class="btn fas fa-search custom-search-botton" type="button"></i> </div>