0

Hola a todo les pido ayuda ya que estoy haciendo un footer con bootstrap y lo que estoy buscando es que el footer tenga una distancia de separación mínima en la parte de arriba, para dar una idea este es mi código del footer:

<!-- Footer -->
<footer class="text-center text-lg-start bg-light text-muted">
  <!-- Section: Social media -->
  <section
    class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom"
  >
    <!-- Left -->
    <div class="me-5 d-none d-lg-block">
      <span>Get connected with us on social networks:</span>
    </div>
    <!-- Left -->

    <!-- Right -->
    <div>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-facebook-f"></i>
      </a>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-twitter"></i>
      </a>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-google"></i>
      </a>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-instagram"></i>
      </a>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-linkedin"></i>
      </a>
      <a href="" class="me-4 text-reset">
        <i class="fab fa-github"></i>
      </a>
    </div>
    <!-- Right -->
  </section>
  <!-- Section: Social media -->

  <!-- Section: Links  -->
  <section class="">
    <div class="container text-center text-md-start mt-5">
      <!-- Grid row -->
      <div class="row mt-3">
        <!-- Grid column -->
        <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
          <!-- Content -->
          <h6 class="text-uppercase fw-bold mb-4">
            <i class="fas fa-gem me-3"></i>Company name
          </h6>
          <p>
            Here you can use rows and columns to organize your footer content. Lorem ipsum
            dolor sit amet, consectetur adipisicing elit.
          </p>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
          <!-- Links -->
          <h6 class="text-uppercase fw-bold mb-4">
            Products
          </h6>
          <p>
            <a href="#!" class="text-reset">Angular</a>
          </p>
          <p>
            <a href="#!" class="text-reset">React</a>
          </p>
          <p>
            <a href="#!" class="text-reset">Vue</a>
          </p>
          <p>
            <a href="#!" class="text-reset">Laravel</a>
          </p>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
          <!-- Links -->
          <h6 class="text-uppercase fw-bold mb-4">
            Useful links
          </h6>
          <p>
            <a href="#!" class="text-reset">Pricing</a>
          </p>
          <p>
            <a href="#!" class="text-reset">Settings</a>
          </p>
          <p>
            <a href="#!" class="text-reset">Orders</a>
          </p>
          <p>
            <a href="#!" class="text-reset">Help</a>
          </p>
        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
          <!-- Links -->
          <h6 class="text-uppercase fw-bold mb-4">
            Contact
          </h6>
          <p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
          <p>
            <i class="fas fa-envelope me-3"></i>
            [email protected]
          </p>
          <p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
          <p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
        </div>
        <!-- Grid column -->
      </div>
      <!-- Grid row -->
    </div>
  </section>
  <!-- Section: Links  -->

  <!-- Copyright -->
  <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
    © 2021 Copyright:
    <a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
  </div>
  <!-- Copyright -->
</footer>
<!-- Footer -->

Ese es un código que saque de una página ya que no se como hacer un footer un bootstrap, y el resultado esperado es algo así como el footer de stackoverflow, que justo esta en cierta parte de la página ya sea que hayan muchos elementos o no, o algo así creo que es, lo primero que intenté fue hacer esto en un mi archivo css:

footer
{
    margin-top: 100px;
}

Pero aún así esta muy pegado, quiero decir que no se mucho de css, tal vez solo lo normal o casi básico, ¿alguien me puede ayudar y decirme como puedo hacer que el footer tenga una distancia mínima de separacíon con el resto de elementos en la parte de arriba? Desde ya gracias

2 respuestas 2

1

Lo que requieres es que el footer siempre este pegado en la parte inferior de la pagina, independiente de si hay mucho o poco contenido, para ello es necesario que al body le agregues el estilo de position: relative; min-height: 100vh; y al Footer el estilo de position: absolute; bottom: 0; width: 100%;

Adicional con javascript yo le agregue que tomara el tamaño del footer y se lo aplicara como padding-bottom al main

Espero te funcione, saludos !

