Problem with centering the content both horizontally and vertically

Question

Problem with centering the content both horizontally and vertically

I'm struggling to get my content centered both vertically and horizontally. Also, my container-fluid isn't covering the footer when I inspect it in developer tools. I've searched through various resources but still can't seem to solve it. You can view my codepen here: https://codepen.io/anon/pen/yqdbWd

My goal is to remove the sidebar since it's a single-page layout with minimal content. I've attached screenshots depicting my issues: https://i.sstatic.net/1l5oR.png. The container-fluid also doesn't occupy the entire page as desired: https://i.sstatic.net/a0bEb.png. Lastly, I'm seeking a way to shorten the length of my horizontal line like this example: https://i.sstatic.net/jhp5f.png

Below is the code I've worked on so far:

HTML

<body>
<div class="container-fluid h-100">
        <nav class="navbar navbar-light rounded">
    <a class="navbar-brand" href="#">
      <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46..."

Below is the accompanying CSS:

   body,html {
      height: 100%;
      background:#333A4D;
   }
   .navbar{
      margin: 10px;
      background: #333A4D;
      padding: 20px;
    }
   .nav-link{
      font-size: 25px;
      line-height: 32px;
      color: #F3B0B6;
   }
  .list-inline-item{ margin-left: 1rem; }
  .jumbotron{ background: none; }
  .text-border{
     display: block;
     height: 1px;
     border: 0;
     border-top: 4px solid #F3B0B6;
    }
...

html css bootstrap-4

Answer 1

Answer №1

To avoid using height:100% on the jumbotron .row, you can set its container-fluid as a flexbox column (d-flex flex-column) and then apply flex-grow-1 to the jumbotron .row to fill the remaining height between the navigation bar and footer. This adjustment will help eliminate the scrollbar.

   <div class="container-fluid h-100 d-flex flex-column">
      <nav class="navbar navbar-light fixed-top">
        ..
      </nav>
      <div class="row align-items-center flex-grow-1">
          <div class="col-6 mx-auto">
              <div class="jumbotron text-center mb-0">
                  <hr class="text-border" />
                  <p class="lead">Stay tuned for updates.</p>
                  <p class="lead">Stay Alert For Updates</p>
                  <hr class="text-border" />
              </div>
          </div>
      </div>
      <footer class="mt-auto">
        ..
      </footer>
    </div>

To center the jumbotron on the page, ensure that the navbar is set to fixed-top so it doesn't shift the jumbotron content down and cause it to be off-center. Additionally, remove the bottom margin on the jumbotron (mb-0). You can refer to this generic Bootstrap 4 example

Related: Bootstrap 4 Navbar and content fill height flexbox

Flex fill height nav row footer jumbotron

Answer 2

To avoid using height:100% on the jumbotron .row, you can set its container-fluid as a flexbox column (d-flex flex-column) and then apply flex-grow-1 to the jumbotron .row to fill the remaining height between the navigation bar and footer. This adjustment will help eliminate the scrollbar.

   <div class="container-fluid h-100 d-flex flex-column">
      <nav class="navbar navbar-light fixed-top">
        ..
      </nav>
      <div class="row align-items-center flex-grow-1">
          <div class="col-6 mx-auto">
              <div class="jumbotron text-center mb-0">
                  <hr class="text-border" />
                  <p class="lead">Stay tuned for updates.</p>
                  <p class="lead">Stay Alert For Updates</p>
                  <hr class="text-border" />
              </div>
          </div>
      </div>
      <footer class="mt-auto">
        ..
      </footer>
    </div>

To center the jumbotron on the page, ensure that the navbar is set to fixed-top so it doesn't shift the jumbotron content down and cause it to be off-center. Additionally, remove the bottom margin on the jumbotron (mb-0). You can refer to this generic Bootstrap 4 example

Related: Bootstrap 4 Navbar and content fill height flexbox

Flex fill height nav row footer jumbotron

Answer 3

Answer №2

Your main section had height: 100%; added to it, causing it to expand to the full height of the screen. However, the header was pushing the section down, resulting in the appearance of a scrollbar.

To address this issue, I applied position: absolute; to the footer so that it would stick to the bottom of the page. Additionally, I used display: flex; with some clever techniques to replace the outdated float: left & float: right.

In order to further optimize your code and reduce line length, I substituted

<div class="col-4 mx-auto">

with

<div class="col-6 mx-auto">

. For even more concise code, you can use

<div class="col-3 mx-auto">

or a lower value if desired.

body,
html {
  height: 100%;
  background: #333A4D;
}

.navbar {
  margin: 10px;
  background: #333A4D;
  padding: 20px;
  margin-top: 0px;
}

.nav-link {
  font-size: 25px;
  line-height: 32px;
  color: #F3B0B6;
}

.nav-item {
  margin-left: 1rem;
}

.list-inline-item {
  margin-left: 1rem;
}

.jumbotron {
  background: none;
}

.text-border {
  display: block;
  height: 1px;
  border: 0;
  border-top: 4px solid #F3B0B6;
}

