So I am relatively new to Web Development and am following Colt Steele's udemy course, I started doing this landing page but towards the end when I try to set the height of HTML to 100% and then there's like whitespace down. I have tried to search for a reason and I think my div container's height is causing some issues.
P.S: I also tried to make the HTML height auto which worked fine, but then again causes an issue in responsive mode, and even the navbar size decreases and doesn't cover to the end of the screen.
body{
background: url(https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80);
background-size: cover;
background-position: center;
font-family: 'Lato', sans-serif;
color: white;
background-repeat: no-repeat;
border: 1px solid transparent;
}
html{
height: auto;
}
#content{
text-align: center;
padding: 25%;
}
h1{
font-weight: 700;
font-size: 5em;
}
hr.new1 {
border-top: 1px solid white;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,700;1,900&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Puurefect Match</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="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="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign In
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register
</a>
</li>
</ul>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>Puurefect Match</h1>
<h3>The only Human-Feline Dating app</h3>
<hr class="new1">
<button class="btn btn-primary btn-lg">Get Started</button>
</div>
</div>
</div>
</div>
</body>
You need to add height: 100% to your body and html as well to make sure the body changes dynamically when window size changes.
My Chrome View
Live Demo: (Run snippet below and click full screen to see the image is cover in the page and there is no white space.)
Edit: Bootstrap has its own alot of native flex box classes which you can use instead of custom CSS. We can just use align-items-center and h-100 to make sure about content text stays in middle and good things it will be repsonsive as well. We do not need to use any Custom CSS padding or margin on content.
body {
background: url(https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80);
background-size: cover;
background-position: center;
font-family: 'Lato', sans-serif;
color: white;
background-repeat: no-repeat;
border: 1px solid transparent;
height: 100%;
}
html {
height: 100%;
}
body {}
#content {
text-align: center;
color: white;
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr.new1 {
border-top: 1px solid white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PURFECT MATCH</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,700;1,900&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Puurefect Match</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="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="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign In
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-lg-12 mx-auto">
<div id="content">
<h1>Puurefect Match</h1>
<h3>The only Human-Feline Dating app</h3>
<hr class="new1">
<button class="btn btn-primary btn-lg">Get Started</button>
</div>
</div>
</div>
</div>
</body>
Related
I'm quite new to BOOTSTRAP 5 (Web Development in general) and I am currently trying to make a simple website with it. I've selected a navigation bar but whenever I change my browser to mobile mode, the drop-down which appears does not work at all and all my elements in my navbar disappear. Any help would be grand!
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<style type="text/css">
#jumbotron{
background-image: url(bg1.jpg);
height: 25rem;
}
.center {
text-align: center;
}
#cardDeck{
margin-left: 1rem;
}
#logo-space{
background-color: blue;
width: auto;
height: auto;
}
#logo{
width: 300px;
height: 120px;
padding: 15px;
margin-left: 5rem;
}
#FMS-BTN{
width: 12rem;
position: relative;
top: 3rem;
left: 5rem;
}
</style>
</head>
<body>
<div id="logo-space" class="row">
<div class="col">
<img id="logo" src="img/logo.png" alt="">
</div>
<div class="col">
</div>
<div class="col">
<a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
<img src="" alt="">Head to FMS</a>
</div>
</div>
<div id="nav-area">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">APPEALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FEED</a>
</li>
</ul>
<span class="navbar-text">
APPLY NOW
</span>
</div>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
You also need to link the JavaScript Bundle for Bootstrap. The mobile menu only works with JS.
The JS Bundle code is:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
All you gotta do is to add the JS dependency to make it work:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<style type="text/css">
#jumbotron {
background-image: url(bg1.jpg);
height: 25rem;
}
.center {
text-align: center;
}
#cardDeck {
margin-left: 1rem;
}
#logo-space {
background-color: blue;
width: auto;
height: auto;
}
#logo {
width: 300px;
height: 120px;
padding: 15px;
margin-left: 5rem;
}
#FMS-BTN {
width: 12rem;
position: relative;
top: 3rem;
left: 5rem;
}
</style>
</head>
<body>
<div id="logo-space" class="row">
<div class="col">
<img id="logo" src="img/logo.png" alt="">
</div>
<div class="col">
</div>
<div class="col">
<a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
<img src="" alt="">Head to FMS</a>
</div>
</div>
<div id="nav-area">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">APPEALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FEED</a>
</li>
</ul>
<span class="navbar-text">
APPLY NOW
</span>
</div>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
You can use CSS Media Queries to determine what action to do based on the screen size. Here, you would want to change the size of the nav bar based on the screen size.
#media (max-width: 600px) {
*This is for phones, for example (you might need to find more accurate pixel counts)*
}
h1 and p tags inside the class center are not aligning to the center. I have tried various combinations of codes but nothing worked.
this is my html code This html code was copied from bootstrap website and I did a bit of editing for my project.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="css/technical_landing.css"> <link href="https://fonts.googleapis.com/css?family=Catamaran&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"> <title>Minimum Bootstrap HTML Skeleton</title>
<!-- -->
<style>
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Technical lab</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="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="#">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<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="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Sign Up <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log in</a>
</li>
</ul>
</div> </nav> </div> </nav>
<div class="container center"> <div class="row">
<div class="<col-md-12>">
<h2>
<span class="fa-stack fa-lg">
<i class="far fa-square fa-stack-2x"></i>
<i class="fab fa-twitter-square fa-stack-1x"></i>
</span>
</h2>
<h1>Technical lab is coming soon.</h1>
<p>Waiting is not easy but just wait this time</p>
<button class="btn btn-success btn-lg">
<i class="fas fa-spinner"></i>
<br>Click me</button>
</div> </div> </div>
<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>
<script> </script>
</body>
</html>
This is css code is my css part please check .center part in this. I have tried many codes to bring those elements in center of the page but nothing worked for me.
/*<!--https://images.unsplash.com/photo-1537498425277-c283d32ef9db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80-->*/
html{
height: 100%;
}
.navbar-light .navbar-brand{
color: black;
}
body{
background:linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)),url(https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80)
no-repeat center center fixed ;
background-size:cover;
background-position: center;
font-family: catamaran;
}
.center{
text-align: center;
margin:0 auto;
padding:5%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
}
.navbar{
height: 45px;
}
h1,p{
color: black;
}
h2>span{
color: black;
}
#media (max-width:768px) {
h1 {
background-color: #449d44;
}
h2{
background-color: #449d44;
}
}
#media (min-width:768px) {
h1{
background-color:skyblue;
}
}
So you can see that the text is aligned but not aligned on the center of the screen, the reason being is it looks like the width of the div needs to be set to 100%.
Try adding width: 100% to the .center class.
I'm using a bootstrap 4 navbar and I want to prevent the logo and language switch from moving and collapsing with the menu when the hamburger menu is clicked. Here is all of my code. Also, here is the link to my codepen. Is this possible?
https://codepen.io/asizemore/pen/LYEgvOy?editors=1100
CSS
.logo {
max-width: 130px;
}
.btn {
font-family: 'Muli', sans-serif;
font-weight: 900;
}
.btn {
background: rgb(142, 63, 41);
color: rgb(202, 171, 159);
}
.active {
background: rgb(166, 73, 47);
color: white;
}
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
!-- NAV BAR -->
<nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mt-lg-0" href="#"><img src="https://via.placeholder.com/200x50" class="logo img-fluid"></a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mx-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">PURPOSE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAMILY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">AGRICULTURE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ART</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
<!-- LANGUAGE SWITCH -->
<div class="btn-group btn-toggle lang mr-1">
<input type="button" name="lang" class="btn" value="ENG">
<input type="button" name="lang" class="btn active" value="SPA">
</div>
</nav>
Place your language switch inside a .navbar-item, right after .navbar-brand and give it an order: 1 (which is bigger than the default of 0 - so it's going to be displayed as the last item of its parent) on the interval at which your .navbar is not collapsed. Since you're using .navbar-expand-lg, it's going to be #media (min-width: 992px) but if you used .navbar-expand-md it would have been min-width: 768px - or 576px for -sm. More about responsive breakpoints here.
When the nav is collapsed, you don't need the order changed, so the language switcher is displayed before the menu (that's the reason we placed it after the logo in the first place). See it working:
.logo {
max-width: 130px;
}
.btn {
font-family: 'Muli', sans-serif;
font-weight: 900;
}
.btn {
background: rgb(142, 63, 41);
color: rgb(202, 171, 159);
}
.active {
background: rgb(166, 73, 47);
color: white;
}
#media(min-width: 992px) {
.language-switch {
order: 1;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.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.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand mt-lg-0" href="#"><img src="https://via.placeholder.com/200x50" class="logo img-fluid"></a>
<div class="nav-item language-switch">
<div class="btn-group btn-toggle lang mr-1">
<input type="button" name="lang" class="btn" value="ENG">
<input type="button" name="lang" class="btn active" value="SPA">
</div>
</div>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mx-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">PURPOSE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAMILY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">AGRICULTURE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ART</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
Oh, and you need to come up with an solution on how to align the three (logo, language switch and toggler) when they don't actually fit in one line (devices narrower than ~450px). But that's a problem you basically asked for.
Note: if you want the logo to be displayed first when navbar is collapsed, you could simply place it before the toggler and give the toggler either ml-auto mr-3 or ml-3 mr-auto to make it stick to either right or left side (having it centered would be sort of weird, IMHO). Example:
.logo {
max-width: 130px;
}
.btn {
font-family: 'Muli', sans-serif;
font-weight: 900;
}
.btn {
background: rgb(142, 63, 41);
color: rgb(202, 171, 159);
}
.active {
background: rgb(166, 73, 47);
color: white;
}
#media(min-width: 992px) {
.language-switch {
order: 1;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.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.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
!-- NAV BAR -->
<nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white">
<a class="navbar-brand mt-lg-0" href="#"><img src="https://via.placeholder.com/200x50" class="logo img-fluid"></a>
<button class="navbar-toggler mr-auto" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="nav-item language-switch">
<div class="btn-group btn-toggle lang mr-1">
<input type="button" name="lang" class="btn" value="ENG">
<input type="button" name="lang" class="btn active" value="SPA">
</div>
</div>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mx-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">PURPOSE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAMILY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">AGRICULTURE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ART</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
The same result could be achieved by using order: -1 on the logo (without switching its place in DOM with the toggler) on the proper responsive interval (i.e: below 991px in your case).
I have a simple main header which contains a navbar , I want to change the alignment of the right side of the image.
html, body{
height: 100%;
margin: 0px;
}
* {
box-sizing: border-box;
}
.marketing-main-header_banner{
background-image: url("https://svgshare.com/i/8GY.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% 100%;
position: relative;
height: 900px;
width: 1700px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid marketing-main-header">
<div class="marketing-main-header_banner">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Navbar</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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dla kogo <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prowadzacy</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kompetencje</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
Here is what I have :
as you can see there is space on the right side of header and left side, I want the image to float right side and remove that space on the right side, but left side should have that white space.
Here is what I want:
what am I missing in my code?
You can use edge offset values on the background-position property.
By using a negative value we can offset the image further towards the right of the page, giving you the effect you are looking for.
Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
html, body{
height: 100%;
margin: 0px;
}
* {
box-sizing: border-box;
}
.marketing-main-header_banner{
background-image: url("https://svgshare.com/i/8GY.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: right -190px bottom;
position: relative;
height: 900px;
width: 1700px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid marketing-main-header">
<div class="marketing-main-header_banner">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Navbar</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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dla kogo <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prowadzacy</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kompetencje</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
By adding a couple div
Added marketing-main-header_banner_image to hold the image that can be bigger than marketing-main-header_banner.
Added nav-holder to place the navbar-toggler button in the correct place.
html,
body {
height: 100%;
margin: 0px;
}
* {
box-sizing: border-box;
}
.marketing-main-header_banner {
overflow: hidden;
background-position: 100% 100%;
position: relative;
height: 900px;
width: 1700px;
}
.marketing-main-header_banner_image {
overflow: visible;
background-image: url("https://svgshare.com/i/8GY.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: 100% 100%;
position: relative;
height: 900px;
width: 2000px;
}
.nav-holder {
background-position: 100% 100%;
position: relative;
height: 900px;
width: 1700px;
width: 1700;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid marketing-main-header">
<div class="marketing-main-header_banner">
<div class="marketing-main-header_banner_image">
<div class="nav-holder">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">Navbar</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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dla kogo <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agenda</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Prowadzacy</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Faq</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kompetencje</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
I have a page with a navbar.
I want to add a responsive background image to the page (not the navbar).
If I set the page to 100% height it overflows the page with a scrollbar.
How should this be accomplished? I have no idea.
.bg {
/* The image used */
background-image: url("http://via.placeholder.com/350x150");
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="main-page">
<div class="bg"></div>
<div class="data">
bla bla bla
</div>
</div>
Edit: jsfiddle - JSFIDDLE
You can use the Bootstrap 4 flexbox utils, and add flex:1 1 auto to the main-page so it fills the height (with no scrolling).
https://www.codeply.com/go/isN2cS0m0q
<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://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
body {
min-height: 100vh;
}
.flex-fill {
flex: 1 1 auto;
}
.bg {
background-image: url("http://placehold.it/350x150");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<body class="d-flex flex-column">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="main-page d-flex flex-column flex-fill">
<div class="bg flex-fill"></div>
<div class="data">
bla bla bla
</div>
</div>
</body>
Note: The flex-fill class will be included in Bootstrap 4.1 so the extra CSS for flex-fill will no longer be needed when 4.1 is released.
Related questions:
Bootstrap 4 Navbar and content fill height flexbox
Bootstrap 4: How to make the row stretch remaining height?
Add the following css rule to your .bg class:
height: calc(100vh - 56px)
That will calculate the height (100% viewport height minus 56px for the height of the navbar).
Working code snippet:
<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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.bg {
/* The image used */
background-image: url("http://via.placeholder.com/350x150");
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: calc(100vh - 56px);
}
</style>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<div class="main-page">
<div class="bg"></div>
<div class="data">
bla bla bla
</div>
</div>