Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 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=
        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=
        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=
        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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :