estoy haceiendo un sitio web tengo un problema con el footer. Sigo los pasos de bootstrap, pero tengo problemas con el responsive. Aclaro que arriba del footer hay texto e imagenes y si hago esto: .footer { position: absolute; bottom: 0; width: 100%; height: 60px; /* Set the fixed height of the footer here */ line-height: 60px; /* Vertically center the text there */ background-color: #f5f5f5; } el footer me queda en medio. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .footer { background-image: url("https://i.sstatic.net/AZ2Xw.png"); background-position: center center; background-repeat: no-repeat; position: absolute; margin-top: 580px; width: 100%; height: 300px; /* Set the fixed height of the footer here */ } <!-- language: lang-html --> <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content="stn" > <link rel="icon" href="favicon.ico"> <title>Electrocer San Telmo</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet"> <link href="main.css" rel="stylesheet"> </head> <body> <footer class="footer"> <div class="container text-white"> <br> <div class="row"> <div class="col-md-4 col-lg-2"> <h4>Facebook</h4> <p><i class="fab fa-facebook"></i> <a href="#">/usuario</a></p> </div> <div class="col-md-4 col-lg-4"> <h4 id="contacto">Contacto</h4> <p>San Telmo</p> <p>Dirección: CABA - Buenos Aires<br> Teléfonos:<br> eMail:</p> </div> <div class="col-md-4 col-lg-6"> <p> Maoa </p> </div> </div> </div> </footer> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </body> </html> <!-- end snippet -->