0

Countless SO posts, countless attempts, and this is the closest I could achieve. I think most of the answers are outdated but I couldn't find any that work for Bootstrap 5.

How can I vertically and horizontally center the page content in bootstrap 5, no matter the screen resolution?

Code so far:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-8 p-0">
        <div class="jumbotron min-vh-100 text-center m-0 d-flex flex-column justify-content-center">
          <h1 class="display-4">Welcome Back</h1>
          <p class="lead">Enter your account details below.</p>
          <form>
            <div class="form-group">
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
              <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-check">
              <input type="checkbox" class="form-check-input" id="exampleCheck1">
              <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
          <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
BSdoukos
  • 513
  • 3
  • 12
Whole_Patience9125
  • 11
  • 3
  • 1
    As I've said in my question, I've tried the existing questions "site:stackoverflow.com bootstrap horizontal and veritical alignment" and I also stated it didn't work which is why I'm slightly confused why its been suggested. If we redirect to a subset of a problem which is a subset of the actual problem how will the problem ever be solved? – Whole_Patience9125 Aug 23 '21 at 19:39
  • I believe you need the basics, probably from those answers that don't work for you => `d-flex`, `align-items-center` and `flex-column` or `flex-row`. Also your `height` is important. Not only on the element but also on all parents untill `html, body`. Please review one of my answers and upvote if it helped you out, as this question is now closed. [Reason for height](https://stackoverflow.com/questions/64958601/bootstrap-h-100-applied-to-html-or-body-tag/64986322#64986322) [Flex center](https://stackoverflow.com/questions/32402001/flexbox-center-and-bottom-right-item/51058417#51058417) – Tim Vermaelen Aug 23 '21 at 20:52

0 Answers0