What is the best way to horizontally center an image in Bootstrap 4 while having a fixed-top navbar and preventing vertical scrollbars?

Question

What is the best way to horizontally center an image in Bootstrap 4 while having a fixed-top navbar and preventing vertical scrollbars?

I am struggling to achieve the desired outcome, which is depicted in this image: https://i.sstatic.net/i6X0j.jpg

Specific requirements for this project include:

The image must be responsive
A fixed-top navbar should remain visible
No vertical scrolling should occur
The footer also needs to stay at the bottom of the page

I have spent an entire day attempting to solve this issue, but so far, I have not had any success. A previous attempt that I made can be found here:

https://codepen.io/Codewife_101/pen/rpvdPq

However, using 'align-self-center' in my code caused unwanted vertical scrolling on the website, especially when viewing it on mobile devices.

This is my first version:

  <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Red Logo Website</title>
      <link rel="stylesheet" href="css/font-awesome.min.css">
      <link rel="stylesheet" href="css/bootstrap.css">
      <link rel="stylesheet" href="css/custom.css">
      <!--Material Design Icons-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet">
      <!--adding Roboto different styles-->
      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
    </head>
    ...

I also attempted another approach documented here:

https://codepen.io/Codewife_101/pen/eyVxre

Here is a snippet from my second version:

  <nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
    <div class="container">
      <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo">
      ...
  <footer id="main-footer" class="text-center">
    <div class="container">
      <p class="text-muted">Copyright &copy; 2018 <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo"> RedDesign LLC</p> 
...

Unfortunately, neither solution resulted in the vertical centering of the elements as intended. Any suggestions or solutions would be greatly appreciated.

While my question may appear similar to others at first glance, my specific situation and limitations prevent me from commenting on existing discussions. Thank you in advance for any advice provided.

css bootstrap-4

Answer 1

Answer №1

To achieve a fixed header and footer on your website, you can utilize CSS.

Apply the CSS property position:fixed to your header element:

<div id="NAVBAR">

Do the same for your footer:

<div id="FOOTER">

In your CSS file, define the styles for these elements:

#NAVBAR {
    position: fixed;
    bottom: 0;
}

#FOOTER {
    position: fixed;
    top: 0;
}

Make sure to set the height of the body in accordance with your screen resolution to avoid any scrolling effects.

Answer 2

To achieve a fixed header and footer on your website, you can utilize CSS.

Apply the CSS property position:fixed to your header element:

<div id="NAVBAR">

Do the same for your footer:

<div id="FOOTER">

In your CSS file, define the styles for these elements:

#NAVBAR {
    position: fixed;
    bottom: 0;
}

#FOOTER {
    position: fixed;
    top: 0;
}

Make sure to set the height of the body in accordance with your screen resolution to avoid any scrolling effects.

Answer 3

Answer №2

Give this a try, it involves using calc and vh (viewport height) for dynamic height adjustment:

nav, footer{
  max-height: 50px;
}

body,html, section{
  height: 100%;
}
section{
  display: flex !important;
  justify-content: center;
  align-items: center;
}


