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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
        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>

chevron_right


Output:

Example 2: Taking input as two fields in one line. 



html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
        href=
        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>

chevron_right


Output:

Example 3: Taking input in one line with mixed labels.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
        href=
        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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.