Bootstrap jumbotron full height without navbar's height - html

HTML:
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="jumbotron jumbotron-fluid vertical-center">
<div class="container">
<h1 class="display-3">TITLE</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>Description text</p>
<p class="lead">
<a class="btn btn-primary btn-lg btn-jumbotron" href="#" role="button">Learn more</a>
</p>
</div>
</div>
<div class="container">
</div> <!-- /container -->
CSS:
.navbar{
padding: 7px 0;
margin-bottom: 0;
}
.jumbotron {
background-image: url(http://cdn.wallpapersafari.com/97/93/UE7u4i.jpg);
background-size: cover;
color: white;
margin: 0;
}
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
.btn-jumbotron{
background-color: black;
border-color: white;
}
I'm trying to have a jumbotron have full height of the browser's window, but without the height of the static navbar. I did get it to size of full viewport by using height: min-height:100vh amnd center it, but as you can see from the jsfiddle example I have a scrollbar present because of the navbar's height - 64px.
How can I remove that?
https://jsfiddle.net/iDaniel19/12qxmkjt/

Use calc
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
min-height: calc(100% - 64px); /* */
min-height: calc(100vh - 64px); /* */
display: flex;
align-items: center;
}

Add to .navbar position: absolute; top: 0; width: 100%; and padding-top:64px; to .jumbotron

Related

Page layout in bootstrap

I would like to make one page scroll. Nav bar. Then a full width picture. than about me page, porfolio / projects and contact me. But it seems like am doing something wrong with the layout. Please help.
.navbar {
min-height: 80px;
margin-bottom: 0;
}
#btnnavbar {
margin-top: 20px;
}
#btnhome {
margin-top: 16px;
}
#imgbrand {
margin-top: -70px;
margin-left: px;
height: 220px;
width: 280px;
}
#firstpage {
margin-top: 90px;
}
.fixed-bg {
/* The background image */
background-image: url("http://res.cloudinary.com/ekilja01/image/upload/v1478095932/DeathtoStock_Lonely_Commute-05_ricqva.jpg");
/* Scale the background image to be as large as possible */
background-size: cover;
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
<html>
<head>
</head>
<body>
<!-- Navbar style available in Bootstrap framework-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- /end-->
<!-- Anything that has to be responsive we are going to keep inside the Bootstrap grid -->
<div class="container-fluid">
<!-- /end -->
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse" id="btnnavbar">
<!-- For screen readers only -->
<span class="sr-only">Toggle navigation</span>
<!-- /end -->
<!-- Hamburger menu button appears when browser window has been shrinked -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /end -->
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand " href="http://codepen.io/ekilja01">
<img class="img-responsive" id="imgbrand" src="http://www.kiljakandweb.com/favicon.png" alt="brand logo">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="btnhome">About
</li>
<li id="btnhome">Portfolio
</li>
<li id="btnhome">Contact
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="fixed-bg">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h1 class="text-center">1.4.1.3</h1>
<p>fafafa</p>
<div>
</div>
</div>
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h1>Code</h1>
</div>
</div>
</body>
</html>

Bootstrap Jumbotron Background Image Not Responsive

I'm fairly new to bootstrap and having a hard time trying to get my jumbotron background image to scale properly without showing the white background. I'm using Bootstrap Fixed Nav at the top of the page, Jumbotron (bg image) in the middle, and Sticky Footer. When I test in google chrome to see if the layout is correct, it seems that the image doesn't stretch down to the top of the footer, which shows the white background. How can I get the background image to scale properly for all devices?
HTML:
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="index.html">Jason<span>Murray</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="text-center">Front-End Web Developer</h1>
<p class="text-center">I'm Jason Murray, Front-End Web Developer who loves to write clean codes and build simplistic web designs.</p>
<p class="text-center"><a class="btn btn-primary btn-lg" href="#" role="button">Recent Work</a></p>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-center">Copyright © 2016 Jason Murray Web Design. All Rights Reserved</p>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
.jumbotron {
background: url("../img/lucho-49.jpg") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
There is a margin bottom to this jumbotron class, so remove margin:
.jumbotron {
margin-bottom: 0;
}
Here is the fiddle: fiddle link
The image is not stretched down to the top of the footer is because of jumbotron's predefined property margin-bottom: 30px;.
In your CSS code do the following changes:
nav + .jumbotron {
margin-bottom: 0;
background: url("../img/lucho-49.jpg") no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
If you add margin-bottom: 0; in your .jumbotron selector it won't work due to specificity. Hence I've increased the specificity by adding Adjacent Sibling Selector, nav + .jumbotron to override your CSS properties with the predefined bootstrap's .jumbroton CSS properties.

Image extends the container div although minimum height is set?

I am having an issue with my CSS at the moment and I can't seem to figure out how to fix the issue, I tried researching this problem but I couldn't really put into words how I would describe my situation.
Basically I have set the body to 100% height so that it acts as the parent for any child attribute that may set. the main goal that I am trying to achieve is to have the background image of my div to fill the rest of the page without extending it and creating an scroll overflow. However instead its overflowing and extending the body height and creating an overflow, which you can see in my screenshot below:
my html code is as follows
<body>
<nav class="navbar navbar-default">
<div class="container center-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">MC</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About Me</li>
<li>Gallery</li>
<li>Videos</li>
</ul>
</div>
</div>
</nav>
<div class="main-body">
<div class="main-wrapper">
</div>
</div>
My CSS
html{
height: 100%;
min-height: 100% !important;
}
body{
height: 100%;
min-height: 100% !important;
margin: 0;
}
.navbar.navbar-default{
margin-bottom: 0px;
border-radius: 0px;
}
.main-body{
height: 100%;
}
.main-wrapper{
height: 100%;
background: url("../images/test.jpg");
background-size:cover;
}
You've made .main-wrapper 100% the height of its parent. If body is 1000px, .main-wrapper will be as well. Since you also have another item in the body, it's pushing your main wrapper down.
Use height: calc(100% - [the height of the nav])

have some issues with my bootstrap and css

I want to fix the logo on the navigation bar , I want to either increase the height of navigation bar and fix it without adjusting the image size amd When i shrink the website to mobile view , The Logo is seen below the collapse button .
Preview of the website (http://threeguys.us/works/testing.html)
testing.html
<div class="jumbotron">
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo/logo.png" width="250px" height="60px"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Rates</li>
<li>Employee</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div class="call_button">
<button type="button" class="btn btn-default">call us</button>
</div>
</div>
</div><!--jumbotron end-->
style.css
.jumbotron
{
text-align: center;
background-size: cover;
background-image: url(images/car/car.png);
}
.container
{
padding:0px;
}
.navbar
{
height: 60px;
background-color: transparent;
border:0px;
padding-top: 0px;
}
.navbar-header
{
width:70px;
background-color: transparent;
}
ul
{
padding:0;
}
.call_button
{
margin-top : 428px;
}
.content
{
background-color: white;
padding-top:0px;
}
.footer-nav
{
text-align: center;
}
.text_order
{
background-image: url(images/text_order/rectangle.jpg);
text-align: center;
padding: 5px;
}
.text_order p
{
font-size: 20px;
}
.footer-nav li
{
display: inline;
}
.footer-nav li a
{
padding-left: 50px;
text-decoration: none;
color: #f7ab00;
}
.footer-nav li a:hover
{
color:black;
}
Based on your question, comments and screenshots here are the following recommendations:
Remove this CSS code from style.css so collapse button is on the right (and not above the logo):
.navbar-header {
width:70px;
background-color: transparent; //don't necessarily need to remove this one but it isn't serving a purpose currently
}
To get the nav outside of the jumbotron whilst keeping the full image screen, perform the following updates:
Update testing.html to the following:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo/logo.png" width="250px" height="60px"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Rates</li>
<li>Employee</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<div class="call_button">
<button type="button" class="btn btn-default">call us</button>
</div>
</div>
</div><!--jumbotron end-->
Update your style.css jumbotron class and navbar class to the following:
.jumbotron {
text-align: center;
background-size: cover;
background-image: url(images/car/car.png);
margin-top: -80px; //include this account for the height of the navbar and it's margin
}
.navbar {
height: 60px;
background-color: transparent;
border: 0px;
padding: 0 120px; //the 120px value will push the logo and menu nav closer together. You will need to update your collapse breakpoints though. Adjust as you see fit.
}
If I haven't answered all your questions please comment below so I can update my answer.
Modify the flow of your HTML. Avoid putting nav inside .container.
Use a structure like this
This will put the logo inside the header as well as put it before the collapse button in mobile view.

bootstrap navbar in div with width: 40% for ipad

I have a simple map site with a sidebar that I can toggle on and off. All works fine on Pc and telephone, but I can't get the responsive navbar functionality to work on a tablet.
Here is the css:
html, body { height: 100%; }
body {
padding-top: 50px;
}
.container-fluid {
margin: 0;
padding: 0;
height:100%;
width: 100%;
}
.map{
width:100%;
height:100%;
}
.sidebar {
position: absolute;
top: 0px;
left: 0px;
height: inherit;
width: 30%;
z-index: 10005;
background-color: #fff;
overflow-y: scroll;
padding-top: 50px;
display: none;
}
/*
* iPad - nav list not complete
*/
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
.sidebar {
width: 40%;
}
}
/*
* Phone - works
*/
#media (max-width: 767px) {
.sidebar {
width: 100%;
}
}
and the html:
<!-- form container -->
<div class="container sidebar" id="form-container">
<nav class="navbar navbar-fixed-top navbar-inverse sidebar-header" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#form-container-navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="form-container-title" class="navbar-brand" href="#">Form</a>
</div><!-- /navbar-header -->
<div id="form-container-navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav ">
<li>Open</li>
<li>Maybe</li>
<li>Whatever</li>
<li>More</li>
<li>More</li>
<li>More</li>
<li><a id="close-form" href="#">Close</a></li>
</ul>
</div><!-- /navbar-collapse -->
</div><!-- container -->
</nav><!-- navbar -->
<form role="form" id="form1">
<div class="form-group">
<label for="species">Species</label>
<input id="species" class="form-control" type="text"/>
</div>
<div class="form-group">
<label for="risk">Risk</label>
<!-- etc, etc -->
On a pc I get a horizontal menu that extends beyond the 'sidebar'. This is fine.
On a phone I get the collapsed menu that I can toggle - also fine.
But on an iPad I get a horizontal menu that works, but I can't see the text that is beyond the width of the .sidebar. Unhelpful.
Ideally I'd get the collapsed menu I can toggle, or a horizontal menu I can see!
Can anyone help?
Thanks
Mini