I am using Bootstrap's navbar with .shadow-sm. I have two divs beneath it, one without background and the other one with a white background.
The shadow is showing as normal in the div with no background set, but being hidden by the white background.
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
<div class="container">
<a class="nav-brand" href="{{ url('/') }}">
Home
</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">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
<li class="nav-item pr-md-4">
<a class="nav-link" href="#">Platform</a>
</li>
<li class="nav-item pr-md-4">
<a class="nav-link" href="#">Settings</a>
</li>
<div class="navbar-text border-left d-sm-none d-md-block pl-md-3"></div>
</ul>
</div>
</div>
</nav>
<main class="pb-4">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 left-panel pt-5 pr-4 d-none d-md-block text-right">
Left menu
</div>
<div class="col-12 col-md-9 pt-5 px-4 center-panel">
<div class="h1">
Dashboard
</div>
<div class="row">
<div class="col-12 col-md-6">
Welcome back!
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
html, body {
font-family: $font-family-sans-serif;
font-size: 1rem;
line-height: 1.8;
font-weight: normal;
color: $textBlack;
background: linear-gradient(180deg, #E9EDF3 0%, rgba(255, 255, 255, 0) 100%);
min-height: 100%;
margin: 0;
}
.left-panel {
min-height: 100vh;
}
.center-panel {
min-height: 100vh;
background-color: white;
}
.content-panel {
min-height: 100vh;
}
.right-panel {
min-height: 100vh;
background-color: white;
}
Can anyone see what I am doing wrong here? I've tried adding and removing padding and margins, but it seems as if the white background is overlaying the shadow.
The two panels are different colours, so I can't just remove the background and use the body background.
It is happening because of the stack order of the elements.
The element with white background is in front of the navbar.
You can solve it just by placing the navbar element in the front with z-index:
nav {
z-index: 1;
}
Related
I would like the div (home) to be in the middle of the page. The problem with me is that when I shrink the browser window at the bottom, the footer moves up with it and then eventually disappears underneath. And should I reduce the page in the browser, so zoom out, then you can see that the logo and the text are not in the middle.
I can't get the footer to stay at the bottom and the logo and text to be in the middle of the page.
I use Bootstrap 5
CODE: https://jsfiddle.net/esznkh4r/3/
VIDEO: https://i.imgur.com/XRAX2bq.mp4
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
}
.home {
padding-top: 150px;
}
.logo {
height: 200px;
width: 200px;
border-radius: 100%;
}
.text {
text-transform: uppercase;
text-align: center;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height:50px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 active" aria-current="page" href="#">Home</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
<div class="home">
<div class="container">
<img class="logo d-block mx-auto mb-4" src="https://duckduckgo.com/assets/common/dax-logo.svg" alt="LOGO">
<div class="text">
<h1>TEST</h1>
<h6>BLABLABLABLABLA</h6>
</div>
</div>
</div>
</div>
<footer>
<div class="container d-flex flex-wrap justify-content-between align-items-center py-3">
<div class="col-md-4 d-flex align-items-center">
<span>TEST</span>
</div>
<ul class="nav col-md-4 justify-content-end d-flex">
<a class="mb-0 justify-content-end" target="_blank">TEST</a>
</ul>
</div>
</footer>
Try like this.
Set flex property into .wrapper.
Code
You can try this, remove .home class style, and add
.wrapper {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
Just added some property in .home class
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
}
.home {
padding: 150px 0;
flex: 1;
align-items: center;
justify-content: center;
}
.logo {
height: 200px;
width: 200px;
border-radius: 100%;
}
.text {
text-transform: uppercase;
text-align: center;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height:50px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 active" aria-current="page" href="#">Home</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
<div class="home">
<div class="container">
<img class="logo d-block mx-auto mb-4" src="https://duckduckgo.com/assets/common/dax-logo.svg" alt="LOGO">
<div class="text">
<h1>TEST</h1>
<h6>BLABLABLABLABLA</h6>
</div>
</div>
</div>
</div>
<footer>
<div class="container d-flex flex-wrap justify-content-between align-items-center py-3">
<div class="col-md-4 d-flex align-items-center">
<span>TEST</span>
</div>
<ul class="nav col-md-4 justify-content-end d-flex">
<a class="mb-0 justify-content-end" target="_blank">TEST</a>
</ul>
</div>
</footer>
I need help with bootstrap container and row width.
I have created a container and a row inside it. I have everything inside the row, but for some reason content sizes are different as displayed on jsfiddle and image preview.
<!DOCTYPE html>
<html lang="cs">
<head>
<title>xGhost.cz | Československý Gamehosting.</title>
<!-- meta data -->
<meta name="author" content="Jan Dvořák">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- styles -->
<link rel="stylesheet" href="css/style.css">
<!-- BOOTSTRAP START -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- BOOTSTRAP END -->
</head>
<body>
<div class="container-lg">
<div class="row">
<div class="row">
<div class="col-lg-1">
<img src="img/xGhost.svg" alt="" style="width: 300px; height: auto;"/>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mt-2">
<a class="navbar-brand" href="#" style="font-style: italic;">xGhost.cz</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Úvod</a></li>
<li class="nav-item"><a class="nav-link" href="#">Ceník</a></li>
<li class="nav-item"><a class="nav-link" href="#">Objednávka</a></li>
<li class="nav-item"><a class="nav-link" href="#">Příručka</a></li>
<li class="nav-item"><a class="nav-link" href="#">Servery</a></li>
<li class="nav-item"><a class="nav-link" href="#">Technika</a></li>
<li class="nav-item"><a class="nav-link" href="#">Kontakt</a></li>
</ul>
</div>
</nav>
<div class="row gx-2 mt-3">
<div class="col-md-8">
<div class="box">
<div class="box-heading">Novinky & Blog</div>
</div>
</div>
<div class="col-md-4">
<div class="box">
<div class="box-heading">Přihlášení</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.navbar {
text-align: center;
}
.nav-link:hover {
color: rgba(39, 174, 96, 1.0) !important;
}
.box {
width: 100%;
height: auto;
}
.box-heading {
background: #212529 !important;
color: #fff;
text-align: center;
padding: 7px;
width: 100%;
}
JSFiddle: https://jsfiddle.net/1c9w3taq/
Image preview
On the image you can clearly see, where the spaces are. It all should be aligned from side to side inside the container. Logo column width is missing a few pixels on the right and the two boxes in the bottom are not touching the sides of parrent container.
The problem is from this div.
<div class="col-md-8">
as well as <div class="col-md-4">
Yes they both equal 12 but they contain a margin.
To fix this you can add a class like this.
.nomargin{
margin: 0px !important;
}
And use the class like this
This will remove the default bootstrap margin.
I'm making a web page but I'm having a hard time making it responsive and fit my desires.
I'm making a login page with an alert box, the alert will only appear if the user types a wrong password or email.
What I want to happen is for the main div (flex-3) content to be centered on the page and when the alert (flex-2) appears for the page to not have a scroll wheel, so flex-3 kinda has to calculate the remaining height of the page and be centered, and obviously all of this has to work no matter the device resolution.
I tried doing this with flex div but the closest I got made so the alert increased the total height of the page, so it would have a scroll wheel with no content at the bottom.
html,
body {
color: #fff;
height: 100%;
min-height: 100%;
}
.flex-1 {
flex: 1;
background-color: red;
}
.flex-2 {
display: flex;
background-color: green;
}
.flex-3 {
display: flex;
background-color: black;
}
<html>
<head>
<!-- import bootstrap css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- import jquery and bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body class="d-flex flex-column">
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="" class="d-inline-block align-top" alt="">
</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 justify-content-end" id='navbarNav'>
<ul class="navbar-nav navbar-right">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="flex-1">
<div class="flex-2 d-flex alert-test">
<h1>TEST</h1>
</div>
<div class="flex-3 d-flex justify-content-center align-items-center">
<h1>TEST</h1>
</div>
</main>
</body>
</html>
This is how I made your solution working.
Added display: flex; flex-direction: column; to flex-1 to make the 2nd point working.
Added flex-grow: 1 to flex-3 class to make the dive stretch in remaining area.
Only by adding display: flex to the parent class flex-1, the flex grow property of child class, flex-3 works.
Hope this is the solution that you are looking for.
html,
body {
color: #fff;
height: 100%;
min-height: 100%;
}
.flex-1 {
display: flex;
flex-direction: column;
flex: 1;
background-color: red;
}
.flex-2 {
display: flex;
background-color: green;
}
.flex-3 {
display: flex;
flex-grow: 1;
overflow: auto;
background-color: black;
}
<!-- import bootstrap css -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
/>
<!-- import jquery and bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<body class="d-flex flex-column">
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="" class="d-inline-block align-top" alt="" />
</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 justify-content-end"
id="navbarNav"
>
<ul class="navbar-nav navbar-right">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</div>
</nav>
</header>
<main class="flex-1">
<div class="flex-2 d-flex alert-test">
<h1>flex-2 TEST</h1>
</div>
<div class="flex-3 d-flex justify-content-center align-items-center">
<h1>flex-3 Test</h1>
</div>
</main>
</body>
I have a background image with a navbar and some content on top of it. What is happening is the navbar and related content that is inside the bgimg div is repeating on top of the background image which covers the entire screen.
<div class="bgimg">
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="d-flex flex-grow-1" style="margin-left: 5%">
<span class="w-100 d-lg-none d-block"></span>
<a class="navbar-brand" routerLink="/">Home</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar7">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar7" style="margin-right: 5%">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a routerLink="/software" class="nav-link">Software</a>
</li>
<li class="nav-item">
<a routerLink="/about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a routerLink="/contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="myName">
<span>blah</span>
<div class="description">
<span>Developer</span>
</div>
</div>
</div>
.bgimg {
background: url("/assets/images/DSC01250.jpg") no-repeat center center fixed;
background-size: cover;
opacity: 0.8;
}
.myName {
font-family: 'Courier New', Courier, monospace;
margin-top: 300px; //half page height
color: white;
font-size: 50px;
text-align: center;
}
.description {
font-size: 25px;
}
I would just like one background image that covers the screen with no repeating content on top of it.
I ended up adding a position: fixed; attribute and adding a width and height attribute to hold all divs true to their parent container.
Basically I have 3 main components: 1 navbar, 1 content div separated in sections and 1 footer.
I've finally made my design responsive with for the first two components but not for the footer.
my content container (parent) have the class h-100 that sets the height to 100% child also have a 100% value only problem is that when I use inspector I see my parent container recognized as having a the size of the screen and because of that the footer is placed after the first section (there's 3 or more sections that should be 3 or more times the height of the screen minus the navbar)
here is a reproduction of the resulting html (I'm normally using Angular)
#media (max-width: 979px) {
.section {
padding-top: 0px;
}
}
.section{
display: flex;
min-height: 100%;
height: 100%;
border: 1px solid black;
padding-top: 60px;
}
.inner-section{
padding:5%;
border: 1px solid black;
}
html, body {height: 100%;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" 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>
<nav class="navbar navbar-expand-md navbar-light bg-success fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarAHS" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarAHS">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" >testleft</a>
</li>
</ul>
<ul class="navbar-nav mx-auto order-0">
<li class="nav-item">
<a class="nav-link">testmiddle</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#hello">testRight</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid h-100">
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10 h-100">
hello
</div>
</div>
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10 h-100">
hi
</div>
</div>
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10 h-100">
hey
</div>
</div>
</div>
<div class="row">
Footer is not placed correctly
</div>
Your issue is that your are specifying height 100% for the container, but 100% of what? In your case the body tag, but the body gets it's height from the size of your content(which on full screen is about 1000px for the first content box), then you also specify 100% height for each of your content boxes. Again 100% of what? The container, which is 1000px is this example. So the footer jumps up after what it thinks the size of page, but then each of the additional content boxes also get that same height, which leads to your weird situation.
In short if you need to keep the 100% height on the container, try adding overflow: auto to the container. Otherwise you could remove the 100% height rule from the container.
here is my solution.
please tell me if it is not a best practice.
every row is wrapped into div with h-100 as class and it works
I also removed container-fluid
HTML
#media (max-width: 979px) {
.section {
padding-top: 48px;
}
}
.section{
display: flex;
min-height: 100%;
height: 100%;
border: 1px solid black;
padding-top: 48px;
}
.inner-section{
padding:5%;
border: 1px solid black;
}
html, body {height: 100%;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" 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>
<nav class="navbar navbar-expand-md navbar-light bg-success fixed-top">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarAHS" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarAHS">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" >testleft</a>
</li>
</ul>
<ul class="navbar-nav mx-auto order-0">
<li class="nav-item">
<a class="nav-link">testmiddle</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#hello">testRight</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="h-100">
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10">
hello
</div>
</div>
</div>
<div class="h-100">
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10">
hey
</div>
</div>
</div>
<div class="h-100">
<div class="row section justify-content-md-center">
<div class="inner-section col-md-10">
ola
</div>
</div>
</div>
<div class="row">
Footer is placed correctly.
</div>