Solution 1 :

I think the main issue might be incorrect structure (HTML along with the corresponding Bootstrap classes). If you’re going to use Bootstrap’s grid system, then it’s a good idea to follow the structure that they recommend in order to have a fully responsive website.

Following their convention and structure can be tricky at first, but once you go through the motions it should work fine. Be aware that specific styling and layout does require some research.

The following example was inspired from their project examples page.I adapted the code based on your question regarding the footer responsiveness. I removed the top navbar for simplicity:

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Sticky Footer inspired by Bootstrap Examples</title>
  <!-- Bootstrap 4 CDN as of 01/17/2020 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <!-- Fontawesome 4.7 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
  html,
  body {
    height: 100%;
  }

  .fa {
    color: white;
  }
  </style>
</head>

<body class="d-flex flex-column">
  <!-- Main page content -->
  <main class="flex-shrink-0">
    <div class="container">
      <h1 class="mt-5">Main container</h1>
    </div>
  </main>
  <!-- Respoonsive footer using Bootstrap's grid layout -->
  <footer class="footer mt-auto py-3 bg-dark">
    <div class="container">
      <div class="row">
        <div class="col align-self-center">
          <i class="fa fa-twitter-square fa-4x" aria-hidden="true"></i>
          <i class="fa fa-facebook-square fa-4x" aria-hidden="true"></i>
          <i class="fa fa-envelope-square fa-4x" aria-hidden="true"></i>
        </div>
        <div class="col">
          <h5>Site</h5>
          <ul class="list-unstyled text-small">
            <li><a class="text-muted" href="#">About</a></li>
            <li><a class="text-muted" href="#">Help</a></li>
            <li><a class="text-muted" href="#">Accessibility</a></li>
          </ul>
        </div>
        <div class="col">
          <h5>Legal</h5>
          <ul class="list-unstyled text-small">
            <li><a class="text-muted" href="#">Terms of Service</a></li>
            <li><a class="text-muted" href="#">Privacy Policy</a></li>
            <li><a class="text-muted" href="#">Cookie Policy</a></li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</body>

</html>

Working example here

Solution 2 :

I have edit your css & HTML

html,body, .wrapper {
    position: relative;
    height: 100%;
}


.context-dark, .bg-gray-dark, .bg-primary
{
    color: rgba(255, 255, 255, 0.8);
}

.footer-classic
{
    padding-top: 10px;
}

.copyright-container
{
    padding: 10x;
}

https://jsfiddle.net/lalji1051/r5aqxetv/7/

Problem :

I am trying to build a website (using bootstrap 4) that has a footer containing 3 columns. When the browser is big enough (e.g. open on PC) it looks absolutely fine, but if the browser is compressed (e.g. mobile phone) then you only see part of the footer.

What am I doing wrong please? I have been googling for hours, reading as many other Stack Overflow articles and trying them and not getting anywhere.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Website</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<style>

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 200px; /* bottom has to be the same as footer height */
}

.context-dark, .bg-gray-dark, .bg-primary
{
    color: rgba(255, 255, 255, 0.8);
}

.footer-classic
{
    padding-top: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 200px;
}

.copyright-container
{
    padding: 10x;
}
</style>

<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
      <div class="container">
        <a class="navbar-brand" href="#">
              <img src="2.png" alt="">
            </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#navbarResponsive" aria-controls="navbarResponsive"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Log in</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Sign up</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container"><p>Page Content</p></div>

    <footer class="section footer-classic context-dark bg-image" style="background: #000000;">
      <div class="container">
        <div class="row row-30">
          <div class="col-md-4 col-xl-5">
            <div class="pr-xl-4">

              <hr>
              <div class="text-center center-block">
                  <p>You can follow us on:</p>
                  <a href="https://www.facebook.com/bootsnipp"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
                  <a href="https://twitter.com/bootsnipp"><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a>
                  <a href="mailto:[email protected]"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
              </div>
              <hr>

            </div>
          </div>
          <div class="col-md-4 col-xl-3 footer-list">
            <h5>Site</h5>
            <ul class="nav-list">
              <li><a href="#">About</a></li>
              <li><a href="#">Help</a></li>
              <li><a href="#">Accessibility</a></li>
            </ul>
          </div>
          <div class="col-md-4 col-xl-3 footer-list">
            <h5>Legal</h5>
            <ul class="nav-list">
              <li><a href="#">Terms of Service</a></li>
              <li><a href="#">Privacy Policy</a></li>
              <li><a href="#">Cookie Policy</a></li>
            </ul>
          </div>
        </div>
      </div>

      <div class="row copyright-container">
          <p class="rights">
              <span>©  </span><span class="copyright-year">2020</span><span> </span><span>PERSON</span><span>. </span><span>All Rights Reserved.</span></p>
      </div>
    </footer>

</body>

</html>

Comments

Comment posted by Pete

You have set your footer to have a fixed height of 200px sol if the browser is small and the footer content overflows, you won’t see the overflown content. Should you be fixing such a large footer on mobile devices, it would probably take up most of the screen and make for really bad UX?

Comment posted by Gemma Morriss

@Pete I agree, but if the window is reduced in size (I regularly have three browsers open in row) it isn’t displayed correctly

Comment posted by Pete

So don’t give it a fixed height and make it more responsive?

Comment posted by Gemma Morriss

Thank you that was a really useful answer as it seems like I was using very outdated/incorrect classes.

By

Leave a Reply

Your email address will not be published. Required fields are marked *