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

Last Updated : 6 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:

Comment

Explore