如何在纯自举4中实现以下布局
+-------------------------------------------------+
| Navbar fixed on top |
+------------+------------------------------------+
| | |
| | |
|Column A |Column B |
| | |
| | |
| | |
| | |
| | |
| | |
+------------+------------------------------------+
| Fixed footer |
+-------------------------------------------------+
[请注意，A列和B列应占据剩余空间，以使整个屏幕都不会在主体水平滚动显示。但是，如果它们的内容更多，它们应该在彼此独立的div中滚动，例如，如果我滚动到A列，则不应滚动B列，反之亦然。还有如何隐藏滚动条。
我在这里为您制作了此代码，您可以查看代码以查看发生了什么。从本质上讲，这是将您的部分设置为固定位置并设置溢出滚动的方法。
.header {
position: fixed;
width: 100%;
background-color: blue;
top: 0;
}
.footer {
position: fixed;
bottom: 0px;
width: 100%;
background-color: red;
}
.content{
margin: 25px;
overflow: hidden;
position: fixed;
}
.a {
width: 25%;
float: left;
overflow: scroll;
height: 100vh;
}
.b {
width: 75%;
float: left;
overflow: scroll;
height: 100vh;
}<div class="header"> im the header</div>
<div class="content">
<div class="a">
column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A column A
</div>
<div class="b">
column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b olumn b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b column b
</div>
</div>
<div class="footer"> I'm the footer</div>可能您必须指定div到100vh的高度，以便当内容增加到100% height以上时。它将应用引导程序overflow-auto的内置类，该类将滚动条应用于内容大于100%的div。
.col-12 {
background-color: brown;
}
.col-4 {
height: 100vh;
background-color: green;
}
.col-8 {
height: 100vh;
background-color: yellow;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center text-white">
<h1>HEADER</h1>
</div>
<div class="col-4 overflow-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, exercitationem eaque quod tempora eius quae
ipsam hic odio veniam pariatur iusto aspernatur ex voluptatem voluptatibus ad! Tempore inventore quas in.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta atque placeat sed delectus a, fugiat debitis
exercitationem est beatae blanditiis, nam, optio sunt eos nesciunt? Voluptatum animi aliquam nemo ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, exercitationem eaque quod tempora eius quae
ipsam hic odio veniam pariatur iusto aspernatur ex voluptatem voluptatibus ad! Tempore inventore quas in.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta atque placeat sed delectus a, fugiat debitis
exercitationem est beatae blanditiis, nam, optio sunt eos nesciunt? Voluptatum animi aliquam nemo ut.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta atque placeat sed delectus a, fugiat debitis
exercitationem est beatae blanditiis, nam, optio sunt eos nesciunt? Voluptatum animi aliquam nemo ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, exercitationem eaque quod tempora eius quae
ipsam hic odio veniam pariatur iusto aspernatur ex voluptatem voluptatibus ad! Tempore inventore quas in.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta atque placeat sed delectus a, fugiat debitis
exercitationem est beatae blanditiis, nam, optio sunt eos nesciunt? Voluptatum animi aliquam nemo ut.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta atque placeat sed delectus a, fugiat debitis
exercitationem est beatae blanditiis, nam, optio sunt eos nesciunt? Voluptatum animi aliquam nemo ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, exercitationem eaque quod tempora eius quae
ipsam hic odio veniam pariatur iusto aspernatur ex voluptatem voluptatibus ad! Tempore inventore quas in.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta atque placeat sed delectus a, fugiat debitis
exercitationem est beatae blanditiis, nam, optio sunt eos nesciunt? Voluptatum animi aliquam nemo ut.</p>
</div>
<div class="col-8 overflow-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, exercitationem eaque quod tempora eius quae
ipsam hic odio veniam pariatur iusto aspernatur ex voluptatem voluptatibus ad! Tempore inventore quas in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, exercitationem eaque quod tempora eius quae
ipsam hic odio veniam pariatur iusto aspernatur ex voluptatem voluptatibus ad! Tempore inventore quas in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, exercitationem eaque quod tempora eius quae
ipsam hic odio veniam pariatur iusto aspernatur ex voluptatem voluptatibus ad! Tempore inventore quas in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, exercitationem eaque quod tempora eius quae
ipsam hic odio veniam pariatur iusto aspernatur ex voluptatem voluptatibus ad! Tempore inventore quas in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, exercitationem eaque quod tempora eius quae
ipsam hic odio veniam pariatur iusto aspernatur ex voluptatem voluptatibus ad! Tempore inventore quas in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, exercitationem eaque quod tempora eius quae
ipsam hic odio veniam pariatur iusto aspernatur ex voluptatem voluptatibus ad! Tempore inventore quas in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, exercitationem eaque quod tempora eius quae
ipsam hic odio veniam pariatur iusto aspernatur ex voluptatem voluptatibus ad! Tempore inventore quas in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, exercitationem eaque quod tempora eius quae
ipsam hic odio veniam pariatur iusto aspernatur ex voluptatem voluptatibus ad! Tempore inventore quas in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, exercitationem eaque quod tempora eius quae
ipsam hic odio veniam pariatur iusto aspernatur ex voluptatem voluptatibus ad! Tempore inventore quas in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, exercitationem eaque quod tempora eius quae
ipsam hic odio veniam pariatur iusto aspernatur ex voluptatem voluptatibus ad! Tempore inventore quas in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, exercitationem eaque quod tempora eius quae
ipsam hic odio veniam pariatur iusto aspernatur ex voluptatem voluptatibus ad! Tempore inventore quas in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, exercitationem eaque quod tempora eius quae
ipsam hic odio veniam pariatur iusto aspernatur ex voluptatem voluptatibus ad! Tempore inventore quas in.</p>
</div>
<div class="col-12 text-center text-white">
<h1>FOOTER</h1>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body>
</html>就像我在评论中提到的那样。实现此目的的一种方法是使用标准的Bootstrap网格布局来实现所需的实际布局。
row no-gutters
col
cols的最大值为12。您可以阅读有关Bootstrap布局here的更多信息。
对于您的滚动功能，您需要查看的是CSS属性overflow。
其外观示例。
HTML：
<nav class="navbar" id="mainNav">
<div class="container">
NAV
</div>
</nav>
<div class="wrapper">
<div class="row no-gutters">
<div class="col-md-4 my-custom-class">
Column A
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta tellus at augue congue consequat. Quisque in tristique nisi. Integer molestie odio at nisi auctor pharetra. Aliquam convallis sit amet sapien id pellentesque. Nam in dapibus mauris. Proin vitae ante sit amet tellus maximus sodales. Cras erat urna, commodo egestas nisi a, tincidunt interdum orci. Morbi scelerisque suscipit nunc. Cras laoreet lacus et velit egestas imperdiet. Quisque vehicula, nulla id ornare gravida, libero metus vehicula ante, nec ultrices orci dui non leo. Cras efficitur ac neque ut convallis. Aenean gravida lorem purus, ut vestibulum elit venenatis sed. Praesent urna nunc, interdum eget dolor nec, rhoncus malesuada urna. Pellentesque sed sodales odio. Fusce elementum convallis suscipit.
Morbi porta euismod tellus, id tincidunt enim ultricies eget. Cras hendrerit elementum sapien, nec consequat lectus vulputate ac. Aenean eget porta justo. Quisque pharetra gravida nibh, id dictum lacus ultricies sit amet. Praesent tristique ut est non efficitur. Morbi viverra molestie lacus, quis tincidunt lorem posuere eu. Donec hendrerit lectus id porta tempor. Praesent vehicula metus sit amet tortor posuere, quis rutrum justo malesuada. In nec justo id sem pharetra tempus vel ut tellus. Donec felis massa, tempor ut risus in, semper rhoncus lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Donec consectetur est condimentum quam vehicula laoreet. Donec ac augue odio. Duis non lorem et enim fringilla lobortis. Duis fringilla vel eros ut malesuada. Aliquam dui est, malesuada nec velit ac, luctus iaculis velit. Suspendisse maximus dui ac libero sodales aliquet. Vivamus vitae commodo dolor. Cras posuere nibh nulla, vel sollicitudin tortor aliquet et. Nunc vel placerat orci. Suspendisse ultrices mollis mi eu varius. Phasellus et malesuada ipsum, vitae egestas libero.
Morbi cursus faucibus accumsan. Proin pellentesque orci justo, vitae porttitor quam aliquam in. Mauris porta felis leo, suscipit condimentum quam pellentesque a. Nullam euismod eros et molestie ornare. Quisque a diam euismod, pretium mi quis, pretium elit. Etiam porta venenatis euismod. Vestibulum non nibh magna. Morbi accumsan ipsum nec massa mollis tempus. Phasellus ullamcorper dapibus felis quis auctor. Phasellus sit amet blandit sapien.
Cras sit amet bibendum purus. Proin pellentesque facilisis blandit. Suspendisse egestas pharetra eros sed egestas. Duis consequat posuere ipsum id tempus. Donec aliquam ipsum dolor, vel luctus justo elementum quis. Cras posuere, lacus sit amet euismod ultricies, ante orci commodo mauris, at dignissim neque mi elementum odio. In luctus dictum est, a feugiat libero elementum nec. Vestibulum pretium sagittis nulla a volutpat. Donec sem magna, volutpat tempor mauris id, laoreet elementum dui. Nullam elementum ex in mauris vehicula malesuada. Donec porta tristique nibh id sodales. Nullam a augue ac nulla molestie sodales.
</div>
<div class="col-md-8 my-custom-class-2">
Column B
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta tellus at augue congue consequat. Quisque in tristique nisi. Integer molestie odio at nisi auctor pharetra. Aliquam convallis sit amet sapien id pellentesque. Nam in dapibus mauris. Proin vitae ante sit amet tellus maximus sodales. Cras erat urna, commodo egestas nisi a, tincidunt interdum orci. Morbi scelerisque suscipit nunc. Cras laoreet lacus et velit egestas imperdiet. Quisque vehicula, nulla id ornare gravida, libero metus vehicula ante, nec ultrices orci dui non leo. Cras efficitur ac neque ut convallis. Aenean gravida lorem purus, ut vestibulum elit venenatis sed. Praesent urna nunc, interdum eget dolor nec, rhoncus malesuada urna. Pellentesque sed sodales odio. Fusce elementum convallis suscipit.
Morbi porta euismod tellus, id tincidunt enim ultricies eget. Cras hendrerit elementum sapien, nec consequat lectus vulputate ac. Aenean eget porta justo. Quisque pharetra gravida nibh, id dictum lacus ultricies sit amet. Praesent tristique ut est non efficitur. Morbi viverra molestie lacus, quis tincidunt lorem posuere eu. Donec hendrerit lectus id porta tempor. Praesent vehicula metus sit amet tortor posuere, quis rutrum justo malesuada. In nec justo id sem pharetra tempus vel ut tellus. Donec felis massa, tempor ut risus in, semper rhoncus lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Donec consectetur est condimentum quam vehicula laoreet. Donec ac augue odio. Duis non lorem et enim fringilla lobortis. Duis fringilla vel eros ut malesuada. Aliquam dui est, malesuada nec velit ac, luctus iaculis velit. Suspendisse maximus dui ac libero sodales aliquet. Vivamus vitae commodo dolor. Cras posuere nibh nulla, vel sollicitudin tortor aliquet et. Nunc vel placerat orci. Suspendisse ultrices mollis mi eu varius. Phasellus et malesuada ipsum, vitae egestas libero.
Morbi cursus faucibus accumsan. Proin pellentesque orci justo, vitae porttitor quam aliquam in. Mauris porta felis leo, suscipit condimentum quam pellentesque a. Nullam euismod eros et molestie ornare. Quisque a diam euismod, pretium mi quis, pretium elit. Etiam porta venenatis euismod. Vestibulum non nibh magna. Morbi accumsan ipsum nec massa mollis tempus. Phasellus ullamcorper dapibus felis quis auctor. Phasellus sit amet blandit sapien.
Cras sit amet bibendum purus. Proin pellentesque facilisis blandit. Suspendisse egestas pharetra eros sed egestas. Duis consequat posuere ipsum id tempus. Donec aliquam ipsum dolor, vel luctus justo elementum quis. Cras posuere, lacus sit amet euismod ultricies, ante orci commodo mauris, at dignissim neque mi elementum odio. In luctus dictum est, a feugiat libero elementum nec. Vestibulum pretium sagittis nulla a volutpat. Donec sem magna, volutpat tempor mauris id, laoreet elementum dui. Nullam elementum ex in mauris vehicula malesuada. Donec porta tristique nibh id sodales. Nullam a augue ac nulla molestie sodales.
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-12 custom-footer">
FOOTER
</div>
</div>
CSS：
/*======================================
//--//--> STYLES CUSTOM
======================================*/
/* write your custom CSS here. */
.my-custom-class{
background-color: blue;
height: 75vh;
color: white;
overflow: auto;
}
.my-custom-class-2{
background-color: red;
height: 75vh;
color: white;
overflow: auto;
}
#mainNav{
background-color: purple !important;
color: white;
height: 10vh;
}
.custom-footer{
background-color: green;
height: 15vh;
color: white;
text-align: center;
}
.my-custom-class{
background-color: blue;
height: 75vh;
color: white;
overflow: auto;
}
.my-custom-class-2{
background-color: red;
height: 75vh;
color: white;
overflow: auto;
}
#mainNav{
background-color: purple !important;
color: white;
height: 10vh;
padding-bottom: 8%;
}
.custom-footer{
background-color: green;
height: 15vh;
color: white;
text-align: center;
padding: 5%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar" id="mainNav">
<div class="container">
NAV
</div>
</nav>
<div class="wrapper">
<div class="row no-gutters">
<div class="col-4 my-custom-class">
Column A
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta tellus at augue congue consequat. Quisque in tristique nisi. Integer molestie odio at nisi auctor pharetra. Aliquam convallis sit amet sapien id pellentesque. Nam in dapibus mauris. Proin vitae ante sit amet tellus maximus sodales. Cras erat urna, commodo egestas nisi a, tincidunt interdum orci. Morbi scelerisque suscipit nunc. Cras laoreet lacus et velit egestas imperdiet. Quisque vehicula, nulla id ornare gravida, libero metus vehicula ante, nec ultrices orci dui non leo. Cras efficitur ac neque ut convallis. Aenean gravida lorem purus, ut vestibulum elit venenatis sed. Praesent urna nunc, interdum eget dolor nec, rhoncus malesuada urna. Pellentesque sed sodales odio. Fusce elementum convallis suscipit.
Morbi porta euismod tellus, id tincidunt enim ultricies eget. Cras hendrerit elementum sapien, nec consequat lectus vulputate ac. Aenean eget porta justo. Quisque pharetra gravida nibh, id dictum lacus ultricies sit amet. Praesent tristique ut est non efficitur. Morbi viverra molestie lacus, quis tincidunt lorem posuere eu. Donec hendrerit lectus id porta tempor. Praesent vehicula metus sit amet tortor posuere, quis rutrum justo malesuada. In nec justo id sem pharetra tempus vel ut tellus. Donec felis massa, tempor ut risus in, semper rhoncus lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Donec consectetur est condimentum quam vehicula laoreet. Donec ac augue odio. Duis non lorem et enim fringilla lobortis. Duis fringilla vel eros ut malesuada. Aliquam dui est, malesuada nec velit ac, luctus iaculis velit. Suspendisse maximus dui ac libero sodales aliquet. Vivamus vitae commodo dolor. Cras posuere nibh nulla, vel sollicitudin tortor aliquet et. Nunc vel placerat orci. Suspendisse ultrices mollis mi eu varius. Phasellus et malesuada ipsum, vitae egestas libero.
Morbi cursus faucibus accumsan. Proin pellentesque orci justo, vitae porttitor quam aliquam in. Mauris porta felis leo, suscipit condimentum quam pellentesque a. Nullam euismod eros et molestie ornare. Quisque a diam euismod, pretium mi quis, pretium elit. Etiam porta venenatis euismod. Vestibulum non nibh magna. Morbi accumsan ipsum nec massa mollis tempus. Phasellus ullamcorper dapibus felis quis auctor. Phasellus sit amet blandit sapien.
Cras sit amet bibendum purus. Proin pellentesque facilisis blandit. Suspendisse egestas pharetra eros sed egestas. Duis consequat posuere ipsum id tempus. Donec aliquam ipsum dolor, vel luctus justo elementum quis. Cras posuere, lacus sit amet euismod ultricies, ante orci commodo mauris, at dignissim neque mi elementum odio. In luctus dictum est, a feugiat libero elementum nec. Vestibulum pretium sagittis nulla a volutpat. Donec sem magna, volutpat tempor mauris id, laoreet elementum dui. Nullam elementum ex in mauris vehicula malesuada. Donec porta tristique nibh id sodales. Nullam a augue ac nulla molestie sodales.
</div>
<div class="col-8 my-custom-class-2">
Column B
<br /><br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta tellus at augue congue consequat. Quisque in tristique nisi. Integer molestie odio at nisi auctor pharetra. Aliquam convallis sit amet sapien id pellentesque. Nam in dapibus mauris. Proin vitae ante sit amet tellus maximus sodales. Cras erat urna, commodo egestas nisi a, tincidunt interdum orci. Morbi scelerisque suscipit nunc. Cras laoreet lacus et velit egestas imperdiet. Quisque vehicula, nulla id ornare gravida, libero metus vehicula ante, nec ultrices orci dui non leo. Cras efficitur ac neque ut convallis. Aenean gravida lorem purus, ut vestibulum elit venenatis sed. Praesent urna nunc, interdum eget dolor nec, rhoncus malesuada urna. Pellentesque sed sodales odio. Fusce elementum convallis suscipit.
Morbi porta euismod tellus, id tincidunt enim ultricies eget. Cras hendrerit elementum sapien, nec consequat lectus vulputate ac. Aenean eget porta justo. Quisque pharetra gravida nibh, id dictum lacus ultricies sit amet. Praesent tristique ut est non efficitur. Morbi viverra molestie lacus, quis tincidunt lorem posuere eu. Donec hendrerit lectus id porta tempor. Praesent vehicula metus sit amet tortor posuere, quis rutrum justo malesuada. In nec justo id sem pharetra tempus vel ut tellus. Donec felis massa, tempor ut risus in, semper rhoncus lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Donec consectetur est condimentum quam vehicula laoreet. Donec ac augue odio. Duis non lorem et enim fringilla lobortis. Duis fringilla vel eros ut malesuada. Aliquam dui est, malesuada nec velit ac, luctus iaculis velit. Suspendisse maximus dui ac libero sodales aliquet. Vivamus vitae commodo dolor. Cras posuere nibh nulla, vel sollicitudin tortor aliquet et. Nunc vel placerat orci. Suspendisse ultrices mollis mi eu varius. Phasellus et malesuada ipsum, vitae egestas libero.
Morbi cursus faucibus accumsan. Proin pellentesque orci justo, vitae porttitor quam aliquam in. Mauris porta felis leo, suscipit condimentum quam pellentesque a. Nullam euismod eros et molestie ornare. Quisque a diam euismod, pretium mi quis, pretium elit. Etiam porta venenatis euismod. Vestibulum non nibh magna. Morbi accumsan ipsum nec massa mollis tempus. Phasellus ullamcorper dapibus felis quis auctor. Phasellus sit amet blandit sapien.
Cras sit amet bibendum purus. Proin pellentesque facilisis blandit. Suspendisse egestas pharetra eros sed egestas. Duis consequat posuere ipsum id tempus. Donec aliquam ipsum dolor, vel luctus justo elementum quis. Cras posuere, lacus sit amet euismod ultricies, ante orci commodo mauris, at dignissim neque mi elementum odio. In luctus dictum est, a feugiat libero elementum nec. Vestibulum pretium sagittis nulla a volutpat. Donec sem magna, volutpat tempor mauris id, laoreet elementum dui. Nullam elementum ex in mauris vehicula malesuada. Donec porta tristique nibh id sodales. Nullam a augue ac nulla molestie sodales.
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-12 custom-footer">
FOOTER
</div>
</div>