Css - Bootstrap 5 how to center inline form

peppap1g
May 3, 2023
253 views
0 votes
2 Answers

I need an inline form that consists of rows. One such row has an input field that should take up 5 columns, and a button that just wraps its content.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body>
  <div class=""> <!---no aligning--->
    <form class="bg-dark">
      <div class="row">
        <div class="col-5"> <!---works well, input takes 5 columns--->
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="col">
          <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
      </div>
    </form>
  </div>
</body>

The problem is, I also want to center align that form (horizontally and vertically) inside the parent div, so I apply the following classes to the parent div: d-flex justify-content-center align-items-center h-100. Then, the form is centered, but the input field no longer takes up 5 columns. I’ve colored the form grey and the parent div black, so you could see, that the form doesn’t take up the whole width anymore.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body>
  <div class="d-flex justify-content-center align-items-center h-100 bg-secondary"> <!---center align--->
    <form class="bg-dark">
      <div class="row">
        <div class="col-5"> <!---input doesn't take 5 columns--->
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="col">
          <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
      </div>
    </form>
  </div>
</body>

Can you please help me center this form?

Answers

If I understood correctly, this small change in the code will help you in the solution. If not, I’ll see another approach

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <form class="row bg-dark justify-content-center">
      <div class="col-5">
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-primary">Sign in</button>
      </div>
    </form>
  </div>
</body>

I think issue is your parent div container not taking full width and height.
Add new css to html and body with full height 100%
Add new css class to parent container height 100%
Here is updated full code

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <style>
    html,
    body {
      height: 100%;
    }

    .full-height {
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="d-flex justify-content-center align-items-center h-100 bg-secondary full-height">
    <form class="bg-dark">
      <div class="row">
        <div class="col-5">
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="col">
          <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
      </div>
    </form>
  </div>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – Bootstrap 5 how to center inline form

Answers