Footer in Bootstrap 4

Navigation
2

I'm doing a website I have a problem with the footer with the responsive.

I clarify that there are text and images above the footer and if I do this: 

.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;
}

the footer is left in the middle. 

.footer {
background-image: url("https://i.stack.imgur.com/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 */
}
<!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&oacute;n: CABA - Buenos Aires<br>
Tel&eacute;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>
    
asked by 24.05.2018 в 06:22
source

1 answer

2

Since you are using Bootstrap 4 and this is based on flexbox, you can use a sticky-footer that uses flex and thus not depend on a fixed height as in the past.

We need the <div class='main'></div> to occupy the necessary space and the footer will "stick" to the end of the screen.

The code would look like this (run it in full screen to see the result): 

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.main {
  flex: 1;
}

.footer {
  background-image: url("https://i.stack.imgur.com/AZ2Xw.png");
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  min-height: 300px;
}
<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">
<div class='main'></div>
<footer class="footer">
  <div class="container text-white">
    <br>
    <div class="row">
      <div class="col-12 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-12 col-md-4 col-lg-4">
        <h4 id="contacto">Contacto</h4>
        <p>San Telmo</p>
        <p>Direcci&oacute;n: CABA - Buenos Aires<br> Tel&eacute;fonos:
          <br> eMail:
        </p>
      </div>
      <div class="col-12 col-md-4 col-lg-6">
        <p>
          Maoa
        </p>
      </div>
    </div>
  </div>
</footer>
    
answered by 24.05.2018 / 06:52
source
modify the name of an input with jquery Does not play an animation on Android