How to give space between two input fields in bootstrap?

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

Bootstrap, Input, Fields

All the best 👍