Twitter Bootstrap Question posted in

Bootstrap footer is not at the bottom of any page-Twitter bootstrap

I’ve seen a few of these on Stack Overflow, but the questions that have been asked don’t lead to an answer which solves my issue. Please take the time to look over my code before marking it down or flagging it as a duplicate.

I’m working through a book called “Beginning django CMS”. I’m finding that a few parts are out of date, and that might be the issue here. It’s tough for me to say because I’m new to web design.

The footer isn’t in a <div>, and I’ve gone over the padding to see if that helps. Those are the kinds of issues that come up as answers to questions that have previously been posted on Stack Overflow.

I’m being left with a footer which begins ends an inch from the bottom of the screen. Does anyone know what might be causing this?

I’ve checked this in Chrome and Edge so far, both come up with the indent.

Here’s the HTML:

{% load cms_tags staticfiles sekizai_tags menu_tags %}
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv"X-UA-Compatible" Content = "IE=Edge">
    <meta name = "viewport" content="width=device-width", initial-scale=1>

    <link rel="icon" href="favicon.ico">

    <title>{% block title %}MyBlog Title{% endblock title %}</title>

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

    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">

    <!-- MyBlog custom styles -->
    <link href="{% static "myblog.css" %}" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src=https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    {% render_block "css" %}
</head>
<body>
    {% cms_toolbar %}
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href=""><img src="{% static "" %}"/></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    {% show_menu 0 1 0 100 "menu.html" %}
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="blog-header">
            <h1 class="blog-title">(Now a banner)</h1>
            <p class="lead blog-description">The political system is broken; it could do with a Patch</p>
        </div>
        {% block content %}{% endblock content %}
    </div>

    <footer class="footer">
     <div class="container">
      <p class="text-muted">{% block footer %}My Blog&copy;2015{%endblock footer%}</p>
     </div>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bu -->
    <script src="{% static "ie10-viewport-bug-workaround.js" %}"></script>

    {% render_block "js" %}
</body>

And the CSS:

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

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    font-family : Georgia, "Times New Roman", Times, serif;
    color #555;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serfi;
    font-weight: normal;
    color: #333;
}
.footer {
    position: absolute;
    margin-left : 0px
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: #f5f5f5;
}
.blog-header {
    padding-top: 20px;
    padding-bottom: 20px;
}

.blog-title {
    margin-top: 30px;
    margin-bottom: 0;
    font-size: 28px;
    font-weight: normal;
}
.blog-description{
    font-size: 20px;
    color: #999;
}
.sidebar-module{
    padding: 15px;
    margin: 0 -15px 15px;
}
.sidebar-module-inset {
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child{
    margin-bottom: 0;
}
.pager {
    margin-bottom: 60px;
    text-align: left
}
.pager > li > a {
    width: 140px;
    padding: 10px 20px;
    text-align: center;
    border-radius: 30px;
}
.blog-post{
    margin-bottom: 60px;
}
.blog-post-title{
    margin-bottom: 5px;
    font-size: 40px;
}
.blog-post-meta {
    margin-bottom: 20px;
    color : #999;
}
body > container {
    padding: 0px 0px 0;
}
.container .text-muted {
    margin: 20px 0;
}
.footer > .container {
    padding-right: 15px;
    padding-left: 0;
}
.row {
    margin-right: 0px!important;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the issue. The footer is extending to the bottom of the body, but the bottom wasn't extending to the bottom of the page.

    To the start of the CSS, I added:

     * {
     margin:0;
    height: 100%
}

    That seems to have solved the issue.


  2. 0

    The issue is in the line

     <h1 class="blog-title">Patch's Soapbox</h1>

    You can tell what the problem is because all the text beyond this point is in red.

    The single quote in Patch’s is telling HTML that everything after this point is a string. You need to us a replacement by using:

    <h1 class="blog-title">Patch&#39;s Soapbox</h1>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search