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...