我刚开始学习Bootstrap与HTML和CSS。与引导网格系统，我创建了3部分，如这一点。一切都很好，只要你使用>=中屏幕。当使用一个小屏幕(或者你只是放大)，内容更大，高度更长时，就会出现这个问题。页脚像这样在屏幕中间结束。
我试着:
- 设置体高100%
- 明确
- 人事部经理:绝对;底部:0
我认为原因来自于菜单中的div。放大时，内容拉伸，但页脚不识别它
@import url('https://fonts.googleapis.com/css2?family=Warnes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500;700&display=swap');
html,body{
height: 100%;
width: 100%;
}
body{
margin: 0;
background-image: url(/images/nick-karvounis-Ciqxn7FE4vE-unsplash.jpg);
background-repeat: repeat-y;
background-size: cover;
height: 100%;
display: flex;
flex-direction: column;
padding-bottom: 1.5rem;
}
/* Navbar Start */
#brandName{
font-family: 'Warnes', cursive;
color: #FF511C;
font-size: 2rem;
padding: 0.2rem 0.3rem 0.2rem 0.5rem;
margin-bottom: 0;
}
#header-navbar{
background-color: #414141;
}
.nav-link{
font-family: 'Work Sans';
text-decoration: none;
text-transform: uppercase;
color: white;
margin-left: 0.7rem;
font-size: 1.2rem;
margin-bottom: 0;
text-align: center;
}
.navbar-toggler:focus{
box-shadow:none !important;
}
.nav-link:hover{
color:lightcoral !important;
}
.navbar-toggler-icon{
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 162, 134, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
button.navbar-toggler{
border: 2px solid #FFA286 !important;
color:rgba(243, 199, 199, 0.52) !important;
border-radius: 27px;
}
button.navbar-toggler:hover{
background-color: rgba(235, 193, 193, 0.52) !important;
}
@media (max-width: 767.98px) {
.nav-item{
background-color: rgb(94, 94, 94);
border:#212529 2px solid;}
}
/* Navbar End */
/* Body Start */
#headerMenu{
font-family: 'Work Sans';
text-transform: uppercase;
font-weight: 700 !important;
font-size: 4rem !important;
color: white;
border: 1px solid #000000;
text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.52);
border:none;
margin-top: 7rem;
}
#bgimg{
background: linear-gradient(0deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34)), url(nick-karvounis-Ciqxn7FE4vE-unsplash.jpg);
filter: blur(1px);
object-fit: cover;
width: 100%;
height: 100%;
margin: 0 auto;
position: absolute;
}
.box{
background: #414141;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
color:white;
cursor: pointer;
}
.box:hover .menuhead{
color: lightcoral;
}
.contentMenu{
text-indent: 1.8rem;
}
/* Body End */
/* Footer start */
.footer_container{
margin-top: auto;
background-color:#212529;
color:white;
width: 100%;
height: 100%;
border: none;
}
.footer_main{
position: relative;
bottom: 0;
height:4rem;
}
/* Footer end */<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap style -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<!-- Font install -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<title>Restaurant</title>
</head>
<body>
<!-- NAVBAR START -->
<nav class="navbar fixed-top navbar-default navbar-expand-md justify-content-center align-items-center navbar-dark bg-dark p" id="header-navbar">
<div class="container-fluid">
<!-- brand navbar -->
<div class="navbar-brand d-flex me-lg-auto">
<p id="brandName">Food, LLC</p>
</div>
<!-- toogle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navlinks -->
<div class="collapse navbar-collapse" id="mainNav">
<ul id="nav-list" class="nav navbar-nav ms-auto my-md-0 my-2">
<li class="nav-item">
<a class="nav-link" href="#beefMenu">Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#chickenMenu">Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sushiMenu">Sushi</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR END -->
<!-- OUR MENU Start -->
<div class="container w-100 h-100">
<p class="display-1 text-uppercase text-center " id="headerMenu">our menu</p>
<div class="row">
<!-- <div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead ">BEEF</h1>
<p class="px-1 pb-2 contentMenu" id="beefMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div>
<div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead">Chicken</h1>
<p class="px-1 pb-2 contentMenu" id="chickenMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div>
<div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead">sushi</h1>
<p class="px-1 pb-2 contentMenu" id="sushiMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div> -->
<div class="col-md-4 col-sm-6 col-12 ">
<div class="box"> <section>
<h1 class="text-center text-uppercase text-white pt-4 " >Beef</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section></div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="box">
<section>
<h1 class="text-center text-uppercase text-white pt-4" >Chicken</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section>
</div>
</div>
<div class="col-md-4 col-sm-12 col-12">
<div class="box">
<section>
<h1 class="text-center text-uppercase text-white pt-4">sushi</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section>
</div>
</div>
</div>
</div>
<!-- OUR MENU End -->
<!-- FOOTER Start -->
<footer class="bg-dark text-center text-lg-start footer_main">
<!-- Copyright -->
<div class="text-center text-white p-3">
Image Credit: Nick Karvounis
</div>
<!-- Copyright -->
</footer>
<!-- FOOTER End -->
<!-- Js install -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>给你…
1。因此，你的主要内容将停止重叠页脚。
那么，把这个改成…
<div class="container w-100 h-100">...</div>
…。
<div>
<div class="container w-100 h-100"></div>
</div>
2。修改container的高度这将把页脚放到页面的底部。
所以，把它添加到你的CSS代码中。
.container {
height: auto !important;
}
3。你可以删除一些东西。
你可以从你的HTML中删除footer_main类，因为它是不必要的。
你可以删除你的CSS的这一部分，因为它是不必要的:
.footer_container{
margin-top: auto;
background-color:#212529;
color:white;
width: 100%;
height: 100%;
border: none;
}
.footer_main{
position: relative;
bottom: 0;
height:4rem;
}
见下面的代码片段。
@import url('https://fonts.googleapis.com/css2?family=Warnes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500;700&display=swap');
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
background-image: url(/images/nick-karvounis-Ciqxn7FE4vE-unsplash.jpg);
background-repeat: repeat-y;
background-size: cover;
height: 100%;
display: flex;
flex-direction: column;
padding-bottom: 1.5rem;
}
/* Navbar Start */
#brandName {
font-family: 'Warnes', cursive;
color: #FF511C;
font-size: 2rem;
padding: 0.2rem 0.3rem 0.2rem 0.5rem;
margin-bottom: 0;
}
#header-navbar {
background-color: #414141;
}
.nav-link {
font-family: 'Work Sans';
text-decoration: none;
text-transform: uppercase;
color: white;
margin-left: 0.7rem;
font-size: 1.2rem;
margin-bottom: 0;
text-align: center;
}
.navbar-toggler:focus {
box-shadow: none !important;
}
.nav-link:hover {
color: lightcoral !important;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 162, 134, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'") !important;
}
button.navbar-toggler {
border: 2px solid #FFA286 !important;
color: rgba(243, 199, 199, 0.52) !important;
border-radius: 27px;
}
button.navbar-toggler:hover {
background-color: rgba(235, 193, 193, 0.52) !important;
}
@media (max-width: 767.98px) {
.nav-item {
background-color: rgb(94, 94, 94);
border: #212529 2px solid;
}
}
/* Navbar End */
/* Body Start */
#headerMenu {
font-family: 'Work Sans';
text-transform: uppercase;
font-weight: 700 !important;
font-size: 4rem !important;
color: white;
border: 1px solid #000000;
text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.52);
border: none;
margin-top: 7rem;
}
#bgimg {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34)), url(nick-karvounis-Ciqxn7FE4vE-unsplash.jpg);
filter: blur(1px);
object-fit: cover;
width: 100%;
height: 100%;
margin: 0 auto;
position: absolute;
}
.box {
background: #414141;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
color: white;
cursor: pointer;
}
.box:hover .menuhead {
color: lightcoral;
}
.contentMenu {
text-indent: 1.8rem;
}
/* Add this. */
.container {
height: auto !important;
}<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap style -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<!-- Font install -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<title>Restaurant</title>
</head>
<body>
<!-- NAVBAR START -->
<nav class="navbar fixed-top navbar-default navbar-expand-md justify-content-center align-items-center navbar-dark bg-dark p" id="header-navbar">
<div class="container-fluid">
<!-- brand navbar -->
<div class="navbar-brand d-flex me-lg-auto">
<p id="brandName">Food, LLC</p>
</div>
<!-- toogle button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<!-- navlinks -->
<div class="collapse navbar-collapse" id="mainNav">
<ul id="nav-list" class="nav navbar-nav ms-auto my-md-0 my-2">
<li class="nav-item">
<a class="nav-link" href="#beefMenu">Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#chickenMenu">Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sushiMenu">Sushi</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR END -->
<!-- OUR MENU Start -->
<div>
<div class="container w-100 h-100">
<p class="display-1 text-uppercase text-center " id="headerMenu">our menu</p>
<div class="row">
<!-- <div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead ">BEEF</h1>
<p class="px-1 pb-2 contentMenu" id="beefMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div>
<div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead">Chicken</h1>
<p class="px-1 pb-2 contentMenu" id="chickenMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div>
<div class="col col-md-4 box">
<h1 class="text-center text-uppercase py-2 menuhead">sushi</h1>
<p class="px-1 pb-2 contentMenu" id="sushiMenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent. Sagittis orci a scelerisque purus semper eget duis at.</p>
</div> -->
<div class="col-md-4 col-sm-6 col-12 ">
<div class="box">
<section>
<h1 class="text-center text-uppercase text-white pt-4 ">Beef</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi
tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed
viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi
cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section>
</div>
</div>
<div class="col-md-4 col-sm-6 col-12">
<div class="box">
<section>
<h1 class="text-center text-uppercase text-white pt-4">Chicken</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi
tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed
viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi
cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section>
</div>
</div>
<div class="col-md-4 col-sm-12 col-12">
<div class="box">
<section>
<h1 class="text-center text-uppercase text-white pt-4">sushi</h1>
<p class="text-white px-4 pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sit amet nulla facilisi morbi
tempus iaculis. Bibendum at varius vel pharetra vel. Tempor orci eu lobortis elementum nibh. Mi in nulla posuere sollicitudin. Nec ullamcorper sit amet risus. Tempor nec feugiat nisl pretium fusce id velit. Suspendisse sed nisi lacus sed
viverra tellus. Interdum velit laoreet id donec ultrices. Mi proin sed libero enim. Lacus viverra vitae congue eu consequat ac felis donec. Bibendum ut tristique et egestas quis ipsum. Pellentesque eu tincidunt tortor aliquam nulla facilisi
cras fermentum odio. Egestas integer eget aliquet nibh praesent.</p>
</section>
</div>
</div>
</div>
</div>
</div>
<!-- OUR MENU End -->
<!-- FOOTER Start -->
<footer class="bg-dark text-center text-lg-start">
<!-- Copyright -->
<div class="text-center text-white p-3">
Image Credit: Nick Karvounis
</div>
<!-- Copyright -->
</footer>
<!-- FOOTER End -->
<!-- Js install -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>