I have a basic bootstrap 4, flex page which its navigation and footer should be sticky but its not and I cant figure out why:
<!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">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
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);
}
</style>
</head>
<body class="d-flex flex-column">
<header>
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<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>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- 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/popper.js#1.16.0/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 class="d-flex flex-column">
</html>
I was on the impression that .sticky-top class would sort out the situation for the top menu but cant figure out exactly what is causing this issue. How can I make sure that in below simple page both top menu bar and footer are sticky?
For the sticky header, you add the class to header instead of nav as below:
<!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">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
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);
}
</style>
</head>
<body class="d-flex flex-column">
<header class="sticky-top ">
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<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>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- 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/popper.js#1.16.0/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 class="d-flex flex-column">
</html>
There is no sticky-bottom class but there are some tutorials to set a sticky footer, like this
Another option can be just add position: sticky; bottom: 0 to <footer> tag
<!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">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
#sticky-footer {
position: sticky;
bottom: 0;
}
</style>
</head>
<body class="d-flex flex-column">
<header class="sticky-top">
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<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>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- 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/popper.js#1.16.0/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 class="d-flex flex-column">
</html>
Related
I have a page in Bootstrap 4. When I added the footer a vertical scrollbar is coming. I don't want the vertical scrollbar. I want the whole page including the footer to adjust within the viewport height. How can I achieve this. Here is the jsfiddle.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Demo</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="my-1 mx-2 close">X</span>
<span class="navbar-toggler-icon">☰</span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Menu 1
</li>
<li class="nav-item">
Menu 2
</li>
<li class="nav-item">
Menu 3
</li>
<li class="nav-item admin">
Menu 4
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet orci quis erat imperdiet condimentum vel eu sapien. Morbi convallis sapien et molestie finibus. Fusce eleifend vitae orci eget porta. Etiam malesuada facilisis iaculis. Ut tempus, sem quis tincidunt condimentum, risus ligula vestibulum mi, sit amet imperdiet mauris ex id augue. Sed sed dictum velit. Etiam varius elit et odio vulputate, sit amet interdum tellus sagittis. Morbi vulputate leo a dolor consequat tempor. Nam sed auctor nisi. In luctus eleifend laoreet. Morbi id nisl non ex fringilla tincidunt. Suspendisse eget venenatis tortor.
Proin eu consectetur magna. Aliquam erat volutpat. Aenean vehicula imperdiet aliquam. Nam a sem vel est tristique laoreet. Aenean nisl dolor, tempor in iaculis ac, efficitur at lorem. Proin scelerisque ipsum ut sapien luctus, id viverra tellus ornare. Cras lorem tortor, ultricies hendrerit vulputate quis, tincidunt in ipsum. Nam nec dolor dolor. Donec quis felis laoreet, feugiat purus et, imperdiet tortor. Cras non pulvinar leo, nec lobortis mi. Phasellus pellentesque placerat auctor. Suspendisse a urna vel ipsum faucibus hendrerit eget sit amet leo. Etiam consequat ex eget pulvinar pharetra. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam aliquam, tellus nec consequat faucibus, dui felis condimentum nulla, quis elementum massa turpis et felis.
</div>
<div class="footer">
Ⓒ 2021 All rights reserved T
</div>
</body>
</html>
I gave the height in percentage and was able to solve the problem.
.container-fluid{
height: 93%;
}
.footer{
height: 7%;
}
I am practice making a mobile website with ReactJS and Bootstrap 4 and need to create a Navbar as below.
Normal
Normal Menu:
Collapse
Collapse Menu:
So far I was able to figure out how to exclude items from the collapse menu by putting them in another div in the NavBar outside the collapse one, but the output still did not match my desire look. Also, when the NavBar in collapse mode expand, it push my content below it down, which is not what I need. I have a logo above the NavBar so I cannot use fixed-top. Here is what I have so far:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<img id="logo-main" src="https://media.istockphoto.com/vectors/cyclist-design-bicycle-line-art-vector-design-bike-cyclist-design-vector-id1133978305?b=1&k=6&m=1133978305&s=170667a&w=0&h=XL6qa5ZNvRaT6OP4SS8ZG60O5TwfWZnIczIrHfgIJ7M=" width="100" alt="Logo Thing main logo">
<nav class="navbar navbar-dark navbar-expand-lg navbar-template">
<div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto bg-dark">
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#">Account</a></li>
<li class="nav-item"><a class="nav-link" href="#">Send</a></li>
<li class="nav-item"><a class="nav-link" href="#">Transaction History</a></li>
<li class="dropdown-divider"></li>
<li class="nav-item"><a class="nav-link" href="#">Logout</a></li>
</ul>
</div>
<div class="d-flex flex-row order-2 order-lg-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav flex-row">
<li class="nav-item"><a class="nav-link px-2 name" href="#"><h4>Mr.ABC</h4></a></li>
<li class="nav-item ml-auto"><img class="nav-link px-2" src="https://media.istockphoto.com/vectors/cycling-line-icon-vector-id1030341646?b=1&k=6&m=1030341646&s=170667a&w=0&h=0f5Rn6rhIduqX47fTg168axHZK7MlhbiRBt7s_AsOZc="/></li>
</ul>
</div>
</nav>
<div class="container"></div>
Is there anyway to achieve the NavBar that I need? More specifically, exclude some item from the collapse menu, change some item position when the NavBar turn into collapse, and stop it from pushing the content below down?
So you need to play with media query a little to hide some element and show other.
1st thing I made is to igve your main logo is own container to fix
it on the top.
2nd was to take the collopase button out from the div you added.
3rd I added to 2 div after main menu to show elements when screen
under 992px.
4th I added My name to your main menu to and play again with display
to show it.
You will obviously need to change all class to className to make it work correctly.
Hope it is coming quite close to the question
.container-logo{
width:100%;
display:flex;
justify-content: center;
}
#navbarNavDropdown{
position: absolute;
top: 116px;
}
ul.navbar-nav{
padding: 0 15px;
}
#media (min-width: 992px){
#navbarNavDropdown{
position: relative;
top: 0;
}
ul.navbar-nav{
padding: 0;
}
.d-lg-list-item {
display: list-item!important;
}
}
.logo-main{
width:100px;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-logo">
<img id="logo-main" src="https://media.istockphoto.com/vectors/cyclist-design-bicycle-line-art-vector-design-bike-cyclist-design-vector-id1133978305?b=1&k=6&m=1133978305&s=170667a&w=0&h=XL6qa5ZNvRaT6OP4SS8ZG60O5TwfWZnIczIrHfgIJ7M=" width="100" alt="Logo Thing main logo" />
</div>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg navbar-template">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto bg-dark list-unstyled">
<li class="nav-item"><a to="/main/menu" class="nav-link">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#">Account</a></li>
<li class="nav-item"><a class="nav-link" href="#">Send</a></li>
<li class="nav-item"><a class="nav-link" href="#">Transaction History</a></li>
<li class="dropdown-divider"></li>
<li style="display:none;" class="d-lg-list-item nav-item"><a class="nav-link" href="#">My Name</a></li>
<li style="display:none;" class="d-lg-list-item dropdown-divider"></li>
<li class="nav-item"><a class="nav-link" href="#">Logout</a></li>
</ul>
</div>
<div class="d-lg-none mx-auto"><a class="nav-link" href="#">My Name</a></div>
<div class="d-lg-none"><img class="logo-main" src="https://media.istockphoto.com/vectors/cycling-line-icon-vector-id1030341646?b=1&k=6&m=1030341646&s=170667a&w=0&h=0f5Rn6rhIduqX47fTg168axHZK7MlhbiRBt7s_AsOZc="/></div>
<!--<div class="flex-row order-2 order-lg-3">
<ul class="navbar-nav flex-row list-unstyled">
<li class="nav-item"><a class="nav-link px-2 name" href="#"><h4>Mr.ABC</h4></a></li>
</ul>
</div> -->
</nav>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget lacus vel justo porta ornare cursus finibus ligula. Quisque et neque cursus, finibus dui non, aliquam ex. Donec tincidunt interdum augue a scelerisque. Suspendisse congue semper odio. Vivamus in felis at lorem consectetur cursus. Fusce accumsan dignissim turpis, in ornare quam dictum ut. Aenean vel pretium risus. Ut ut tempus erat. Quisque eros risus, bibendum ac erat quis, semper hendrerit libero.
Aliquam et placerat augue. Ut sed ex arcu. Duis dapibus faucibus est posuere imperdiet. Sed et faucibus purus. Donec ex ex, facilisis id velit quis, congue eleifend nunc. Etiam sed leo orci. In molestie pharetra lacus, maximus dictum nunc iaculis nec. Aenean nisi ipsum, finibus nec ligula id, ultricies luctus orci. Quisque quis metus non nulla tincidunt tempor fringilla ac elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed facilisis, ligula id faucibus lacinia, metus tellus sagittis turpis, eget aliquet elit felis non risus. Nunc lacus dui, posuere non nisl a, eleifend facilisis ipsum. Fusce in leo nibh. Duis condimentum blandit lobortis. Fusce maximus risus eget urna sodales luctus.
Etiam rhoncus ornare dui, vel vehicula leo pellentesque sed. Curabitur in odio enim. Curabitur ut ullamcorper mi. Suspendisse condimentum sapien quis tortor auctor elementum. Donec ac euismod neque. Nunc eget sapien a purus viverra tincidunt. Mauris rhoncus arcu ut diam maximus malesuada. Mauris scelerisque mattis lectus sed venenatis. Ut viverra diam in eros lacinia, sit amet blandit nisl tempus. Aliquam condimentum magna et massa fringilla, nec facilisis odio fringilla. Etiam ultrices, mauris ut elementum sodales, sem justo ultricies orci, vitae fringilla dui magna ut sapien. Phasellus posuere lacus nec leo ornare rutrum.
Suspendisse neque lectus, fringilla quis dui in, feugiat scelerisque turpis. Aliquam porta turpis nulla, sit amet volutpat ex suscipit ac. Sed nec neque vel nibh porttitor laoreet. Quisque convallis dolor sem, non fermentum justo tincidunt sit amet. Aliquam vitae est elit. Cras eros felis, dignissim eget suscipit vel, facilisis et lorem. Morbi vitae tempus lorem. Aenean et ullamcorper orci. Nullam in finibus urna. Sed interdum vel libero at mattis. Nulla suscipit, massa in pharetra dapibus, massa metus mattis dui, quis efficitur quam est vitae arcu. Sed congue tristique suscipit. Praesent eget nibh volutpat, laoreet mi a, facilisis dui. Donec quis tellus et magna accumsan bibendum. Integer ullamcorper nibh non elit malesuada varius. Proin id laoreet mi.
Proin pharetra nibh non metus aliquam, tempus elementum felis ultricies. Mauris et enim nibh. Donec sit amet mi eu purus ultricies aliquam eget nec nibh. Cras velit nunc, viverra ut iaculis sit amet, molestie sed turpis. Etiam posuere quis enim ac ultrices. Quisque justo mi, vestibulum at enim at, suscipit pretium arcu. Aliquam vulputate ipsum mattis gravida laoreet. Nullam nulla ante, egestas viverra ligula nec, molestie luctus lorem. Phasellus convallis nulla et dignissim cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras bibendum condimentum nunc, ut maximus lectus blandit et. Curabitur elementum tellus risus, non semper odio hendrerit id. Mauris faucibus luctus suscipit. Nullam sed ultrices enim. Aenean facilisis risus id arcu consequat, a fringilla sapien elementum.
</div>
</body>
here is the problem
I have multiple divs that I want to be the height of the screen.
I achieved that but my problem now is that my div don't stop resizing even if my content is bigger than the div. The example speaks for itself
html,
body {
width: 100%;
height: 100%;
}
.orange {
color: #FF9800;
}
#media (max-width: 979px) {
.custom-container {
padding-top: 61px;
}
}
.custom-container {
display: flex;
min-height: 100%;
height: 100%;
border: 1px solid black;
padding-top: 61px;
}
.inner {
padding: 5%;
border: 1px solid white;
}
.container-fluid {
overflow: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a id="logo" class="nav-link col col-md-2 orange">Label</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="col col-md-8 navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#photos">Photos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid h-100">
<div class="h-100">
<div id="services" class="custom-container justify-content-md-center">
<div class="inner col-md-10 orange">
not out of bound 1
</div>
</div>
</div>
<div id="photos" class="h-100">
<div class="custom-container h-100 justify-content-md-center">
<div class="inner col-md-10 orange">
not out of bound 2
</div>
</div>
</div>
<div id="contact" class="h-100">
<div class="custom-container justify-content-md-center">
<div class="inner col-md-10">
<div class="row orange">
out of bound when screen size is small
</div>
<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis, mi ut pretium vestibulum, mauris leo euismod mi, et laoreet erat neque quis eros. Aenean id pellentesque erat. Pellentesque tempus purus magna, id interdum tellus egestas
a. Integer at scelerisque ipsum. Phasellus vel nibh non elit pharetra tincidunt. Nullam in pretium dui. Aliquam a consequat nulla, eu iaculis arcu. Cras posuere elit urna, sed dictum tortor laoreet ac. Donec quis massa ipsum. Fusce nec ultrices
tortor, eu congue mauris. Suspendisse hendrerit tempor scelerisque. Aliquam at urna quis diam rhoncus feugiat a non mauris. Sed eu finibus lectus, mollis posuere lacus. Cras ullamcorper auctor hendrerit. Proin euismod metus sit amet mauris placerat
euismod. Nullam venenatis sed mi at posuere. Phasellus felis quam, consectetur in vestibulum vel, posuere id dui. Pellentesque convallis viverra erat mattis vestibulum. Nam eros nulla, varius euismod lacus nec, vehicula dictum ipsum. Quisque
vel justo non elit sodales pulvinar. Donec accumsan nisi efficitur augue consequat, in efficitur mauris rhoncus. Curabitur venenatis metus lacus, ac vestibulum massa euismod vel. In non erat enim. Aenean varius pellentesque tellus eu molestie.
Sed at dolor justo. Integer interdum porttitor justo. Donec aliquet erat a consequat imperdiet. Phasellus tristique vel nunc eget consequat. Pellentesque posuere molestie placerat. Fusce egestas dignissim leo eu pellentesque. Vestibulum vehicula
tempus lectus et lobortis.
</div>
</div>
</div>
</div>
</div>
as you should see on small snippet's small window the text is out of bound so what I would like to achieve is a div of full height when content is smaller or equal to full height and if the content is larger than full height then my div should automatically get size of content.
Is this possible to do that? Is the overall way I'm doing this is correct?
html,
body {
width: 100%;
height: 100%;
}
.orange {
color: #FF9800;
}
#media (max-width: 979px) {
.custom-container {
padding-top: 61px;
}
}
.custom-container {
display: flex;
min-height: 100vh;
height: auto;
border: 1px solid black;
padding-top: 61px;
}
.inner {
padding: 5%;
border: 1px solid white;
}
.container-fluid {
overflow-y: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a id="logo" class="nav-link col col-md-2 orange">Label</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="col col-md-8 navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#photos">Photos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div id="services" class="custom-container justify-content-md-center">
<div class="inner col-md-10">
<div class="row"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis, mi ut pretium vestibulum, mauris leo euismod mi, et laoreet erat neque quis eros. Aenean id pellentesque erat. Pellentesque tempus purus magna, id interdum tellus egestas
a. Integer at scelerisque ipsum. Phasellus vel nibh non elit pharetra tincidunt. Nullam in pretium dui. Aliquam a consequat nulla, eu iaculis arcu. Cras posuere elit urna, sed dictum tortor laoreet ac. Donec quis massa ipsum. Fusce nec ultrices
tortor, eu congue mauris. Suspendisse hendrerit tempor scelerisque. Aliquam at urna quis diam rhoncus feugiat a non mauris. Sed eu finibus lectus, mollis posuere lacus. Cras ullamcorper auctor hendrerit. Proin euismod metus sit amet mauris placerat
euismod. Nullam venenatis sed mi at posuere. Phasellus felis quam, consectetur in vestibulum vel, posuere id dui. Pellentesque convallis viverra erat mattis vestibulum. Nam eros nulla, varius euismod lacus nec, vehicula dictum ipsum. Quisque
vel justo non elit sodales pulvinar. Donec accumsan nisi efficitur augue consequat, in efficitur mauris rhoncus. Curabitur venenatis metus lacus, ac vestibulum massa euismod vel. In non erat enim. Aenean varius pellentesque tellus eu molestie.
Sed at dolor justo. Integer interdum porttitor justo. Donec aliquet erat a consequat imperdiet. Phasellus tristique vel nunc eget consequat. Pellentesque posuere molestie placerat. Fusce egestas dignissim leo eu pellentesque. Vestibulum vehicula
tempus lectus et lobortis.
</div>
</div>
</div>
<div id="photos">
<div class="custom-container justify-content-md-center">
<div class="inner col-md-10 orange">
not out of bound 2
</div>
</div>
</div>
<div id="contact">
<div class="custom-container justify-content-md-center">
<div class="inner col-md-10">
<div class="row orange">
out of bound when screen size is small
</div>
<div class="row"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis, mi ut pretium vestibulum, mauris leo euismod mi, et laoreet erat neque quis eros. Aenean id pellentesque erat. Pellentesque tempus purus magna, id interdum tellus egestas
a. Integer at scelerisque ipsum. Phasellus vel nibh non elit pharetra tincidunt. Nullam in pretium dui. Aliquam a consequat nulla, eu iaculis arcu. Cras posuere elit urna, sed dictum tortor laoreet ac. Donec quis massa ipsum. Fusce nec ultrices
tortor, eu congue mauris. Suspendisse hendrerit tempor scelerisque. Aliquam at urna quis diam rhoncus feugiat a non mauris. Sed eu finibus lectus, mollis posuere lacus. Cras ullamcorper auctor hendrerit. Proin euismod metus sit amet mauris placerat
euismod. Nullam venenatis sed mi at posuere. Phasellus felis quam, consectetur in vestibulum vel, posuere id dui. Pellentesque convallis viverra erat mattis vestibulum. Nam eros nulla, varius euismod lacus nec, vehicula dictum ipsum. Quisque
vel justo non elit sodales pulvinar. Donec accumsan nisi efficitur augue consequat, in efficitur mauris rhoncus. Curabitur venenatis metus lacus, ac vestibulum massa euismod vel. In non erat enim. Aenean varius pellentesque tellus eu molestie.
Sed at dolor justo. Integer interdum porttitor justo. Donec aliquet erat a consequat imperdiet. Phasellus tristique vel nunc eget consequat. Pellentesque posuere molestie placerat. Fusce egestas dignissim leo eu pellentesque. Vestibulum vehicula
tempus lectus et lobortis.
</div>
</div>
</div>
</div>
I have changed the code, so that the div gets the height of the content, if it is larger than the screen height. Just change the height declaration of .custom-container to "auto" instead of "100%" and the min-height decaration to "100vh". You can remove the other h-100 classes in your code then.
Even though a div is a block element, its height is always the height of its content. If you want to have a full screen height (which means viewport height), you have to change 100% to 100vh (vh = viewport height).
Depending on your desired outcome you could do:
.custom-container {
display: flex;
min-height: 100%;
height: 100%;
border: 1px solid black;
padding-top: 61px;
/// Add Overflow control
overflow-y: scroll;
}
My bootstrap 4 footer rises up on pages where the body has less content.
Below is an image of the problem.
footerproblem
footer {
background-color: white;
color: #d5d5d5;
padding-top: 1rem;
}
footer a {
color: #d5d5d5;
}
hr.light-100 {
border-top: 1px solid #d5d5d5;
width: 100%;
margin-top: .8rem;
margin-bottom: 1rem;
color: black;
}
<footer>
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-6">
<p class="marker">blah blah blah.
<a class="btn btn-social-icon btn-instagram">
<span class="fa fa-instagram"></span>
</a>
</div>
<div class="col-md-6">
<p class="marker">more blah blah.
<a class="btn btn-social-icon btn-facebook">
<span class="fa fa-facebook"></span>
</a>
</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>© app.com</h5>
</div>
</div>
</div>
If there is anything else I have forgot to attach please let me know and I will edit the post.
I have played around with footer: sticky; / fixed; but that does not solve the problem.
The footer is also too tall but whenever I have added in a height css variable, the height is reduced however the text stays in place.
funkyheight
Thank you very much for your help.
The proper way to fix this problem is to layout your page as follows:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
with the following CSS:
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
}
header, footer {
flex-grow: 0;
}
main {
flex-grow: 1;
}
This works with or without Bootstrap, but if you're not using Bootstrap you probably also want
* { box-sizing: border-box; }
(which is already included in Bootstrap).
Here's an example, using Bootstrap v4:
body {
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
}
header, footer {
flex-grow: 0;
}
main {
flex-grow: 1;
}
footer {
background-color: #eee;
}
<!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.2.1/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<main role="main">
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam ut porttitor leo a. Metus dictum at tempor commodo. Feugiat vivamus at augue eget arcu dictum. Amet consectetur adipiscing elit duis tristique sollicitudin nibh. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Elementum eu facilisis sed odio morbi quis commodo odio. Tempus egestas sed sed risus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Eu ultrices vitae auctor eu augue ut. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. In pellentesque massa placerat duis. Bibendum enim facilisis gravida neque convallis.
<p>Nisi vitae suscipit tellus mauris a. Non blandit massa enim nec dui nunc. Hac habitasse platea dictumst vestibulum rhoncus. Vitae congue mauris rhoncus aenean vel. In fermentum et sollicitudin ac orci phasellus egestas. Turpis cursus in hac habitasse platea dictumst quisque sagittis purus. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc mattis enim ut tellus. Ultrices dui sapien eget mi proin sed libero. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Sodales ut eu sem integer vitae justo eget magna. Pellentesque id nibh tortor id aliquet. Sed pulvinar proin gravida hendrerit lectus a.
<p>Sed velit dignissim sodales ut eu sem integer. Senectus et netus et malesuada fames ac. Arcu non sodales neque sodales ut etiam sit amet nisl. Velit scelerisque in dictum non. Integer eget aliquet nibh praesent tristique. Dictumst quisque sagittis purus sit. Quam elementum pulvinar etiam non quam lacus. Ipsum dolor sit amet consectetur adipiscing elit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Velit egestas dui id ornare arcu odio ut sem. Nec dui nunc mattis enim ut tellus elementum sagittis. Nulla facilisi cras fermentum odio. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Magna eget est lorem ipsum. Vitae tortor condimentum lacinia quis vel eros donec ac. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu. Mollis nunc sed id semper risus in. Id nibh tortor id aliquet lectus proin. Netus et malesuada fames ac.
</div>
<div class="col">
<p>Mi ipsum faucibus vitae aliquet nec. Diam vel quam elementum pulvinar etiam non. Sit amet risus nullam eget felis eget nunc lobortis mattis. Integer malesuada nunc vel risus commodo. Ut faucibus pulvinar elementum integer enim neque. Id interdum velit laoreet id donec ultrices tincidunt. Sodales ut etiam sit amet nisl purus in. Et sollicitudin ac orci phasellus egestas. Leo integer malesuada nunc vel risus commodo viverra maecenas. Amet cursus sit amet dictum sit amet. In hac habitasse platea dictumst quisque sagittis purus sit amet. Congue mauris rhoncus aenean vel. Imperdiet proin fermentum leo vel orci porta non. Velit dignissim sodales ut eu. Mauris a diam maecenas sed enim ut sem viverra aliquet. Morbi non arcu risus quis varius quam quisque. Blandit aliquam etiam erat velit scelerisque in. Convallis aenean et tortor at risus viverra adipiscing at in. In hac habitasse platea dictumst vestibulum. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.
<p>Non sodales neque sodales ut etiam sit amet. Quis ipsum suspendisse ultrices gravida dictum fusce ut. Lectus proin nibh nisl condimentum id venenatis a. Turpis nunc eget lorem dolor sed viverra ipsum nunc. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Libero id faucibus nisl tincidunt. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Maecenas accumsan lacus vel facilisis volutpat. Bibendum arcu vitae elementum curabitur vitae. Id porta nibh venenatis cras sed felis eget velit. Leo integer malesuada nunc vel. Purus in mollis nunc sed id semper risus in hendrerit. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Eget nunc lobortis mattis aliquam. Suspendisse in est ante in nibh mauris cursus mattis. Nibh mauris cursus mattis molestie a iaculis. Eget dolor morbi non arcu risus quis varius quam quisque. Volutpat maecenas volutpat blandit aliquam etiam erat velit.
</div>
</div>
</div>
</main>
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">I'm your footer. Always at the bottom of the screen. When the page content is too tall, I get pushed down. I also adjust my height according to my contents.</span>
</div>
</footer>
<!-- Optional JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>
You can use clearfix.
Just add it as class - effectively what it does is this:
.clearfix::after {
display: block;
clear: both;
content: "";
}
This question already has an answer here:
full screen responsive background image with bootstrap
(1 answer)
Closed 7 years ago.
i have html code like this (i am use bootstrap)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script>
<![endif]-->
</head>
<body>
<style>
body {padding-top: 50px;
margin-bottom:0px;
padding-bottom:0px;
}
.bodinya { background-image:url(IMG_5551.jpg);
margin-bottom:0px;
padding-bottom:0px;
background-size: cover;
}
</style>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"> Toggle navigation </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Wisuda </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li class="dropdown">
Loggin<b class="caret"></b>
<ul class="dropdown-menu">
<li>Mahasiswa</li>
<li>Prodi</li>
<li>BAK</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="row bodinya">
<div class="col-md-12 ">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<!-- Fixed Footer -->
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p>© my</p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I want try to insert background image in class bodinya,
in preview the image succes to load but dosn't full load(i want the image stretch until my footer). any help?
Either change height of .bodyinya like
height: 100vh;
or just use this background for body tag
body {
background-image:url(IMG_5551.jpg);
background-size: cover;
background-repeat: no-repeat;
}
You can place class="bodinya" with your body tag and adjust your CSS to handle the entire page.
body {
margin-top: 50px !important;
margin-bottom: 50px !important;
color: white !important;
}
.navbar {
padding-right: 15px;
}
.bodinya {
background-image: url(http://img0.gtsstatic.com/wallpapers/f11634bfd85724cc44858fa49c489167_large.jpeg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media (max-width: 768px) {
.navbar {
padding-right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<body class="bodinya">
<div class="container-fluid">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only"> Toggle navigation </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Wisuda </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About
</li>
<li class="dropdown"> Loggin<b class="caret"></b>
<ul class="dropdown-menu">
<li>Mahasiswa
</li>
<li>Prodi
</li>
<li>BAK
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row bodinya">
<div class="col-md-12 ">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.
<br>Integer dignissim quis metus a luctus. Nullam molestie magna finibus, lacinia turpis ac, euismod enim. Aliquam id purus ut ipsum fermentum elementum et id sapien. Nam venenatis interdum ligula vel tristique. Morbi aliquam efficitur velit at
imperdiet. Morbi et tellus nec nisi pellentesque laoreet ac ac tellus. Vivamus enim turpis, elementum viverra tempus pharetra, consequat non leo. Nullam varius ipsum ac ex egestas imperdiet. Proin ac nisi aliquet leo vulputate facilisis nec
eu arcu. Nam hendrerit lacinia lorem, ut fringilla tellus mollis vel. Etiam fermentum est vel luctus lacinia. Duis a justo fringilla turpis elementum interdum eu et mauris. Donec consequat tortor rhoncus felis commodo, id molestie odio viverra.
Cras dictum cursus felis. Quisque pellentesque, risus vel porttitor efficitur, nulla nunc vulputate orci, vitae imperdiet turpis sem eget dui. Nullam dictum hendrerit hendrerit. Duis pellentesque hendrerit scelerisque. Donec venenatis, arcu
nec ornare luctus, dui dui vehicula lacus, in ornare eros orci non arcu. Praesent erat mauris, fermentum eu nulla lacinia, auctor ultrices magna. Suspendisse tincidunt leo augue, sed faucibus mi vehicula quis. Vestibulum pulvinar metus in laoreet
blandit. Sed ultrices eros ut scelerisque tristique. Cras id lectus malesuada, gravida est nec, pharetra quam. Sed varius libero velit, ut imperdiet tortor dictum ut. Aenean volutpat ex bibendum purus finibus, ut molestie lectus vehicula. Fusce
ornare urna tortor, vel auctor arcu sagittis eu. Duis id ultrices nunc. Sed eget tempor mi. Vivamus in tellus lobortis, pellentesque nisl sit amet, mattis sapien Integer dignissim quis metus a luctus. Nullam molestie magna finibus, lacinia turpis
ac, euismod enim. Aliquam id purus ut ipsum fermentum elementum et id sapien. Nam venenatis interdum ligula vel tristique. Morbi aliquam efficitur velit at imperdiet. Morbi et tellus nec nisi pellentesque laoreet ac ac tellus. Vivamus enim turpis,
elementum viverra tempus pharetra, consequat non leo. Nullam varius ipsum ac ex egestas imperdiet. Proin ac nisi aliquet leo vulputate facilisis nec eu arcu. Nam hendrerit lacinia lorem, ut fringilla tellus mollis vel. Etiam fermentum est vel
luctus lacinia. Duis a justo fringilla turpis elementum interdum eu et mauris. Donec consequat tortor rhoncus felis commodo, id molestie odio viverra. Cras dictum cursus felis. Quisque pellentesque, risus vel porttitor efficitur, nulla nunc
vulputate orci, vitae imperdiet turpis sem eget dui. Nullam dictum hendrerit hendrerit. Duis pellentesque hendrerit scelerisque. Donec venenatis, arcu nec ornare luctus, dui dui vehicula lacus, in ornare eros orci non arcu. Praesent erat mauris,
fermentum eu nulla lacinia, auctor ultrices magna. Suspendisse tincidunt leo augue, sed faucibus mi vehicula quis. Vestibulum pulvinar metus in laoreet blandit. Sed ultrices eros ut scelerisque tristique. Cras id lectus malesuada, gravida est
nec, pharetra quam. Sed varius libero velit, ut imperdiet tortor dictum ut. Aenean volutpat ex bibendum purus finibus, ut molestie lectus vehicula. Fusce ornare urna tortor, vel auctor arcu sagittis eu. Duis id ultrices nunc. Sed eget tempor
mi. Vivamus in tellus lobortis, pellentesque nisl sit amet, mattis sapien...</p>
</div>
</div>
</div>
<!-- Fixed Footer -->
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p>© my</p>
</div>
</div>
</div>
</body>