Bootstrap 4 Footer Examples


Example 1: bootstrap 4 footer

<!-- Footer --> <footer class="page-footer font-small blue pt-4">    <!-- Footer Links -->   <div class="container-fluid text-center text-md-left">      <!-- Grid row -->     <div class="row">        <!-- Grid column -->       <div class="col-md-6 mt-md-0 mt-3">          <!-- Content -->         <h5 class="text-uppercase">Footer Content</h5>         <p>Here you can use rows and columns to organize your footer content.</p>        </div>       <!-- Grid column -->        <hr class="clearfix w-100 d-md-none pb-3">        <!-- Grid column -->       <div class="col-md-3 mb-md-0 mb-3">          <!-- Links -->         <h5 class="text-uppercase">Links</h5>          <ul class="list-unstyled">           <li>             <a href="#!">Link 1</a>           </li>           <li>             <a href="#!">Link 2</a>           </li>           <li>             <a href="#!">Link 3</a>           </li>           <li>             <a href="#!">Link 4</a>           </li>         </ul>        </div>       <!-- Grid column -->        <!-- Grid column -->       <div class="col-md-3 mb-md-0 mb-3">          <!-- Links -->         <h5 class="text-uppercase">Links</h5>          <ul class="list-unstyled">           <li>             <a href="#!">Link 1</a>           </li>           <li>             <a href="#!">Link 2</a>           </li>           <li>             <a href="#!">Link 3</a>           </li>           <li>             <a href="#!">Link 4</a>           </li>         </ul>        </div>       <!-- Grid column -->      </div>     <!-- Grid row -->    </div>   <!-- Footer Links -->    <!-- Copyright -->   <div class="footer-copyright text-center py-3"2020 Copyright:     <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>   </div>   <!-- Copyright -->  </footer> <!-- Footer -->

Example 2: faire un footer avec bootstrap

<div class="navbar navbar-inverse navbar-fixed-bottom">       <div class="container">         <p class="navbar-text">© Random</p>       </div>     </div>

Example 3: bootstarp simple footer

<!-- Footer --> <footer class="page-footer font-small cyan darken-3">    <!-- Footer Elements -->   <div class="container">      <!-- Grid row-->     <div class="row">        <!-- Grid column -->       <div class="col-md-12 py-5">         <div class="mb-5 flex-center">            <!-- Facebook -->           <a class="fb-ic">             <i class="fab fa-facebook-f fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>           </a>           <!-- Twitter -->           <a class="tw-ic">             <i class="fab fa-twitter fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>           </a>           <!-- Google +-->           <a class="gplus-ic">             <i class="fab fa-google-plus-g fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>           </a>           <!--Linkedin -->           <a class="li-ic">             <i class="fab fa-linkedin-in fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>           </a>           <!--Instagram-->           <a class="ins-ic">             <i class="fab fa-instagram fa-lg white-text mr-md-5 mr-3 fa-2x"> </i>           </a>           <!--Pinterest-->           <a class="pin-ic">             <i class="fab fa-pinterest fa-lg white-text fa-2x"> </i>           </a>         </div>       </div>       <!-- Grid column -->      </div>     <!-- Grid row-->    </div>   <!-- Footer Elements -->    <!-- Copyright -->   <div class="footer-copyright text-center py-3"2020 Copyright:     <a href="https://mdbootstrap.com/"> MDBootstrap.com</a>   </div>   <!-- Copyright -->  </footer> <!-- Footer -->

Comments

Popular posts from this blog

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?