CODEWITHSUNDEEP
htmlcssbootstrap-4frontendfooter
user10605113
user10605113

Reputation: 211

Footer almost to the whole page

My problem is footer. When the list of items is empty, the footer reaches almost the navigaton bar itself. I tried to bypass it somehow, but I'm not a front-end developer and I failed. I use Bootstrap 4, with custom class .page-footer.

css code:

.page-footer {
  padding: 2.5rem 0;
  color: #999;
  text-align: center;
  border-top: .05rem solid #e5e5e5;
}

html code:

    {% block footer %}
    <footer class="page-footer">
      <div class="container ">
          <div class="row">
          <div class="col-12 col-md">
            <img class="mb-2" src="{% static 'images/small_image.png' %}">
            <small class="d-block mb-3 text-muted">&copy; 2018</small>
          </div>

          <div class="col-6 col-md">
            <h5>Resources</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">Resource</a></li>
              <li><a class="text-muted" href="#">Resource name</a></li>
              <li><a class="text-muted" href="#">Another resource</a></li>
              <li><a class="text-muted" href="#">Final resource</a></li>
            </ul>
          </div>

          <div class="col-6 col-md">
            <h5>Resources</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">Resource</a></li>
              <li><a class="text-muted" href="#">Resource name</a></li>
              <li><a class="text-muted" href="#">Another resource</a></li>
              <li><a class="text-muted" href="#">Final resource</a></li>
            </ul>
          </div>

          <div class="col-6 col-md">
            <h5>Resources</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">Resource</a></li>
              <li><a class="text-muted" href="#">Resource name</a></li>
              <li><a class="text-muted" href="#">Another resource</a></li>
              <li><a class="text-muted" href="#">Final resource</a></li>
            </ul>
          </div>

          </div>
      </div>
    </footer>
    {% endblock footer %}

whole html page:

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

{% block header %}
  <head>

    <!-- Bootstrap core CSS -->
    <link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'vendor/bootstrap/css/bootstrap.css' %}" rel="stylesheet">
  </head>
{% endblock header %}

  <body>

    <!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Link</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar5">
        <span class="navbar-toggler-icon"></span>
    </button>
    {% if user.is_authenticated %}
        <div class="navbar-collapse collapse justify-content-stretch" id="navbar5">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#"> All links <span class="sr-only">Home</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">All links</a>
                </li>
            </ul>
            <form action="#" method="get" class="ml-3 my-auto d-inline w-20">
                <div class="input-group input-group-sm">
                  <input type="text" class="form-control border-right-0">
                  <div class="input-group-append">
                    <button class="btn btn-outline-primary border-left-0" type="submit">Search</button>
                  </div>
                </div>
            </form>

            <div class="my-auto d-inline ml-3">
                <ul class="navbar-nav">
                    <li><a role="button" href="#" type="button" class="btn btn-outline-primary btn-sm mr-3">Link</a></li>
                    <li><a role="button" href="#" type="button" class="btn btn-outline-primary btn-sm">Link</a></li>
                </ul>
            </div>

            <div class="nav navbar-nav ml-auto dropdown">
              <button class="btn btn-outline-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                User
              </button>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Link</a>
        <a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Link</a>
                <a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Link</a>
                <a class="dropdown-item" href="#"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Link</a>
              </div>
            </div>

        </div>
    {% endif %}
</nav>


    <!-- Page Content -->
    <div class="container">
      <div class="row">
        {% block content %}{% endblock content %}

        {% block sidebar %}
        <!-- Sidebar Widgets Column -->
        <div class="col-md-4">
          <!-- Categories Widget -->
          <div class="card my-4">
            <h5 class="card-header">Title</h5>
            <div class="card-body">
              <div class="row">
                <div class="col-lg-12">
                  <ul class="list-unstyled mb-0">
                        <li>
                          <a href="#">Link</a>
                        </li>
                  </ul>
                </div>
                <!--<div class="col-lg-6">-->
                  <!--<ul class="list-unstyled mb-0">-->
                    <!--<li>-->
                      <!--<a href="#">JavaScript</a>-->
                    <!--</li>-->
                    <!--<li>-->
                      <!--<a href="#">CSS</a>-->
                    <!--</li>-->
                    <!--<li>-->
                      <!--<a href="#">Tutorials</a>-->
                    <!--</li>-->
                  <!--</ul>-->
                <!--</div>-->
              </div>
            </div>
          </div>

          <!-- Side Widget -->
          <div class="card my-4">
            <h5 class="card-header">Side Widget</h5>
          </div>
        </div>
        {% endblock sidebar %}
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->

    {% block footer %}
    <footer class="page-footer">
      <div class="container ">
          <div class="row">
          <div class="col-12 col-md">
            <img class="mb-2" src="{% static 'images/small_image.png' %}">
            <small class="d-block mb-3 text-muted">&copy; 2018</small>
          </div>

          <div class="col-6 col-md">
            <h5>Resources</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">Resource</a></li>
              <li><a class="text-muted" href="#">Resource name</a></li>
              <li><a class="text-muted" href="#">Another resource</a></li>
              <li><a class="text-muted" href="#">Final resource</a></li>
            </ul>
          </div>

          <div class="col-6 col-md">
            <h5>Resources</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">Resource</a></li>
              <li><a class="text-muted" href="#">Resource name</a></li>
              <li><a class="text-muted" href="#">Another resource</a></li>
              <li><a class="text-muted" href="#">Final resource</a></li>
            </ul>
          </div>

          <div class="col-6 col-md">
            <h5>Resources</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">Resource</a></li>
              <li><a class="text-muted" href="#">Resource name</a></li>
              <li><a class="text-muted" href="#">Another resource</a></li>
              <li><a class="text-muted" href="#">Final resource</a></li>
            </ul>
          </div>
          </div>
      </div>
    </footer>
    {% endblock footer %}

  </body>
</html>

Upvotes: 0

Views: 78

Answers (1)

Danny Mahoney
Danny Mahoney

Reputation: 1255

When you say:

the footer reaches almost the navigaton bar

...and based on comments, it sounds like your problem is that the footer is not always at least at the vertical bottom of the screen and comes too close to your nav.

Your problem is not necessarily in the footer itself and there are a few ways you can address this depending on your desired outcome.

One solution is to add

  position:absolute;
  width: 100%;
  bottom:0;

...to the footer, as I have done in This codepen.

There are additional solutions in existing answers Such as this one.

Upvotes: 1

Related Questions