How to align a form in center in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To make a bootstrap form center, you have to use a combination of rowand mx-auto col-10 col-md-8 col-lg-6 bootstrap class.

This will work perfectly even if you check in your mobile, tablet, or desktop devices means it’s responsive.

See the short example of making a bootstrap center form.

<div class="row">
  <div class="mx-auto col-10 col-md-8 col-lg-6">
    <!-- Form -->
    <form class="form-example" action="" method="post">
      <h1>Bootstrap 5: Align Center</h1>
      <p class="description">
        A tutorial on how to align a "form" in Bootstrap 4 and 5.
      </p>
      <!-- Input fields -->
      <div class="form-group">
        <label for="username">Username:</label>
        <input
          type="text"
          class="form-control username"
          id="username"
          placeholder="Username..."
          name="username"
        />
      </div>
      <div class="form-group">
        <label for="password">Password:</label>
        <input
          type="password"
          class="form-control password"
          id="password"
          placeholder="Password..."
          name="password"
        />
      </div>

      <button type="submit" class="btn btn-primary btn-customized mt-4">
        Login
      </button>
    </form>
    <!-- Form end -->
  </div>
</div>

In this article, you will see an example of form align center bootstrap and I will provide a sample program for bootstrap 5 and bootstrap 4.

Let’s start today’s tutorial how to center form in bootstrap

Example of form center in bootstrap ( horizontally )

In this example, I will do

  1. Create the first div tag with the row class.
  2. Create a second div tag with the mx-auto col-10 col-md-8 col-lg-6 class to make the form center and responsive.
  3. Put bootstrap form tag within second div.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <title>How to Align Responsive Image in Center in Bootstrap</title>
  </head>
  <body>
    <div>
      <div class="row">
        <div class="mx-auto col-10 col-md-8 col-lg-6">
          <!-- Form -->
          <form class="form-example" action="" method="post">
            <h1>Bootstrap 5: Align Center</h1>
            <p class="description">
              A tutorial on how to align a "form" in Bootstrap 4 and 5.
            </p>
            <!-- Input fields -->
            <div class="form-group">
              <label for="username">Username:</label>
              <input
                type="text"
                class="form-control username"
                id="username"
                placeholder="Username..."
                name="username"
              />
            </div>
            <div class="form-group">
              <label for="password">Password:</label>
              <input
                type="password"
                class="form-control password"
                id="password"
                placeholder="Password..."
                name="password"
              />
            </div>

            <button type="submit" class="btn btn-primary btn-customized mt-4">
              Login
            </button>
          </form>
          <!-- Form end -->
        </div>
      </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

The output of the above program of bootstrap form a horizontal center.

bootstrap, horizontal center from

Here, we are provided code sandbox links for the above program for the bootstrap center form input examples. Then you can use it whenever you want and do the changes as per your requirements.

Try It Yourself

Example of form center in bootstrap ( horizontally and vertically both )

In this example, I will do all the above things which I have done above example with

  1. Make form height 100vh to provide vertical space.
  2. Use the align-items-center class to make the vertical center of the page.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <title>How to Align Responsive Image in Center in Bootstrap</title>
  </head>
  <body>
    <div>
      <div class="row align-items-center" style="height: 100vh;">
        <div class="mx-auto col-10 col-md-8 col-lg-6">
          <!-- Form -->
          <form class="form-example" action="" method="post">
            <h1>Bootstrap 5: Align Center</h1>
            <p class="description">
              A tutorial on how to align a "form" in Bootstrap 4 and 5.
            </p>
            <!-- Input fields -->
            <div class="form-group">
              <label for="username">Username:</label>
              <input
                type="text"
                class="form-control username"
                id="username"
                placeholder="Username..."
                name="username"
              />
            </div>
            <div class="form-group">
              <label for="password">Password:</label>
              <input
                type="password"
                class="form-control password"
                id="password"
                placeholder="Password..."
                name="password"
              />
            </div>

            <button type="submit" class="btn btn-primary btn-customized mt-4">
              Login
            </button>
          </form>
          <!-- Form end -->
        </div>
      </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

The output of the above program of bootstrap forms horizontally and vertically in both centers of the page.

bootstrap, center of page

Here, we are provided code sandbox links for the above program for the bootstrap center input examples. Then you can use it whenever you want and do the changes as per your requirements.

Try It Yourself

Example Links

Here is the example code of the make form center in Bootstrap 5, and 4 versions.

  1. Example of bootstrap 5 horizontal from and inputs
  2. Example of bootstrap 5 horizontal and vertical from and inputs
  3. Example of bootstrap 4 horizontal from and inputs
  4. Example of bootstrap 4 horizontal and vertical from and inputs

Happy Coding,

I hope the above example with help you to do your task.

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Related Posts