Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2><strong>Update 2017</strong></h2> <p>There is difference between the "fixed" footer and "sticky" footer... you want the sticky footer.</p> <p><strong>Bootstrap 3</strong> </p> <p>Use the standard "Sticky Footer" example. This method wraps the entire page content and pushes the footer down.</p> <p>Here is a working demo: <a href="http://bootply.com/93620" rel="nofollow noreferrer">http://bootply.com/93620</a></p> <pre><code>&lt;!-- Wrap all page content --&gt; &lt;div id="wrap"&gt; &lt;!-- Fixed navbar --&gt; &lt;div class="navbar navbar-default navbar-fixed-top"&gt; ... &lt;/div&gt; &lt;div class="container"&gt; &lt;!-- page content --&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt; Footer &lt;/div&gt; /* Sticky footer styles -------------------------------------------------- */ html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } /* Wrapper for page content to push down footer */ #wrap { min-height: 100%; height: auto !important; height: 100%; /* Negative indent footer by its height */ margin: 0 auto -60px; /* Pad bottom by footer height */ padding: 0 0 60px; } /* Set the fixed height of the footer here */ #footer { height: 60px; background-color: #f5f5f5; } </code></pre> <hr> <p><strong>Bootstrap 4</strong> </p> <p>Because flexbox is default in Bootstrap 4, the "sticky" footer is easier.</p> <pre><code>&lt;wrapper class="d-flex flex-column"&gt; &lt;nav&gt; &lt;/nav&gt; &lt;main&gt; &lt;/main&gt; &lt;footer&gt; &lt;/footer&gt; &lt;/wrapper&gt; body, wrapper { min-height:100vh; } main { flex:1; } </code></pre> <p>Demo: <a href="http://www.codeply.com/go/tGamlWscIB" rel="nofollow noreferrer">Bootstrap 4 Sticky Footer</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload