Related
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>
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>
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;
}
I have a vertical navbar which serves as a menu in my asp.net MVC5 project. In a css stylesheet I defined it's position:fixed; to be able to see it all the time. On the other part of my web page I have a partial view that changes according to menu selection. My problem is that when the partial view is too large, when I horizontally scroll to see what's missing, the text overlaps with the navbar.
Here is a sample from my navbar in a file called _Menu.cshtml:
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav" id="sidenav01">
<li class="active">
<a href="#" data-toggle="collapse" data-target="#toggleDoc" data-parent="#sidenav01" class="collapsed">
<span class="glyphicon glyphicon-folder-close"></span> Documentation <span class="caret pull-right"></span>
</a>
<div class="collapse" id="toggleDoc" style="height: 0px;">
<ul class="nav nav-list">
<li>Documentation 1.1</li>
<li>Documentation 1.2</li>
<li>Documentation 1.3</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
In the _Layout.cshtml, I have the following inside of <body> tag :
<div class="container-fluid">
<div class="row affix-row">
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4 affix-sidebar">
#Html.Partial("~/Views/PartialViews/_Menu.cshtml")
</div>
<div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
#RenderBody()
</div>
</div>
</div>
Finally the css:
.sidebar-nav{
position: fixed; //Center works but then my navbar is not fixed anymore!
}
I use bootstrap to separate both parts of my page, hence having the menu on the left, and the body (or partial views of menu links) on the right. I know that making the navbar position different will solve the problem. But I'd like to have a fixed navbar, that would not be fixed horizontally OR have the text on the right part of my page go behind the navbar. Any ideas on how to do this?
Here's what it looks like (note the IpAdress doesn't show, so page isn't filled really, and please admire my drawing skills :p)
You might want to try using a z-index, or use a filler div, that will act as a spacer at the top between your content and your menu. Example below.
.sidebar-nav{
position: fixed; //Center works but then my navbar is not fixed anymore!
width: 100%;
z-index: 1;
}
#filler {
display: block;
height: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav" id="sidenav01">
<li class="active">
<a href="#" data-toggle="collapse" data-target="#toggleDoc" data-parent="#sidenav01" class="collapsed">
<span class="glyphicon glyphicon-folder-close"></span> Documentation <span class="caret pull-right"></span>
</a>
<div class="collapse" id="toggleDoc" style="height: 0px;">
<ul class="nav nav-list">
<li>Documentation 1.1</li>
<li>Documentation 1.2</li>
<li>Documentation 1.3</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row affix-row">
<div id="filler"></div>
<div iclass="col-sm-4 col-md-4 col-lg-4 col-xl-4 affix-sidebar">
<!-- #Html.Partial("~/Views/PartialViews/_Menu.cshtml") -->
<p>Bunchotext</p>
</div>
<div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
<!-- #RenderBody() -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae semper tortor, non efficitur nulla. Pellentesque elementum augue arcu, quis fermentum elit vestibulum eu. Curabitur ornare volutpat turpis, vitae pellentesque ex commodo lacinia. Sed venenatis dui nisi, sed feugiat dui hendrerit a. Nullam rutrum libero at mauris pellentesque bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum volutpat efficitur arcu, nec eleifend ante consectetur vitae.
In hac habitasse platea dictumst. Ut ornare, nisl non pharetra ultricies, arcu sapien porttitor ligula, vitae pellentesque diam tellus vitae urna. Sed eget tempus orci, sit amet egestas nisl. Nam sed aliquet ex, vel consequat magna. Aliquam enim diam, sollicitudin ut metus ut, accumsan dictum nunc. Phasellus dictum ultrices leo, tempus elementum nisl commodo eu. Ut efficitur turpis id dui accumsan lobortis. Fusce semper venenatis orci in dapibus. Ut id dolor et diam sagittis mollis. Nam vulputate tincidunt enim, vel facilisis leo ultricies eget. Mauris accumsan at diam id imperdiet. Integer gravida, nisi eget accumsan consectetur, purus quam suscipit est, maximus ullamcorper lectus lorem non velit. In interdum nec lectus et luctus. Donec congue malesuada tellus, vel auctor magna egestas non.
Nulla hendrerit, velit a euismod blandit, enim ex ultricies elit, ac aliquam massa tortor vitae erat. Mauris rutrum hendrerit nisl vel finibus. Sed aliquam eget arcu eget egestas. Nullam a auctor ante. Donec a nibh fringilla, ornare nibh ac, posuere felis. Pellentesque condimentum suscipit vestibulum. Fusce quis sapien non ex mattis ultricies et sit amet metus. Phasellus at nunc sollicitudin, tristique nunc eget, sodales augue. Praesent sagittis justo eget placerat feugiat.
Fusce aliquet enim eget venenatis fringilla. Suspendisse imperdiet, tellus eu pretium fringilla, ligula ante fermentum dui, in venenatis erat risus nec erat. Curabitur libero dolor, semper eu eros sit amet, eleifend accumsan diam. Fusce dui ante, pellentesque vitae nisl at, dapibus consectetur arcu. Mauris rhoncus nisl nec leo sollicitudin, eu fermentum nisi sodales. Quisque magna dolor, consequat sed ultricies dignissim, ullamcorper eu dui. Fusce vitae est sed augue ornare finibus. Aenean a eleifend ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc dapibus malesuada nulla ac dignissim. Nulla scelerisque diam vel neque consequat, tempus facilisis eros tempor. Ut pellentesque urna vitae tellus imperdiet, a sagittis ipsum condimentum. Nullam in purus ut nisl porttitor porttitor nec eget metus. Sed maximus nisl arcu. Suspendisse ut egestas ipsum, ut varius nisi.
Nulla lacus neque, suscipit quis odio ac, accumsan molestie nisi. Vestibulum quam quam, bibendum non velit eu, faucibus laoreet sem. Aliquam auctor rhoncus ultrices. Nullam a sem sagittis, accumsan risus eu, auctor nisl. Nam vestibulum lobortis sagittis. Nunc vel ultricies sem, et convallis nulla. Mauris elementum imperdiet lorem, non maximus enim. Suspendisse dictum turpis massa, at bibendum neque ultrices ac. Sed sodales tempor augue et molestie. </p>
</div>
</div>
</div>
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>