Bootstrap input-group-btn class



Use class .input-group-btn to wrap the buttons. This is required due to the default browser styles that cannot be overridden.

You can try to run the following code to implement the input-group-btn class in Bootstrap

Example

Live Demo

<!DOCTYPE html> <html>    <head>       <title>Bootstrap Example</title>       <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">       <script src = "/scripts/jquery.min.js"></script>       <script src = "/bootstrap/js/bootstrap.min.js"></script>    </head>    <body>       <div style = "padding: 100px 100px 10px;">          <form class = "bs-example bs-example-form" role = "form">             <div class = "row">                <div class = "col-lg-6">                   <div class = "input-group">                      <span class = "input-group-btn">                         <button class = "btn btn-default" type = "button">                            Go!                         </button>                      </span>                      <input type = "text" class = "form-control">                   </div><!-- /input-group -->                </div><!-- /.col-lg-6 --><br>                <div class = "col-lg-6">                   <div class = "input-group">                      <input type = "text" class = "form-control">                      <span class = "input-group-btn">                         <button class = "btn btn-default" type = "button">                            Go!                         </button>                      </span>                   </div>                </div>             </div>          </form>       </div>    </body> </html>
Updated on: 2020-06-12T16:01:38+05:30

928 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements