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
<!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:
Please Login to comment...