section img{
  object-fit: contain;
  height: calc(100vh - 150px) !important; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default navbar-fixed-top">

  <a class="navbar-brand" href="#">Navbar</a>

 <ul class="navbar-nav nav">
   <li class="nav-item"><a href="" class="nav-link">Link</a></li>
   <li class="nav-item"><a href="" class="nav-link">Link</a></li>
   <li class="nav-item"><a href="" class="nav-link">Link</a></li>
 </ul>
</nav>

<section>
  <img src="http://www.tandemconstruction.com/sites/default/files/styles/project_slider_main/public/images/project-images/IMG-Residence-1_0.jpg" alt="" class="img-fluid">
</section>

<footer class="navbar navbar-default navbar-fixed-bottom text-center">
   <p class="text-muted navbar-brand">Copyright &copy; 2018 RedDesign LLC</p> 
</footer>

Answer 4

Give this a try, it involves using calc and vh (viewport height) for dynamic height adjustment:

nav, footer{
  max-height: 50px;
}

body,html, section{
  height: 100%;
}
section{
  display: flex !important;
  justify-content: center;
  align-items: center;
}


section img{
  object-fit: contain;
  height: calc(100vh - 150px) !important; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default navbar-fixed-top">

  <a class="navbar-brand" href="#">Navbar</a>

 <ul class="navbar-nav nav">
   <li class="nav-item"><a href="" class="nav-link">Link</a></li>
   <li class="nav-item"><a href="" class="nav-link">Link</a></li>
   <li class="nav-item"><a href="" class="nav-link">Link</a></li>
 </ul>
</nav>

<section>
  <img src="http://www.tandemconstruction.com/sites/default/files/styles/project_slider_main/public/images/project-images/IMG-Residence-1_0.jpg" alt="" class="img-fluid">
</section>

<footer class="navbar navbar-default navbar-fixed-bottom text-center">
   <p class="text-muted navbar-brand">Copyright &copy; 2018 RedDesign LLC</p> 
</footer>

Answer 5

Answer №3

I have resolved the issue in your code and provided the corrected version below.

The mistake was a basic one made by beginners: You placed the image inside a row without placing it within a column. The Bootstrap rows and columns are meant to be used together, so whenever you define a .row, make sure to include at least one .col inside that row. This usually resolves all issues.

Here is the updated version of your code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
    <div class="container">
        <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo">
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarNav2">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link font-weight-bold" href="">Brand Name</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 1. JUMBOTRON -->
<section id="showcase">
    <div class="container" style="height: 100vh;">
        <div class="row h-100">
            <div class="col align-self-center">
                <img src="https://picsum.photos/440/" class="img-fluid mx-auto d-block">
           </div>
        </div>
    </div>
</section>

<!--FOOTER-->
<footer id="main-footer" class="text-center fixed-bottom">
    <div class="container">
        <div class="row">
            <div class="col">
                <p class="text-muted">Copyright &copy; 2018 <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="logo"> RedDesign LLC</p>
            </div>
        </div>
    </div>
</footer>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

Answer 6

I have resolved the issue in your code and provided the corrected version below.

The mistake was a basic one made by beginners: You placed the image inside a row without placing it within a column. The Bootstrap rows and columns are meant to be used together, so whenever you define a .row, make sure to include at least one .col inside that row. This usually resolves all issues.

Here is the updated version of your code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
    <div class="container">
        <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo">
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarNav2">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link font-weight-bold" href="">Brand Name</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 1. JUMBOTRON -->
<section id="showcase">
    <div class="container" style="height: 100vh;">
        <div class="row h-100">
            <div class="col align-self-center">
                <img src="https://picsum.photos/440/" class="img-fluid mx-auto d-block">
           </div>
        </div>
    </div>
</section>

<!--FOOTER-->
<footer id="main-footer" class="text-center fixed-bottom">
    <div class="container">
        <div class="row">
            <div class="col">
                <p class="text-muted">Copyright &copy; 2018 <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="logo"> RedDesign LLC</p>
            </div>
        </div>
    </div>
</footer>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

What is the best way to horizontally center an image in Bootstrap 4 while having a fixed-top navbar and preventing vertical scrollbars?

Answer №1

Answer №2

Answer №3

Similar questions

Ways to style specific dates on a datepicker?

Reactively responsive table view

The importance of CSS z-index in optimizing for mobile responsiveness

Displaying a division when a button is pressed

JavaScript can sometimes present peculiar challenges when it comes to setting style attributes, especially when a DOCTYPE is

Upon selecting multiple checkboxes, corresponding form fields will be displayed based on shared attributes

Achieving Div Alignment in a Fluid Bootstrap Grid

Why doesn't "align-self: flex-end" relocate the game board to the bottom of the screen?

prettyPhoto popup exceeds maximum width and height limitations

Issues with implementing @font-face on a singular font

Ways to integrate a CSS file into XSLT

Issue with the overall layout in Bootstrap 4 involving the main content area and sidebar

Arranging div blocks in columns that are seamlessly aligned

How to vertically center content within a container-fluid in Bootstrap 4

What is the best way to continuously loop an image from left to right and right to left indefinitely using JavaScript?

Navigate between links by using the Tab key, while excluding certain links from the sequence

Creating parallel lines utilizing pseudo elements

Prevent manual scrolling with CSS

Dealing with React Parsing Issue: Functions or Classes

Personalizing the fileTemplate selection in FineUploader