0

I can't seem to get my content to vertically and horizontally center in the body of the page itself in Bootstrap 4. I've used the documentation and multiple answers throughout StackOverflow with those with the same problem to no avail. I'm unsure why this won't work. Help and explanations are appreciated.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container-fluid h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <div class="col-sm-12">
      <h1>This is the test</h1>
      <a href="#">Let's get started</a>
    </div>
  </div>
</div>
user5854648
  • 1,029
  • 2
  • 11
  • 36
  • Can you add how your body and content looks like ? – Always Helping Aug 07 '20 at 07:02
  • It [does work](https://codeply.com/p/liUT9zWCWJ) if you follow the guidance in the many other questions on SO. `h-100` means 100% of the parent. In the case of the entire page the parents are `` and ``. Do your `` and `` have a defined height? If not, you must use `vh-100` for `height:100vh` which doesn't require the parent to have a defined height. – Carol Skelly Aug 07 '20 at 11:58

1 Answers1

0

Hope fully it will help to you easily

<!DOCTYPE html>
    <html lang="en">
       <head>
          <title>Bootstrap Align Center Examples</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
       </head>
       <body>
          <div class="jumbotron text-center">
             <h1>Working In center</h1>
             <p>Well, Hope your Issue is Solved..</p>
          </div>
       </body>
    </html>
Eibs
  • 86
  • 8
  • This doesn't really resolve it because I want the whole content to be vertically and horizontally centered. Meaning I want the entire DIV content to be in the absolute center of the page – user5854648 Aug 07 '20 at 05:52
  • https://www.codeply.com/go/WG15ZWC4lf Check it out this codeplay link.. – Eibs Aug 07 '20 at 05:57