Responsive footer layout with Bootstrap4 – ep02
Responsive footer layout with Bootstrap4 – ep02
html
<div class="sitemap bg-dark">
<div class="container">
<div class="collapse text-light text-center" id="collapseFoot">
<div class="p-5 text-center text-light">
<h3>sitemap</h3>
<hr class="hr2">
<nav class="navbar navbar-expand-sm navbar-dark">
<ul class="navbar-nav m-auto row" id="Mmenu"></ul>
<ul class="navbar-nav ml-auto"><a class="nav-link" data-toggle="collapse" href="#collapseFoot" role="button" aria-expanded="false" aria-controls="collapseFoot"><i class="fas fa-times fa-2x"></i></a></ul>
</nav>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Terms of use</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Diam phasellus vestibulum lorem sed risus ultricies tristique. Aliquet nec ullamcorper sit amet risus nullam. Proin nibh nisl condimentum id venenatis. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Mauris cursus mattis molestie a iaculis. Arcu odio ut sem nulla pharetra diam sit. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Eget gravida cum sociis natoque penatibus et magnis dis parturient. Dolor magna eget est lorem ipsum. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Aliquam faucibus purus in massa tempor nec feugiat nisl pretium. In metus vulputate eu scelerisque felis imperdiet proin. Sit amet purus gravida quis blandit turpis.
</p>
<p>
Integer vitae justo eget magna fermentum iaculis eu non diam. Maecenas sed enim ut sem viverra. Dolor magna eget est lorem ipsum dolor sit amet consectetur. Eget mi proin sed libero enim. Lectus sit amet est placerat in egestas. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Pretium fusce id velit ut tortor pretium viverra suspendisse potenti. Tortor at auctor urna nunc id cursus metus aliquam. Id donec ultrices tincidunt arcu non. Et molestie ac feugiat sed. Arcu risus quis varius quam quisque id diam vel quam. Lectus sit amet est placerat in egestas erat imperdiet sed. Potenti nullam ac tortor vitae purus. Id faucibus nisl tincidunt eget. Et molestie ac feugiat sed lectus. Sit amet nisl purus in.
</p>
<p>
Commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Gravida cum sociis natoque penatibus et magnis dis. Commodo odio aenean sed adipiscing diam donec. Sed tempus urna et pharetra pharetra massa massa ultricies mi. Erat velit scelerisque in dictum non consectetur a erat. Amet justo donec enim diam. Porttitor leo a diam sollicitudin tempor. Gravida arcu ac tortor dignissim. Libero id faucibus nisl tincidunt eget nullam non nisi. Sodales neque sodales ut etiam sit amet nisl purus in. Eget dolor morbi non arcu. A pellentesque sit amet porttitor eget dolor. Magna fermentum iaculis eu non diam. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Sit amet justo donec enim diam vulputate ut.
</p>
<p>
Elementum sagittis vitae et leo. Amet mattis vulputate enim nulla. Dictum non consectetur a erat. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh sed. Non sodales neque sodales ut etiam sit amet. Hendrerit dolor magna eget est lorem ipsum dolor. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque. Elit at imperdiet dui accumsan sit amet nulla. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Semper feugiat nibh sed pulvinar proin.
</p>
<p>
Dolor sed viverra ipsum nunc aliquet bibendum. Non curabitur gravida arcu ac tortor dignissim convallis. Turpis cursus in hac habitasse platea dictumst quisque sagittis purus. Amet justo donec enim diam. Enim praesent elementum facilisis leo vel fringilla. Feugiat in ante metus dictum at tempor commodo. Porttitor eget dolor morbi non arcu. Etiam dignissim diam quis enim lobortis scelerisque fermentum. Euismod nisi porta lorem mollis aliquam. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Tincidunt eget nullam non nisi est sit. Mauris ultrices eros in cursus turpis massa tincidunt dui ut.
</p>
<p>
Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Cum sociis natoque penatibus et magnis dis parturient. Id consectetur purus ut faucibus. Id neque aliquam vestibulum morbi blandit. Et molestie ac feugiat sed. Suspendisse sed nisi lacus sed viverra tellus in hac. Nam aliquam sem et tortor consequat. Tortor dignissim convallis aenean et tortor at risus viverra. Pulvinar sapien et ligula ullamcorper malesuada proin. Nisl purus in mollis nunc sed id semper. Accumsan lacus vel facilisis volutpat est velit egestas. Eget est lorem ipsum dolor sit. Consequat interdum varius sit amet mattis vulputate enim. Ultrices sagittis orci a scelerisque. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Dignissim cras tincidunt lobortis feugiat vivamus at augue. Velit ut tortor pretium viverra suspendisse potenti nullam. Dignissim cras tincidunt lobortis feugiat vivamus. Aliquam ut porttitor leo a diam sollicitudin tempor id eu.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
<footer>
<div class="Mfoot1 py-5">
<div class="container">
<div class="row">
<div class="col-12 col-lg-5 text-center text-lg-left">
<p>©Copyright <img src="images/symbol.svg" height="14px"> <span class="font-weight-bold">Meeny</span>.com</a> All rights reserved</p>
</div>
<div class="col-12 col-lg-7">
<ul class="footMnu nav justify-content-center justify-content-lg-end">
<li class="nav-item"><a href="" class="btn btn-light">About Us</a></li>
<li class="nav-item"><a href="" class="btn btn-light">Products</a></li>
<li class="nav-item"><a href="" class="btn btn-light" data-toggle="modal" data-target="#staticBackdrop">Terms of use</a></li>
<li class="nav-item"><a href="" class="btn btn-light">Privacy policy</a></li>
<li class="nav-item"><a class="btn btn-light" data-toggle="collapse" href="#collapseFoot" role="button" aria-expanded="false" aria-controls="collapseFoot">Sitemap</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="Mfoot2 py-2">
<div class="container">
<ul class="footMnu nav justify-content-center justify-content-lg-end">
<li class="nav-item"><a href="" class="btn btn-light">About Us</a></li>
<li class="nav-item"><a href="" class="btn btn-light">Products</a></li>
<li class="nav-item"><a href="" class="btn btn-light" data-toggle="modal" data-target="#staticBackdrop">Terms of use</a></li>
<li class="nav-item"><a href="" class="btn btn-light">Privacy policy</a></li>
<li class="nav-item"><a class="btn btn-light" data-toggle="collapse" href="#collapseFoot" role="button" aria-expanded="false" aria-controls="collapseFoot">Sitemap</a></li>
</ul>
<div class="row">
<div class="col-md-2 border-md-right text-center">
<h5><img src="images/symbol.svg" height="20px"> <span class="font-weight-bold">Meeny</span>.com</h5>
</div>
<div class="col-md-10">
<ul class="Mcontact list-group">
<li class="list-group-item">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-envelope" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
</svg> :
jessica416901@gmail.com
</li>
<li class="list-group-item">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-headset" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 1a5 5 0 0 0-5 5v4.5H2V6a6 6 0 1 1 12 0v4.5h-1V6a5 5 0 0 0-5-5z"/>
<path d="M11 8a1 1 0 0 1 1-1h2v4a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V8zM5 8a1 1 0 0 0-1-1H2v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8z"/>
<path fill-rule="evenodd" d="M13.5 8.5a.5.5 0 0 1 .5.5v3a2.5 2.5 0 0 1-2.5 2.5H8a.5.5 0 0 1 0-1h3.5A1.5 1.5 0 0 0 13 12V9a.5.5 0 0 1 .5-.5z"/>
<path d="M6.5 14a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2h-1a1 1 0 0 1-1-1z"/>
</svg> :
1-604-1111-1111
</li>
<li class="list-group-item">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-printer" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11 2H5a1 1 0 0 0-1 1v2H3V3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h-1V3a1 1 0 0 0-1-1zm3 4H2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h1v1H2a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z"/>
<path fill-rule="evenodd" d="M11 9H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1zM5 8a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H5z"/>
<path d="M3 7.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
</svg> :
1-604-1111-1112
</li>
<li class="list-group-item">
©Copyright 2020 <span class="font-weight-bold">Meeny</span>.com</a> All rights reserved
</li>
</ul>
</div>
</div>
</div>
<div class="text-center bg-primary">
<ul class="list-group list-group-horizontal text-info justify-content-center">
<li class="list-group-item"><i class="fab fa-facebook-f "></i></li>
<li class="list-group-item"><i class="fab fa-twitter "></i></li>
<li class="list-group-item"><i class="fab fa-twitch "></i></li>
<li class="list-group-item"><i class="fab fa-instagram "></i></li>
<li class="list-group-item"><i class="fab fa-whatsapp "></i></li>
<li class="list-group-item"><i class="fab fa-youtube "></i></li>
<li class="list-group-item"><i class="fab fa-linkedin-in "></i></li>
<li class="list-group-item"><i class="fab fa-github "></i></li>
<li class="list-group-item"><i class="fab fa-skype "></i></li>
</ul>
</div>
</div>
<hr>
<div class="Mfoot3 bg-primary py-5">
<div class="container">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 text-light">
<div class="p-3">
<h5 class="pl-2"><img src="images/symbol_w.svg" height="20px"> <span class="font-weight-bold">Meeny</span>.com</h5>
<hr class="hr2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra accumsan in nisl nisi scelerisque eu. Pulvinar pellentesque habitant morbi tristique senectus et.</p>
</div>
<div class="p-3">
<h5 class="pl-2">Quick links</h5>
<hr class="hr2">
<ul class="footMnu">
<li class=""><a href="" class="text-light">About Us</a></li>
<li class=""><a href="" class="text-light">Products</a></li>
<li class=""><a href="" class="text-light" data-toggle="modal" data-target="#staticBackdrop">Terms of use</a></li>
<li class=""><a href="" class="text-light">Privacy policy</a></li>
<li class=""><a class="text-light" data-toggle="collapse" href="#collapseFoot" role="button" aria-expanded="false" aria-controls="collapseFoot">Sitemap</a></li>
</ul>
</div>
<div class="p-3">
<h5 class="pl-2">SNS</h5>
<hr class="hr2">
<ul class="list-group list-group-horizontal row row-cols-4 text-center px-4">
<li class="list-group-item"><i class="fab fa-facebook-f fa-2x "></i></li>
<li class="list-group-item"><i class="fab fa-twitter fa-2x "></i></li>
<li class="list-group-item"><i class="fab fa-twitch fa-2x "></i></li>
<li class="list-group-item"><i class="fab fa-instagram fa-2x "></i></li>
<li class="list-group-item"><i class="fab fa-whatsapp fa-2x "></i></li>
<li class="list-group-item"><i class="fab fa-youtube fa-2x "></i></li>
<li class="list-group-item"><i class="fab fa-linkedin-in fa-2x "></i></li>
<li class="list-group-item"><i class="fab fa-github fa-2x "></i></li>
<li class="list-group-item"><i class="fab fa-skype fa-2x "></i></li>
</ul>
</div>
<div class="p-3">
<h5 class="pl-2">Contact</h5>
<hr class="hr2">
<ul class="Mcontact">
<li class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-envelope" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
</svg> :
jessica416901@gmail.com
</li>
<li class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-headset" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 1a5 5 0 0 0-5 5v4.5H2V6a6 6 0 1 1 12 0v4.5h-1V6a5 5 0 0 0-5-5z"/>
<path d="M11 8a1 1 0 0 1 1-1h2v4a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V8zM5 8a1 1 0 0 0-1-1H2v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8z"/>
<path fill-rule="evenodd" d="M13.5 8.5a.5.5 0 0 1 .5.5v3a2.5 2.5 0 0 1-2.5 2.5H8a.5.5 0 0 1 0-1h3.5A1.5 1.5 0 0 0 13 12V9a.5.5 0 0 1 .5-.5z"/>
<path d="M6.5 14a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2h-1a1 1 0 0 1-1-1z"/>
</svg> :
1-604-1111-1111
</li>
<li class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-printer" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11 2H5a1 1 0 0 0-1 1v2H3V3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h-1V3a1 1 0 0 0-1-1zm3 4H2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h1v1H2a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z"/>
<path fill-rule="evenodd" d="M11 9H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1zM5 8a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H5z"/>
<path d="M3 7.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
</svg> :
1-604-1111-1112
</li>
</ul>
</div>
</div>
</div>
<div class="border-top">
<div class="text-center text-light py-3">
<p>©Copyright 2020 <span class="font-weight-bold">Meeny</span>.com</a> All rights reserved</p>
</div>
</div>
</div>
<hr>
<div class="Mfoot4 bg-dark py-5">
<div class="container">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 text-light pb-3">
<div class="p-3 border-md-right">
<div class="text-center">
<img src="images/symbol_w.svg" height="120px">
<h5>
<span class="font-weight-bold">Meeny</span>.com
</h5>
</div>
</div>
<div class="p-3 border-lg-right border-top border-md-top-0">
<h5 class="w900 text-uppercase pl-2"><i class="fas fa-bars "></i> Quick links</h5>
<ul class="footMnu">
<li class=""><a href="" class="text-light">About Us</a></li>
<li class=""><a href="" class="text-light">Products</a></li>
<li class=""><a href="" class="text-light" data-toggle="modal" data-target="#staticBackdrop">Terms of use</a></li>
<li class=""><a href="" class="text-light">Privacy policy</a></li>
<li class=""><a class="text-light" data-toggle="collapse" href="#collapseFoot" role="button" aria-expanded="false" aria-controls="collapseFoot">Sitemap</a></li>
</ul>
</div>
<div class="p-3 border-md-right border-top border-md-top-0">
<h5 class="w900 text-uppercase pl-2"><i class="fas fa-clock "></i> Opening Hours</h5>
<ul>
<li><span class="w900 text-success">Open</span> : 10 am</li>
<li>Close : 7 pm</li>
<li>sat,sun : closed</li>
</ul>
</div>
<div class="p-3 border-top border-md-top-0">
<h5 class="w900 text-uppercase pl-2"><i class="fas fa-map "></i> Contact</h5>
<ul class="Mcontact">
<li class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-envelope" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
</svg> :
jessica416901@gmail.com
</li>
<li class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-headset" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 1a5 5 0 0 0-5 5v4.5H2V6a6 6 0 1 1 12 0v4.5h-1V6a5 5 0 0 0-5-5z"/>
<path d="M11 8a1 1 0 0 1 1-1h2v4a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V8zM5 8a1 1 0 0 0-1-1H2v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8z"/>
<path fill-rule="evenodd" d="M13.5 8.5a.5.5 0 0 1 .5.5v3a2.5 2.5 0 0 1-2.5 2.5H8a.5.5 0 0 1 0-1h3.5A1.5 1.5 0 0 0 13 12V9a.5.5 0 0 1 .5-.5z"/>
<path d="M6.5 14a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2h-1a1 1 0 0 1-1-1z"/>
</svg> :
1-604-1111-1111
</li>
<li class="">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-printer" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11 2H5a1 1 0 0 0-1 1v2H3V3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h-1V3a1 1 0 0 0-1-1zm3 4H2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h1v1H2a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z"/>
<path fill-rule="evenodd" d="M11 9H5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1zM5 8a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H5z"/>
<path d="M3 7.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
</svg> :
1-604-1111-1112
</li>
</ul>
</div>
</div>
</div>
<div class="border-top bg-white">
<div class="container">
<div class="row row-cols-1 row-cols-md-2">
<div class="text-center text-lg-left py-3">
<p class="mb-0">Copyright © 2020 <span class="font-weight-bold text-success">Meeny</span>.com</a> All rights reserved</p>
</div>
<div class="">
<ul class="list-group list-group-horizontal justify-content-center justify-content-md-end">
<li class="list-group-item"><i class="fab fa-facebook-f "></i></li>
<li class="list-group-item"><i class="fab fa-twitter "></i></li>
<li class="list-group-item"><i class="fab fa-twitch "></i></li>
<li class="list-group-item"><i class="fab fa-instagram "></i></li>
<li class="list-group-item"><i class="fab fa-whatsapp "></i></li>
<li class="list-group-item"><i class="fab fa-youtube "></i></li>
<li class="list-group-item"><i class="fab fa-linkedin-in "></i></li>
<li class="list-group-item"><i class="fab fa-github "></i></li>
<li class="list-group-item"><i class="fab fa-skype "></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
scss
.Mfoot1{
border-top: 2px solid $gray-700;
ul.footMnu{
.nav-item{
padding: 2px;
}
}
}
.Mfoot2{
border-top: 2px solid $gray-700;
ul.footMnu{
.nav-item{
padding: 6px;
}
}
ul.list-group{
li.list-group-item{
background-color: transparent;
border: 0;
padding: 4px;
}
}
}
.Mfoot3{
a{text-decoration: none;}
border-top: 2px solid $gray-700;
ul{
li{
padding: 2px;
}
}
ul.list-group{
li.list-group-item{
background-color: transparent;
border: 0;
padding: 4px;
}
}
}
.hr2{
border-style: solid;
border-color: $white;
border-width: 4px 0 0 0;
border-radius: 20px;
height: 30px;
}
.Mfoot4{
a{text-decoration: none;}
border-top: 2px solid $gray-700;
ul{
padding-top: 14px;;
li{
padding: 2px;
}
}
ul.list-group{
li.list-group-item{
background-color: transparent;
border: 0;
padding: 0 14px;
}
}
}