Memduh Cağrı Demir
Memduh Cağrı Demir
Programming language:Whatever
2021-07-10 13:16:12
0
Q:

bootstrap footer bottom

tom
tom
Code: Whatever
2021-08-17 09:30:12 
  <style>
.footer {
  position: fixed;
  left: 
  0;
  bottom: 0;
  width: 100%;  
  background-color: red;
  color: white;
  text-align: center;
}
</style>
<div class="footer">
  <p>Footer</p>
  </div>
4
Umesh Yadav
Umesh Yadav
Code: Whatever
2021-02-27 01:41:11 
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>
0
editfreak
editfreak
Code: Whatever
2021-02-27 01:43:44 
Html
<body class="d-flex flex-column">
  <div id="page-content">
    <div class="container text-center">
      <div class="row justify-content-center">
        <div class="col-md-7">
          <h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
          <p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will have a flexbox enabled sticky footer for your website!</p>
        </div>
      </div>
    </div>
  </div>
  <footer id="sticky-footer" class="py-4 bg-dark text-white-50">
    <div class="container text-center">
      <small>Copyright &copy; Your Website</small>
    </div>
  </footer>
</body>

CSS
html,
body {
  height: 100%;
}

#page-content {
  flex: 1 0 auto;
}

#sticky-footer {
  flex-shrink: none;
}

/* Other Classes for Page Styling */

body {
  background: #007bff;
  background: linear-gradient(to right, #0062E6, #33AEFF);
}

EXTERNAL RESOURCES LOADED INTO THIS FIDDLE:
jquery.slim.js
bootstrap.min.css
bootstrap.bundle.min.js
1
gboffi
gboffi
Code: Whatever
2021-02-27 01:42:37 
<div class="navbar navbar-inverse navbar-fixed-bottom">
      <div class="container">
        <p class="navbar-text">© Random</p>
      </div>
    </div>
0

Tags

Related

New to Communities?

Join the community