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">
<input type="text" class="form-control
input-sm" value="input 1 " />
<span class="input-group-btn"
style="width:0px;"></span>
<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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...