How to give space between two input fields in bootstrap?
June 02, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, we will learn how to give space between two input fields in bootstra in bootstrap.
To give space between two input fields, putting .form-inline .form-group in the css class gives space to the input fields.
Table of contents
- Includes bootstrap view
- Includes bootstrap library
- Includes css in html page
- Define its class name
Step 1: Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">Step 2: Includes bootstrap library
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">Step 3: Includes css in html page
Here we are using in css class to add give space between two input fields .
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-control {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-group { margin-right:20px;}Step 4: Define its class name
After that, create the space between two input fields with a class name .input.
h1>Space between two input fields in bootstrap</h1>
<form class="form-inline" role="form">
<div class="form-group">
<label for="email2">Email:</label>
<input type="email" class="form-control" id="email2" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd2">Password:</label>
<input type="password" class="form-control" id="pwd2" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="button" class="btn btn-primery">Submit</button>
</body>Example.
Let’s look at the following example to understand how it basically works:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-control {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .form-group { margin-right:20px;}
</style>
<title>Bootstrap</title>
</head>
<body>
<h1>Space between two input fields in bootstrap</h1>
<form class="form-inline" role="form">
<div class="form-group">
<label for="email2">Email:</label>
<input type="email" class="form-control" id="email2" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd2">Password:</label>
<input type="password" class="form-control" id="pwd2" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="button" class="btn btn-primery">Submit</button>
</body>
</html>Check the output of the above code example.
All the best 👍
