Bootstrap footer at the bottom of the page

Question

I have read a lot of posts about this but I still didn t find an answer  I have a footer that I want to be at the end of the page  not fixed  The problem is that the footer is where the content ends  Look at picture    This is my HTML    lt  DOCTYPE html gt   lt html gt       lt head gt           lt meta charset  utf-8   gt           lt title gt  Mobtech - Privatni korisnici  lt  title gt            lt  --Ubaci bootstrap css -- gt           lt link rel  stylesheet  href  css bootstrap min css  gt           lt link rel  stylesheet  href  css style css  gt           lt link rel  css basic-template css  rel  stylesheet  gt           lt link href  https   fonts googleapis com css family Roboto Condensed  rel  stylesheet  gt        lt  head gt       lt body gt           lt  --Navigation bar -- gt           lt nav class  navbar navbar-default  role  navigation  gt               lt div class  container  gt                   lt div class  navbar-header  gt                       lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   navbar-container  gt                           lt span class  sr-only  gt  Pokazi i sakrij navigaciju  lt  span gt                           lt span class  icon-bar  gt  lt  span gt                           lt span class  icon-bar  gt  lt  span gt                           lt span class  icon-bar  gt  lt  span gt                       lt  button gt                       lt a class  navbar-brand  href     gt                            lt span gt   lt img src  Slike logo png  alt  LogoSlika   gt   lt  span gt                           lt font face  Roboto Condensed  size  4  color  green  gt  Mobtech  lt  font gt                       lt  a gt                   lt  div gt                    lt div class  collapse navbar-collapse  id  navbar-container  gt                       lt ul class  nav navbar-nav navbar-right  gt                           lt li gt  lt a href  index html  gt  Pocetna strana  lt  a gt   lt  li gt                           lt li class  active  gt  lt a href     gt  Privatni korisnici  lt  a gt   lt  li gt                           lt li gt  lt a href  poslovni html  gt  Poslovni korisnici  lt  a gt   lt  li gt                           lt li gt  lt a href  uredjaji html  gt  Uredaji  lt  a gt   lt  li gt                           lt li gt  lt a href  onama html  gt  O Nama  lt  a gt   lt  li gt                       lt  ul gt                   lt  div gt               lt  div gt           lt  nav gt            lt br   gt               lt div class  container  gt   lt  --Container -- gt                    lt div class  row  gt                       lt  -- Kolona na velikom ekranu  lg  prikazuje duzinu jedne kolone  Ekstra small  xs  prikazuje 4 kolone -- gt                       lt div class  col-lg-12 bg-success  gt                            lt p gt  Outer div  lt  p gt                           lt div class  col-lg-6 bg-primary  gt                               lt p gt  Inner div  lt  p gt                           lt  div gt                       lt  div gt                   lt  div gt               lt  div gt                lt  -- Footer -- gt               lt footer class  mojFooter  gt                   lt font face  Roboto Condensed  size  4  gt   lt center gt                   lt div class  container  gt                       lt div class  row  style  margin-top  7px   gt                            lt p gt   amp nbsp   amp nbsp   amp nbsp    amp nbsp   amp nbsp   amp nbsp   amp copy  Copyright Ivan Pro  ic 2016  lt  p gt                        lt  div gt                       lt div class  bottom-footer  gt                           lt div class  col-md-12  gt                                lt ul class  footer-nav  gt                                   lt li gt   lt a href  https   www facebook com   gt  Facebook  lt  a gt   lt  li gt                                   lt li gt   lt a href  https   twitter com   gt  Twitter  lt  a gt   lt  li gt                                   lt li gt   lt a href  https   plus google com   gt  Google   lt  a gt   lt  li gt                               lt  ul gt                           lt  div gt                       lt  div gt                   lt  div gt                   lt  font gt   lt  center gt               lt  footer gt                  lt  -- JavaScript fajl -- gt               lt script src  js jquery min js  gt  lt  script gt               lt  -- Kompresovan JavaScript fajl -- gt               lt script src  js bootstrap min js  gt  lt  script gt       lt  body gt   lt  html gt    This is my CSS  for the footer only        mojFooter      background-color   f8f8f8      color   00a651      padding-top  0px      border-top  1px solid  e7e7e7      margin-bottom  0px      bottom-footer      border-top  1px solid  00a651      margin-top  0px      padding-top  7px      color   00a651       footer-nav li      display  inline      padding  0px 40px      footer-nav a      color  grey      text-decoration  none

User · Answer

Use this stylesheet    x000D   x000D     Sticky footer styles x000D  --------------------------------------------------    x000D  html   x000D    position  relative  x000D    min-height  100   x000D    x000D  body   x000D       Margin bottom by footer height    x000D    margin-bottom  60px  x000D    x000D   footer   x000D    position  absolute  x000D    bottom  0  x000D    width  100   x000D       Set the fixed height of the footer here    x000D    height  60px  x000D    line-height  60px     Vertically center the text there    x000D    background-color   f5f5f5  x000D    x000D   x000D   x000D     Custom page CSS x000D  --------------------------------------------------    x000D     Not required for template or sticky footer method     x000D   x000D  body  gt   container   x000D    padding  60px 15px 0  x000D    x000D   x000D   footer  gt   container   x000D    padding-right  15px  x000D    padding-left  15px  x000D    x000D   x000D  code   x000D    font-size  80   x000D    x000D   x000D   x000D

User · Answer

You can just add  style  min-height 100vh  to your page content conteiner and place footer in another conteiner

User · Answer

When using bootstrap 4 or 5  flexbox could be used to achieve desired effect   lt body class  quot d-flex flex-column min-vh-100 quot  gt       lt header gt HEADER lt  header gt       lt content gt CONTENT lt  content gt       lt footer class  quot mt-auto quot  gt  lt  footer gt   lt  body gt   Please check the examples  Bootstrap 4 Bootstrap 5 In bootstrap 3 and without use of bootstrap  The simplest and cross browser solution for this problem is to set a minimal height for body object  And then set absolute position for the footer with bottom  0 rule  body     min-height  100vh    position  relative    margin  0    padding-bottom  100px    height of the footer   box-sizing  border-box     footer     position  absolute    bottom  0    height  100px     Please check this example  Bootstrap 3

User · Answer

In my case for Bootstrap4    lt body class  d-flex flex-column min-vh-100  gt       lt div class  wrapper flex-grow-1  gt  lt  div gt       lt footer gt  lt  footer gt   lt  body gt

[html] Bootstrap footer at the bottom of the page

Examples related to html

Examples related to css

Examples related to twitter-bootstrap