.lead {
  text-transform: uppercase;
  color: #F3B0B6;
  font-size: 25px;
  line-height: 31px;
}

@media (min-width: 48em) {
  .navbar-brand {
    float: left;
  }
  .nav {
    float: right;
  }
}

.footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
}

.centered-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<body>
  <div class="container-fluid h-100">
    <nav class="navbar navbar-light rounded">
      <a class="navbar-brand" href="#">
        <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
      </a>
      <ul class="nav justify-content-end">
        <li class="nav-item">
          <a class="nav-link active" href="#">Updates</a>
        </li>
      </ul>
    </nav>
    <div class="row align-items-center centered-content">
      <div class="col-4 mx-auto">
        <div class="jumbotron text-center">
          <hr class="text-border" />
          <p class="lead">Perth says tuned on it.</p>
          <p class="lead">Stay Alert For Updates</p>
          <hr class="text-border" />
        </div>
      </div>
    </div>

    <footer class="footer mt-auto">
      <p>2018 © Palungo</p>
      <div>
        <ul class="list-inline">
          <li class="list-inline-item"><a href="#">Terms</a></li>
          <li class="list-inline-item"><a href="#">Privacy</a></li>
        </ul>
      </div>
    </footer>

  </div>
</body>

Answer 4

Your main section had height: 100%; added to it, causing it to expand to the full height of the screen. However, the header was pushing the section down, resulting in the appearance of a scrollbar.

To address this issue, I applied position: absolute; to the footer so that it would stick to the bottom of the page. Additionally, I used display: flex; with some clever techniques to replace the outdated float: left & float: right.

In order to further optimize your code and reduce line length, I substituted

<div class="col-4 mx-auto">

with

<div class="col-6 mx-auto">

. For even more concise code, you can use

<div class="col-3 mx-auto">

or a lower value if desired.

body,
html {
  height: 100%;
  background: #333A4D;
}

.navbar {
  margin: 10px;
  background: #333A4D;
  padding: 20px;
  margin-top: 0px;
}

.nav-link {
  font-size: 25px;
  line-height: 32px;
  color: #F3B0B6;
}

.nav-item {
  margin-left: 1rem;
}

.list-inline-item {
  margin-left: 1rem;
}

.jumbotron {
  background: none;
}

.text-border {
  display: block;
  height: 1px;
  border: 0;
  border-top: 4px solid #F3B0B6;
}

.lead {
  text-transform: uppercase;
  color: #F3B0B6;
  font-size: 25px;
  line-height: 31px;
}

@media (min-width: 48em) {
  .navbar-brand {
    float: left;
  }
  .nav {
    float: right;
  }
}

.footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
}

.centered-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<body>
  <div class="container-fluid h-100">
    <nav class="navbar navbar-light rounded">
      <a class="navbar-brand" href="#">
        <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
      </a>
      <ul class="nav justify-content-end">
        <li class="nav-item">
          <a class="nav-link active" href="#">Updates</a>
        </li>
      </ul>
    </nav>
    <div class="row align-items-center centered-content">
      <div class="col-4 mx-auto">
        <div class="jumbotron text-center">
          <hr class="text-border" />
          <p class="lead">Perth says tuned on it.</p>
          <p class="lead">Stay Alert For Updates</p>
          <hr class="text-border" />
        </div>
      </div>
    </div>

    <footer class="footer mt-auto">
      <p>2018 © Palungo</p>
      <div>
        <ul class="list-inline">
          <li class="list-inline-item"><a href="#">Terms</a></li>
          <li class="list-inline-item"><a href="#">Privacy</a></li>
        </ul>
      </div>
    </footer>

  </div>
</body>

Problem with centering the content both horizontally and vertically

Answer №1

Answer №2

Similar questions

MySQL automatically inserts a null record if no value is provided

trouble with the layout of the table

Is there a way to modify existing code in bootstrap4 using CSS?

Eliminating the issue of double scroll bars that overlap each other

Using FEWER loops to create column classes on Twitter - What is their functionality?

Launching a program through a web browser - a step-by-step guide

When I attempt to utilize the API, the JavaScript implementation of a <script src=...> element seems to interfere

Not implementing auto-scroll feature because of the presence of `position: sticky` or `position: fixed` CSS properties

What is the best way to refresh information following its removal?

In order to eliminate the underline in Bootstrap links, I am seeking a solution

Developing a user-friendly widget for a website that is not optimized for mobile devices

Is there a way to ensure that the text stays positioned behind the initial image even as the window size is adjusted

Creating a line break in HTML using Bootstrap

What is the process for adjusting the code to manage the labels of specific buttons?

Setting the height of a div using CSS and navigating between views using Angular UI

When attempting to incorporate the "active" class into a Bootstrap 4 carousel using jQuery, issues arise specifically when retrieving data from a MongoDB database

Looking to resolve the line formatting issue in my Bootstrap navigation bar

I want to know how to use PHP to count the number of occurrences of a specific value in a MySQL table and then echo the count. Can you help me with

Why is it that my threshold for frustration in Bootstrap has been reached due to the ineffective grid system

An Ajax GET request will not be able to locate the JSON file