<!DOCTYPE html>
<html>
  <head>
    <meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' />
    <link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet' />
    <link rel='stylesheet' href='css/main.css' />
  </head>
  <body class="position-relative" style="min-height: 100vh;">

    <main>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod vero similique eligendi alias ipsam deserunt dignissimos possimus ipsa dolorum repellat autem, et aspernatur voluptas quis. Explicabo, eius dicta nulla iure id perferendis optio officiis mollitia repudiandae voluptatum blanditiis fugit doloremque officia quo animi totam placeat expedita. Cupiditate corporis nihil praesentium? Asperiores, laboriosam fuga corporis ab provident iusto dolorum voluptas veritatis harum consectetur iste quae cumque tempora? Libero similique obcaecati quasi, ipsa, consectetur aliquid quisquam delectus culpa exercitationem unde sint sed vitae quidem veritatis velit? Nam placeat nulla velit aperiam dolore vitae debitis eos molestiae. Nisi, 
    </main>
    
    <!-- Footer -->
    <footer class="text-center text-lg-start bg-light text-muted position-absolute" style="bottom: 0; width: 100%;">
      <!-- Section: Social media -->
      <section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom" >
        <!-- Left -->
        <div class="me-5 d-none d-lg-block">
          <span>Get connected with us on social networks:</span>
        </div>
        <!-- Left -->

        <!-- Right -->
        <div>
          <a href="" class="me-4 text-reset">
            <i class="fab fa-facebook-f"></i>
          </a>
          <a href="" class="me-4 text-reset">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="" class="me-4 text-reset">
            <i class="fab fa-google"></i>
          </a>
          <a href="" class="me-4 text-reset">
            <i class="fab fa-instagram"></i>
          </a>
          <a href="" class="me-4 text-reset">
            <i class="fab fa-linkedin"></i>
          </a>
          <a href="" class="me-4 text-reset">
            <i class="fab fa-github"></i>
          </a>
        </div>
        <!-- Right -->
      </section>
      <!-- Section: Social media -->

      <!-- Section: Links  -->
      <section class="">
        <div class="container text-center text-md-start mt-5">
          <!-- Grid row -->
          <div class="row mt-3">
            <!-- Grid column -->
            <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
              <!-- Content -->
              <h6 class="text-uppercase fw-bold mb-4">
                <i class="fas fa-gem me-3"></i>Company name
              </h6>
              <p>
                Here you can use rows and columns to organize your footer content. Lorem ipsum
                dolor sit amet, consectetur adipisicing elit.
              </p>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
              <!-- Links -->
              <h6 class="text-uppercase fw-bold mb-4">
                Products
              </h6>
              <p>
                <a href="#!" class="text-reset">Angular</a>
              </p>
              <p>
                <a href="#!" class="text-reset">React</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Vue</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Laravel</a>
              </p>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
              <!-- Links -->
              <h6 class="text-uppercase fw-bold mb-4">
                Useful links
              </h6>
              <p>
                <a href="#!" class="text-reset">Pricing</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Settings</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Orders</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Help</a>
              </p>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
              <!-- Links -->
              <h6 class="text-uppercase fw-bold mb-4">
                Contact
              </h6>
              <p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
              <p>
                <i class="fas fa-envelope me-3"></i>
                [email protected]
              </p>
              <p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
              <p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
            </div>
            <!-- Grid column -->
          </div>
          <!-- Grid row -->
        </div>
      </section>
      <!-- Section: Links  -->

      <!-- Copyright -->
      <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
        © 2021 Copyright:
        <a class="text-reset fw-bold" href="https://mdbootstrap.com/">MDBootstrap.com</a>
      </div>
      <!-- Copyright -->
    </footer>
    <!-- Footer -->
    
    <script src='https://code.jquery.com/jquery-3.4.0.min.js'></script>
    <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
    <script src='https://kit.fontawesome.com/25f07c253e.js'></script>
    <script>
      $(document).ready(function(){
        var footerHeight = $('footer').outerHeight();
        $('main').css('padding-bottom', footerHeight);
      });
    </script>
  </body>
</html>

1
  • Muchas gracias, era justo lo que buscaba :)
    – DFG
    Commented el 7 dic. 2021 a las 17:32
1

Al colocar important! a cualquier atributo, pisará los estilos de los demás css padre, en este caso el css padre es el de boostrap. Se debe verificar que el position sea relative.

footer
{
    margin-top: 100px !important;
}

ó

footer
{
    margin-top: 100px !important;
    position:relative !important;
}
3
  • Hola muchas gracias por la ayuda, pero no es exactamente lo que busco, lo que busco esque tenga un mínimo de separación con el resto de elementos de la página, no se si me explico
    – DFG
    Commented el 5 dic. 2021 a las 4:09
  • La verdad no es muy claro lo que requiere, quizás usar padding-top , en vez de margin-top, padding-top genera un espaciado superior pero de forma interna del footer, no se si eso es lo que busca, pues el de stack overflow tiene esas características. Commented el 5 dic. 2021 a las 4:23
  • intente con padding-top pero eso hace que los elementos de texto que tengo adentro se separen
    – DFG
    Commented el 5 dic. 2021 a las 4:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.