Estoy por lo general familiarizados con la técnica de lavado de un pie de página con css.

Pero estoy teniendo algunos problemas para conseguir este enfoque de trabajo para Twitter bootstrap, muy probablemente debido al hecho de que Twitter bootstrap es sensible en la naturaleza. Usando Twitter bootstrap no soy capaz de conseguir el pie a ras de la parte inferior de la página utilizando el método descrito en la anterior entrada del blog.

  • Antes de probar todas las respuestas debajo de mantener en mente el OP quiere tener que trabajar con twitter bootstrap.Como no es un deber, twitter bootstrap funciona con Jquery,lo que significa que está activado Javascript.Por esa razón, acabo de probar mi respuesta: stackoverflow.com/questions/10099422/…
  • Oficial de ejemplo : getbootstrap.com/examples/sticky-footer-navbar/…
  • El enlace está roto! Puede alguien por favor arreglar el funcionario ejemplo de enlace?
InformationsquelleAutor Calvin Cheng | 2012-04-11

30 Comentarios

  1. 309

    Encontrado los fragmentos aquí funciona realmente bien para el bootstrap

    Html:

    <div id="wrap">
      <div id="main" class="container clear-top">
        <p>Your content here</p>
      </div>
    </div>
    <footer class="footer"></footer>

    CSS:

    html, body {
      height: 100%;
    }
    
    #wrap {
      min-height: 100%;
    }
    
    #main {
      overflow:auto;
      padding-bottom:150px; /* this needs to be bigger than footer height*/
    }
    
    .footer {
      position: relative;
      margin-top: -150px; /* negative value of footer height */
      height: 150px;
      clear:both;
      padding-top:20px;
    } 

    Fuente: Demo y Tutorial (ya no está disponible; RIP)

    • Esta es la mejor solución que he intentado hasta ahora. Aceptado esto como la respuesta.
    • por qué .clear-top?
    • Hola, he aplicar este método, funciona muy bien, pero ahora tengo algunos problemas con la visualización de la página en el iphone (página ampliada). Cualquier idea de lo que es el problema? He aquí algunos detalles: stackoverflow.com/questions/18621090/…
    • Sólo en caso de que usted ha leído esta respuesta y no se desplaza hacia abajo que vale la pena mirar las otras respuestas
    • especialy este: stackoverflow.com/questions/10099422/…
    • Este es el mejor método que he encontrado para Bootstrap. Para la capacidad de respuesta del dispositivo recuerde utilizar las consultas de medios para la actualización de #principal y .pie de página alturas para diferentes tamaños de pantalla
    • un gran problema con esto es que usted está asignando una altura al pie de página de modo que ya no responde. usted debe dejar que el contenido de la altura. y controlar el cambio al 100% el ancho de cada columna en la consulta de medios de comunicación con el relleno y los márgenes de
    • Cómo dar de relleno-parte inferior:150px; a #envoltura en lugar de #principal ?
    • Usted podría utilizar unidades relativas para la altura del pie de página si la capacidad de respuesta del dispositivo es necesario, al igual que em por ejemplo: w3schools.com/cssref/css_units.asp
    • Esta es la mejor respuesta que no fuerza pegajosa pie de página. Funciona muy bien con Bootstrap!
    • Los enlaces están rotos hoy en día.
    • En caso que el uso de HAML por favor, utilice este código funciona como el encanto %footer.card.text-center

  2. 443

    Este se incluye ahora con Bootstrap 2.2.1.

    Bootstrap 3.x

    Uso de la barra de exploración de componentes y agregar .navbar-fixed-bottom clase:

    <div class="navbar navbar-fixed-bottom"></div>

    Bootstrap 4.x

    <div class="navbar fixed-bottom"></div>

    No te olvides de añadir body { padding-bottom: 70px; } o de lo contrario, el contenido de la página puede ser cubierto.

    Docs: http://getbootstrap.com/components/#navbar-fixed-bottom

    • Desafortunadamente, no hay navbar-static-bottom.
    • Uugh di cuenta de que. Mi error. Resulta más o menos he implementado pegajosa pie de página antes de poner la navbar-estática en la parte inferior. Así que pensé que la clase realmente funciona..mierda. Ah, y, navbar-fixed-parte inferior no es realmente lo que el OP estaba pidiendo de todos modos
    • Por el momento esta es la mejor solución… el aceptado respuesta no trabajo.
    • él no le preguntó acerca de un fijo de pie de página, pero el que «llena» el espacio vacío, si tu página no tiene contenido suficiente como para hacer que el pie permanece en la parte inferior. Si el pie de página es sólo informativo, un fijo a tomar sólo un valioso espacio.
    • Él dice que él no es capaz de eliminar el pie de página en la parte inferior de la página, que es lo que esta técnica hace.
    • Este no es pegajoso, pie de página, porque se utiliza position:fixed; que no es correcto
    • Sí, esta solución sólo se vacía en la parte inferior de la ventanilla no a la parte inferior de la página. es decir, el pie de página siempre está visible.
    • Esta no es la solución OP quiere.
    • Tenía que downvote la respuesta, porque es dar a confusión.El OP no quiere un pegajoso pie de página.
    • Estoy usando Bootstrap v3.3.1, y todavía no hay ningún navbar-bottom para pegajosa comportamiento. Dos divs son el camino a seguir (no downvote como esta respuesta es útil).
    • Esto da pie de página fijo así que ten cuidado si no quieres pegajosa pie de página. El uso de stackoverflow.com/a/12701056/128028 (aceptado respuesta) para que no se pega a pie de página.

  3. 74

    Un ejemplo de trabajo para Twitter bootstrap NO PEGAJOSA PIE de página

    <script>
    $(document).ready(function() {
    
        var docHeight = $(window).height();
        var footerHeight = $('#footer').height();
        var footerTop = $('#footer').position().top + footerHeight;
    
        if (footerTop < docHeight)
            $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
    });
    </script>

    Versión que siempre las actualizaciones en caso de que el usuario abre devtools o cambia el tamaño de la ventana.

    <script>
        $(document).ready(function() {
            setInterval(function() {
                var docHeight = $(window).height();
                var footerHeight = $('#footer').height();
                var footerTop = $('#footer').position().top + footerHeight;
                var marginTop = (docHeight - footerTop + 10);
    
                if (footerTop < docHeight)
                    $('#footer').css('margin-top', marginTop + 'px'); //padding of 30 on footer
                else
                    $('#footer').css('margin-top', '0px');
                //console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
            }, 250);
        });
    </script>

    Necesita al menos un elemento con un #footer

    Cuando no desea que la barra de desplazamiento si el contenido se ajuste a la pantalla, cambie el valor de 10 a 0

    La barra de desplazamiento aparecerá si el contenido no se ajusta a la pantalla.

    • Como alternativa, para tener el pie de página permanecer en el lugar y al ras con la parte inferior, cambiar margin-top a padding-bottom en el JS.
    • ¿Qué es esto 10 número mágico?
    • Sí, me fui con este también. CSS puede ser tan estúpido a veces. No es que sea imposible, pero el propósito general de las soluciones puede ser difícil de conseguir, y la fijación de cosas molestas como este en nuestros diseños no deben tomar los viajes de intercambio de la pila, múltiples esencia de las revisiones, de la cruz-navegador de pruebas, y la eventual entrega a un simple JS truco. Sí, me siento un poco sucio, pero al menos funciona.
    • cada solución que yo he mirado que está mal. Este es el ÚNICO que realmente hace lo que se supone que debe hacer – stick el pie de página en la parte inferior de la página, sin ocultar cualquier contenido si el navegador se cambia el tamaño.
    • no funciona en android chrome.
    • no funcionó tranquila, tan bien como se esperaba para mí, todavía, una de las mejores respuestas, me han resuelto mi problema mediante la sustitución de $('#footer').height(); con $('#footer').outerHeight();
    • Gran respuesta! Tenía un par de adaptaciones que creo que mejorar aquí: stackoverflow.com/a/36385654/8207
    • La mejor respuesta que he encontrado. Si quieres que funcione después de cambio de tamaño de ventana sólo hay que poner el código principal de la respuesta dentro de $(window).resize(function() {//main code goes here}); e invocar $(window).resize(); para establecer que cuando se carga la página.
    • Trató de 4 de las soluciones en esta página y nada estaba trabajando para mí, excepto este.
    • No va a ajustar en la ventana de cambio de tamaño, así que poner el código en una función, llamada una vez, luego de la llamada en la ventana de eventos de cambio de tamaño: $(window).en(«cambiar el tamaño», etc….

  4. 34

    He aquí cómo implementar esto en la página oficial:

    http://getbootstrap.com/2.3.2/examples/sticky-footer.html

    Acabo de probar ahora mismo y FUNCIONA muy bien! 🙂

    HTML

    <body>
    
        <!-- Part 1: Wrap all page content here -->
        <div id="wrap">
    
          <!-- Begin page content -->
          <div class="container">
            <div class="page-header">
              <h1>Sticky footer</h1>
            </div>
            <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
          </div>
    
          <div id="push"></div>
        </div>
    
        <div id="footer">
          <div class="container">
            <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
          </div>
        </div>
    </body>

    El correspondiente código CSS es este:

    /* 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 it's height */
        margin: 0 auto -30px;
    }
    
    /* Set the fixed height of the footer here */
    #push,
    #footer {
        height: 30px;
    }
    
    #footer {
        background-color: #f5f5f5;
    }
    
    /* Lastly, apply responsive CSS fixes as necessary */
    @media (max-width: 767px) {
        #footer {
            margin-left: -20px;
            margin-right: -20px;
            padding-left: 20px;
            padding-right: 20px;
        }
    }
    • Gracias por publicar esto, fue sin duda la mejor solución (por no mencionar el único que trabajó) para mi proyecto en particular, y por supuesto que es bueno que es directamente desde el propio proyecto.
    • Última enlace: getbootstrap.com/examples/sticky-footer
    • No sé lo que era el acuerdo, pero no pude hacerlo funcionar sin la adición de un desplazamiento a las páginas. Terminé cambiando el .contenedor de CSS por lo que el min-altura de «calc(100% – 120px)» donde la 120px es la altura de mi pie y se retira de la <div id=»push»></div> desde el código html, ya que no parece estar haciendo nada aparte de añadir altura a la página que no necesitan.
  5. 33

    Para Sticky Footer utilizamos dos DIV's en el código HTML básico pegajosa pie de página efecto. Escribir como este:

    HTML

    <div class="container"></div>
    
    <div class="footer"></div>

    CSS

    body,html {
        height:100%;
    }
    .container {
        min-height:100%;
    }
    .footer {
        height:40px;
        margin-top:-40px;
    }
    • Él dijo que él está usando Twitter Bootstrap. ¿Cuál sería la manera más fácil de integrar este enfoque en Bootstrap sin reescribir completamente el HTML?
    • Si el OP quiere lograr Pegajosa Pie de página el efecto entonces él tiene que cambiar su Marcado
    • Gracias! Este ha sido el único método que realmente ha trabajado para mí en un ASP.NET MVC5 sitio que utiliza Bootstrap. +1
  6. 18

    Bueno, ya encontré la mezcla de navbar-inner y navbar-fixed-bottom

    <div id="footer">
     <div class="navbar navbar-inner  navbar-fixed-bottom">
        <p class="muted credit"><center>ver 1.0.1</center></p>
     </div>
    </div>

    Parece bueno y funciona para mí

    Lavado de pie de página en la parte inferior de la página, twitter bootstrap

    Ver ejemplo en El violín

    • más simple y más elegante solución. Ser recelosos de la casa de la cerveza su propio código css, ya que no será compatible con bootstrap
    • Yo he optado por este
    • He utilizado este, y tuvo un problema en un viejo android (froy tal vez?) con las páginas que fueron más corto que el de la pantalla. De lo contrario, se trabajó bien en FF, Chrome, IE11, iPhone, nexus 7.
    • Perfecto y muy simple!
  7. 11

    HenryW la respuesta es buena, aunque yo necesitaba un par de ajustes para que funcione como yo quisiera. En particular, los siguientes también se encarga de:

    • Evitar el «nerviosismo» en la página de carga por primera marca invisible y configuración visible en javascript
    • Tratar con el navegador ajusta correctamente
    • Además la configuración de la parte de atrás pie de la página si el navegador se hace más pequeño y el pie de página se hace más grande que la página
    • La altura de la función de ajustes

    He aquí lo que funcionó para mí con los tweaks:

    HTML:

    <div id="footer" class="invisible">My sweet footer</div>

    CSS:

    #footer {
        padding-bottom: 30px;
    }

    JavaScript:

    function setFooterStyle() {
        var docHeight = $(window).height();
        var footerHeight = $('#footer').outerHeight();
        var footerTop = $('#footer').position().top + footerHeight;
        if (footerTop < docHeight) {
            $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
        } else {
            $('#footer').css('margin-top', '');
        }
        $('#footer').removeClass('invisible');
    }
    $(document).ready(function() {
        setFooterStyle();
        window.onresize = setFooterStyle;
    });
  8. 11

    Para mí funcionaba perfectamente.

    Agregar esta clase navbar-fixed-parte inferior de su pie de página.

    <div class="footer navbar-fixed-bottom">

    Yo lo he utilizado como este:

    <div class="container-fluid footer navbar-fixed-bottom">
    <!-- start footer -->
    </div>

    Y se fija a la parte inferior sobre el ancho completo.

    Edit: Esto pondrá de pie de página para siempre visible, es algo que usted necesita tomar en consideración.

  9. 10

    Deberá ajustar su .container-fluid div para que su pegajoso pie de página para el trabajo, usted también faltan algunas propiedades de su .wrapper clase. Intente esto:

    Quitar el padding-top:70px de su body de la etiqueta y de incluir en su .container-fluid lugar, así:

    .wrapper > .container-fluid {
        padding-top: 70px;
    }

    Tenemos que hacer esto porque empuja el body hacia abajo para acomodar la barra de navegación, termina empujando el pie de página un poco más (70px más) más allá de la ventanilla, así que conseguir una barra de desplazamiento. Obtenemos mejores resultados empujando la .container-fluid div lugar.

    Siguiente que tenemos que quitar la .wrapper clase fuera de su .container-fluid div y envolver su #main div con ella, así:

    <div class="wrapper">
        <div id="main" class="container-fluid">
            <div class="row-fluid">...</div>
            <div class="push"></div>
        </div>
    </div>  

    El pie de página de curso tiene que estar fuera de la .wrapper div por lo que la eliminación de la `.contenedor div lugar y fuera de ella, así:

    <div class="wrapper">
        ....
    </div>
    <footer class="container-fluid">
        ....
    </footer><!--END .row-fluid-->

    Después de eso todo se hace correctamente empuje de su pie más cerca de su .wrapper clase mediante el uso de un margen negativo, así:

    .wrapper {
        min-height: 100%;
        height: auto !important; /* ie7 fix */
        height: 100%;
        margin: 0 auto -43px;
    }

    Y que debería de funcionar, a pesar de que usted está probablemente va a tener que modificar algunas cosas para que funcione cuando la pantalla cambia de tamaño, como el restablecimiento de la altura sobre el .wrapper clase, así:

    @media (max-width:480px) {
       .wrapper {
          height:auto;
       }
    }
  10. 10

    En el la última versión de bootstrap 4.3, esto se puede hacer utilizando .fixed-bottom clase.

    <div class="fixed-bottom"></div>

    He aquí cómo yo lo uso con el pie de página:

    <footer class="footer fixed-bottom container">
            <hr>
            <p>&copy; 2017 Company, Inc.</p>
    </footer>

    Usted puede encontrar más información en la posición documentación aquí.

    • Esto todavía funciona con el oficial de 4 versión liberada.
    • Tenga en cuenta que el ejemplo en getbootstrap.com/docs/4.1/examples/sticky-footer tiene una línea-altura=60px estilo en el pie de página de elemento. Esto no sólo es innecesario, sino que también impide el pie de página no funcione correctamente si es el padre de uno o más elementos div, que es el caso más común.
  11. 9

    Esta es la manera correcta de hacerlo con Twitter Bootstrap y el nuevo navbar-fixed-inferior de la clase: (usted no tiene idea de cuánto tiempo he pasado buscando este)

    CSS:

    html {
      position: relative;
      min-height: 100%;
    }
    #content {
      padding-bottom: 50px;
    }
    #footer .navbar{
      position: absolute;
    }

    HTML:

    <html>
      <body>
        <div id="content">...</div>
        <div id="footer">
          <div class="navbar navbar-fixed-bottom">
            <div class="navbar-inner">
              <div class="container">
                <ul class="nav">
                  <li><a href="#">Menu 1</a></li>
                  <li><a href="#">Menu 2</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </body>
    </html>
  12. 4

    Uso de la barra de exploración de componentes y agregar .navbar-fixed-inferior de la clase:

    <div class="navbar navbar-fixed-bottom"></div>

    agregar el cuerpo

      { padding-bottom: 70px; }
  13. 3

    para controlar el ancho de restricción diseños utilice la siguiente, de modo que usted no consigue esquinas redondeadas, para que tu barra de navegación será ras con los lados de la aplicación

    <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
            <div class="width-constraint clearfix">
                <p class="pull-left muted credit">YourApp v1.0.0</p>
    
                <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
            </div>
        </div>
    </div>

    a continuación, puede utilizar css para reemplazar los archivos de inicio de clases para ajustar la altura, la fuente, y el color

        .navbar-fixed-bottom {
          font-size: 12px;
          line-height: 18px;
        }
        .navbar-fixed-bottom .navbar-inner {
            min-height: 22px;
        }
        .navbar-fixed-bottom .p {
            margin: 2px 0 2px;
        }
  14. 3

    Puede utilizar jQuery para manejar este:

    $(function() {
        /**
         * Read the size of the window and reposition the footer at the bottom.
         */
        var stickyFooter = function(){
            var pageHeight = $('html').height();
            var windowHeight = $(window).height();
            var footerHeight = $('footer').outerHeight();
    
            //A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
            //and thus is outside of its container and counted in $('html').height().
            var totalHeight = $('footer').hasClass('fixed-bottom') ?
                pageHeight + footerHeight : pageHeight;
    
            //If the window is larger than the content, fix the footer at the bottom.
            if (windowHeight >= totalHeight) {
                return $('footer').addClass('fixed-bottom');
            } else {
                //If the page content is larger than the window, the footer must move.
                return $('footer').removeClass('fixed-bottom');
            }
        };
    
        //Call when this script is first loaded.
        window.onload = stickyFooter;
    
        //Call again when the window is resized.
        $(window).resize(function() {
            stickyFooter();
        });
    });
  15. 2

    La técnica más sencilla es probablemente el uso de Bootstrap navbar-static-bottom en conjunción con la configuración de la principal div contenedor con height: 100vh (nuevo CSS3 vista del puerto de porcentaje). Esto limpiará el pie de página en la parte inferior.

    <main class="container" style="height: 100vh;">
      some content
    </main>      
    <footer class="navbar navbar-default navbar-static-bottom">
      <div class="container">
      <p class="navbar-text navbar-left">&copy; Footer4U</p>
      </div>
    </footer>
  16. 2

    Probado con Bootstrap 3.6.6.

    HTML

    <div class="container footer navbar-fixed-bottom">
      <footer>
        <!-- your footer content here -->
      </footer>
    </div>

    CSS

    .footer {
      bottom: 0;
      position: absolute;
    }
  17. 1
    #wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width: 100%;
    /*Negative indent footer by its height*/
    margin: 0 auto -60px;
    position: fixed;
    left: 0;
    top: 0;
    }

    El pie de la altura coincide con el tamaño de la parte inferior de sangría de la envoltura elemento.

    .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    }
  18. 1

    El único que trabajó para mí!:

    html {
      position: relative;
      min-height: 100%;
      padding-bottom:90px;
    }
    body {
      margin-bottom: 90px;
    }
    footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 90px;
    }
  19. 1

    Usar el flex de utilidades integradas en Bootstrap 4!
    Esto es lo que yo he venido para arriba con el uso de la mayoría de Bootstrap 4 utilidades.

    <div class="d-flex flex-column" style="min-height: 100vh">
      <header></header>
      <div class="container flex-grow-1">
        <div>Some Content</div>
      </div>
      <footer></footer>
    </div>
    • .d-flex para hacer el principal div contenedor flex
    • .flex-column en el principal div para organizar tu flex elementos en una columna
    • min-height: 100vh a los principales div, ya sea con un atributo de estilo o css, para llenar el área de visualización vertical
    • .flex-grow-1 en el elemento contenedor que tiene el principal contenedor de contenido ocupan todo el espacio que queda en la ventanilla de altura.
  20. 1

    Por el Bootstrap 4.3 ejemplo, en caso de que usted está perdiendo su cordura como lo hice yo, esta es la forma en que realmente funciona:

    • Todos los padres de el pie de página div necesita tener height: 100% (h-100 clase)
    • La matriz directa de el pie de página debe tener display: flex (d-flex clase)
    • El pie de página debe tener margin-top: auto (mt-auto clase)

    El problema es que en la moderna front-end marcos a menudo nos han adicionales contenedores alrededor de estos elementos.

    Por ejemplo en mi caso, con Angular, he compuesto el punto de vista de una aplicación separada de la raíz, de la aplicación principal componente, y el pie de página de componentes – todos los cuales se añadió un elemento personalizado de la catedral.

    Así que, para que funcione, he tenido que añadir clases a estos contenedor de elementos: un h-100, moviendo la d-flex en la planta de abajo, y moviendo el mt-auto un nivel por encima del pie de página (así que en realidad no está en el pie de página de la clase más, pero en mi <app-footer> elemento personalizado).

  21. 0

    Parece que el height:100% ‘cadena’ se ha roto en div#main. Trate de añadir height:100% y que pueden estar más cerca de tu objetivo.

  22. 0

    Aquí encontrarás el enfoque en HAML ( http://haml.info ) con la barra de navegación en la parte superior y pie de página en la parte inferior de la página:

    %body
      #main{:role => "main"}
        %header.navbar.navbar-fixed-top
          %nav.navbar-inner
            .container
              /HEADER
          .container
            /BODY
        %footer.navbar.navbar-fixed-bottom
          .container
            .row
              /FOOTER
    • Podría usted comentar su respuesta un poco? Código sólo respuestas son generalmente desaconsejado.
    • Bueno, ¿qué quieres saber?
    • Yo no necesito saber eso, pero alguien ha de venir después a este sitio no podría saber exactamente porque su respuesta, el código hace lo que hace.
    • Probablemente yo debería eliminar. Escribí una nueva intro. 🙂
  23. 0

    Mantenerlo simple.

    footer {
      bottom: 0;
      position: absolute;
    }

    Usted puede necesitar para compensar la altura del pie de página mediante la adición de un margin-bottom equivalente al pie de página de la altura a la body.

  24. 0

    Aquí hay un ejemplo usando css3:

    CSS:

    html, body {
        height: 100%;
        margin: 0;
    }
    #wrap {
        padding: 10px;
        min-height: -webkit-calc(100% - 100px);     /* Chrome */
        min-height: -moz-calc(100% - 100px);     /* Firefox */
        min-height: calc(100% - 100px);     /* native */
    }
    .footer {
        position: relative;
        clear:both;
    }

    HTML:

    <div id="wrap">
        <div class="container clear-top">
           body content....
        </div>
    </div>
    <footer class="footer">
        footer content....
    </footer>

    el violín

  25. 0

    otra solución posible, usando sólo las consultas de medios

    @media screen and (min-width:1px) and (max-width:767px) {
        .footer {
        }
    }
    /* no style for smaller or else it goes weird.*/
    @media screen and (min-width:768px) and (max-width:991px) {
        .footer{
            bottom: 0;
            width: 100%;
            position: absolute;
        }
    }
    @media screen and (min-width:992px) and (max-width:1199px) {
        .footer{
            bottom: 0;
            width: 100%;
            position: absolute;
        }
    }
    @media screen and (min-width:1120px){
        .footer{
            bottom: 0;
            width: 100%;
            position: absolute;
        }
    }
  26. 0

    Utilizar la siguiente clase de empujar a la última línea de la página y también hacer que el centro de la misma.
    Si usted está usando ruby on rails HAML página usted puede hacer uso del siguiente código.
    %footer.card.text-center

    Pls no olvides usar twitter bootstrapp

  27. 0

    Aquí es una solución para la última versión de Bootstrap (4.3 en el momento de la escritura) el uso de Flexbox.

    HTML:

    <div class="wrapper">
      <div class="content">
        <p>Content goes here</p>
      </div>
    </div>
    <footer class="footer"></footer>

    CSS:

    html, body {
      height: 100%;
    }
    
    body {
      display: flex;
      flex-direction: column;
    }
    
    .wrapper {
      flex-grow: 1;
    }

    Y un codepen ejemplo: https://codepen.io/tillytoby/pen/QPdomR

Dejar respuesta

Please enter your comment!
Please enter your name here