How to place two input box next to each other using Bootstrap 4 ? - GeeksforGeeks

06 Sep, 2020
In this article, we will learn how to take two inputs in a single line in HTML. HTML supports various type of inputs like text, password, Date-Time, date, time, week, number, email, and a lot more. There are various conditions where we have to take multiple inputs in a single line or next to each other and this can be achieved by .input-group and inline element. The inline element does not take the entire line rather takes as much width as necessary.
Example 1: Taking input in two consecutive fields. 
html
<!DOCTYPE html><html>  <head>    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"        crossorigin="anonymous"></head>  <body>    <div class="input-group">          <!-- declaration for first field -->        <input type="text" class="form-control                 input-sm" value="input 1 " />          <!-- reducong the gap between them to zero -->        <span class="input-group-btn"             style="width:0px;"></span>          <!-- declaration for second field -->        <input type="text" class="form-control                 input-sm" value="input 2" />    </div></body>  </html>
Output:
Example 2: Taking input as two fields in one line. 
html
<!DOCTYPE html><html>  <head>    <link rel="stylesheet"         href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"         crossorigin="anonymous"></head>  <body>    <form class="form-inline" action="/action_page.php">      <label for="email">Email:</label>      <input type="email" id="email"             placeholder="Enter email" name="email">        <label for="pwd">Password:</label>      <input type="password" id="pwd"             placeholder="Enter password" name="pswd">      </form></body>  </html>
Output:
Example 3: Taking input in one line with mixed labels.
html
<!DOCTYPE html><html>  <head>    <link rel="stylesheet"         href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"         crossorigin="anonymous"></head>  <body>    <div class="input-group">        <span class="input-group-text">Between</span>        <input type="text" class="form-control"             placeholder="Type something..." />        <span class="input-group-text"             style="border-left: 0; border-right: 0;">            and        </span>        <input type="text" class="form-control"                 placeholder="Type something..." />    </div></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-4
Bootstrap-Misc
HTML-Misc
Picked
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property