I have a banner picture that is supposed to display only for small devices a specified section. See also here: Stackoverflow Topic
Unfortunately, this also means that the content below now overlaps and is no longer in the responsive flow with the height of banner image.
Here the Hello, I have a banner picture that is supposed to display only for small devices a specified section. See also here: [Stackoverflow Topic][1]
Unfortunately, this also means that the content below now overlaps and is no longer in the responsive flow with the height of banner image.
Here the jsbin
.img-responsive {
max-width: 100%;
}
#media (max-width: 1000px) {
.cropped {
position: relative;
height: 250px;
}
.cropped .img-responsive {
position: absolute;
left: 50%;
transform: translateX(-50%);
max-width: 150%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<section class="banner">
<div class="cropped">
<img src="https://images.unsplash.com/photo-1601134728471-aa7f168d82ed?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1952&q=80" alt="" class="img-responsive">
</div>
</section>
<nav class="navbar sticky-top 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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-9 mx-lg-auto mt-5 mb-5">
<h2 class="text-uppercase">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, dolorum.
</h2>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed magni fugiat dolorum! Deserunt velit fuga provident, beatae delectus omnis culpa alias expedita, inventore molestiae aut explicabo? Nihil eum odit saepe voluptatem optio voluptatibus,
repudiandae laborum ducimus suscipit eius voluptatum porro debitis fugiat nobis ipsa inventore animi placeat expedita ex sint.</p>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed magni fugiat dolorum! Deserunt velit fuga provident, beatae delectus omnis culpa alias expedita, inventore molestiae aut explicabo? Nihil eum odit saepe voluptatem optio voluptatibus,
repudiandae laborum ducimus suscipit eius voluptatum porro debitis fugiat nobis ipsa inventore animi placeat expedita ex sint.</p>
</div>
</div>
</div>
</body>
</html>
I would recommend removing the image from the HTML and instead applying it as a background image to the container in the CSS, like so:
.cropped {
max-width: 100%;
height: 250px;
background-image: url(https://images.unsplash.com/photo-1601134728471-aa7f168d82ed?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1952&q=80);
background-position: center;
}
#media (max-width: 1000px) {
.cropped {
position: relative;
height: 250px;
}
.cropped .img-responsive {
position: absolute;
left: 50%;
transform: translateX(-50%);
max-width: 150%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<section class="banner">
<div class="cropped">
<img alt="" class="img-responsive">
</div>
</section>
<nav class="navbar sticky-top 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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-9 mx-lg-auto mt-5 mb-5">
<h2 class="text-uppercase">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, dolorum.
</h2>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed magni fugiat dolorum! Deserunt velit fuga provident, beatae delectus omnis culpa alias expedita, inventore molestiae aut explicabo? Nihil eum odit saepe voluptatem optio voluptatibus,
repudiandae laborum ducimus suscipit eius voluptatum porro debitis fugiat nobis ipsa inventore animi placeat expedita ex sint.</p>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed magni fugiat dolorum! Deserunt velit fuga provident, beatae delectus omnis culpa alias expedita, inventore molestiae aut explicabo? Nihil eum odit saepe voluptatem optio voluptatibus,
repudiandae laborum ducimus suscipit eius voluptatum porro debitis fugiat nobis ipsa inventore animi placeat expedita ex sint.</p>
</div>
</div>
</div>
</body>
</html>
Note: I removed the image src from the html and applied the 'background-image' to the container that was holding the image.
you can also use values for the background image instead of 'center'. And there are different properties relating to the background image. See more here:
https://www.w3schools.com/cssref/css3_pr_background.asp
Related
I need to stretch the borders of list elements all the way to the edge of the screen. Bellow is a picture of the project, the lists are in the yellow navigation bar. I am only allowed to use HTML, CSS and bootstrap. I would appreciate your help.
Thanks.[project]
#header-nav {
background-color: #DEB887;
}
.navbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 0rem;
padding-bottom: 0.5rem;
}
* {
box-sizing: border-box;
}
h1 {
font-size: 50px;
text-align: center;
color: blue;
font-family: cursive;
}
h4 {
text-align:center;
font-family: sans-serif;
padding-top: 2vw;
padding-bottom: 4vw;
}
h5 {
text-align: center;
}
#Chicken-tile {
background-color: #8FBC8F;
width: 100%;
margin-top: 5vw;
}
#Beef-tile {
background-color: lightpink;
width: 100%;
margin-top: 5vw;
}
#Sushi-tile {
background-color: blanchedalmond;
width: 100%;
margin-top: 5vw;
}
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Module 3 Solution</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-warning">
<div class="container-fluid">
<a class="navbar-brand fw-bold" c href="#">Food, LCC</a>
<button class="navbar-toggler d-lg-none d-md-none d-sm-none border-dark mb-1 mt-1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-lg-0">
<li class="nav-item d-lg-none d-md-none text-center fw-bold border border-dark">
<a class="nav-link" href="#">Chicken</a>
<li class="nav-item d-lg-none d-md-none text-center fw-bold border border-top-0 border border-dark">
<a class="nav-link" href="#">Beef</a>
</li>
<li class="nav-item d-lg-none d-lg-md-none text-center fw-bold border-top-0 border border-dark">
<a class="nav-link" href="#">Sushi</a>
</li>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</nav>
</header>
</div>
<h4>Our Menu</h4>
<div class="container">
<div id="home-tiles" class="row g-1">
<div id="Chicken-tile">
<h5>Chicken </h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus maxime laudantium fugiat autem at in distinctio laborum, corrupti delectus eius ipsum mollitia, perferendis sit doloribus voluptate nesciunt, commodi praesentium dolorum eveniet error. Accusantium consequatur quos possimus repellat autem quas aspernatur atque, incidunt soluta dolor id suscipit modi maxime esse, voluptatum dignissimos dolores tempore voluptatem consectetur iure, necessitatibus unde reiciendis praesentium! Voluptatem reprehenderit illum ipsum rem, eveniet excepturi quo et placeat voluptate magnam molestiae iste facere sapiente ipsa, deleniti eos ad, velit atque corrupti delectus molestias est! Iusto, explicabo?
</p></div>
<div id="Beef-tile">
<h5>Beef</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus maxime laudantium fugiat autem at in distinctio laborum, corrupti delectus eius ipsum mollitia, perferendis sit doloribus voluptate nesciunt, commodi praesentium dolorum eveniet error. Accusantium consequatur quos possimus repellat autem quas aspernatur atque, incidunt soluta dolor id suscipit modi maxime esse, voluptatum dignissimos dolores tempore voluptatem consectetur iure, necessitatibus unde reiciendis praesentium! Voluptatem reprehenderit illum ipsum rem, eveniet excepturi quo et placeat voluptate magnam molestiae iste facere sapiente ipsa, deleniti eos ad, velit atque corrupti delectus molestias est! Iusto, explicabo?
</p></div>
<div id="Sushi-tile">
<h5>Sushi</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus maxime laudantium fugiat autem at in distinctio laborum, corrupti delectus eius ipsum mollitia, perferendis sit doloribus voluptate nesciunt, commodi praesentium dolorum eveniet error. Accusantium consequatur quos possimus repellat autem quas aspernatur atque, incidunt soluta dolor id suscipit modi maxime esse, voluptatum dignissimos dolores tempore voluptatem consectetur iure, necessitatibus unde reiciendis praesentium! Voluptatem reprehenderit illum ipsum rem, eveniet excepturi quo et placeat voluptate magnam molestiae iste facere sapiente ipsa, deleniti eos ad, velit atque corrupti delectus molestias est! Iusto, explicabo?
</p></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I need to stretch the borders of list elements all the way to the edge of the screen. Bellow is a picture of the project, the lists are in the yellow navigation bar. I am only allowed to use HTML, CSS and bootstrap. I would appreciate your help.
Thanks.[project]
I am making an app using Bootstrap 4. This app has a navbar and a container below the navbar. Here is the layout of the app:
<body>
<div id="root">
<div>
<nav id="navbar" class="navbar navbar-expand navbar-dark bg-dark">
<div id="logo" title="App"/>
<button aria-controls="navbar-nav" type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed">
<span class="navbar-toggler-icon"/>
</button>
<div class="navbar-collapse collapse" id="navbar-nav" style="--logoHeight:68px;">
<div class="mr-auto navbar-nav">
Menu
</div>
</div>
</nav>
<div class="mt-2 container-fluid">
<div>
<div class="d-flex align-items-center vh-100">
<div class="container" id="theContainerToCenterVertically">
</div>
</div>
<span/>
</div>
</div>
</body>
I want to vertically center the the theContainerToCenterVertically div. The current code does that but a scrollbar appears even if the content fits in one page. How can I vertically center that div without a scrollbar appearing if the content fits in one page?
You can use Bootstrap's overflow-hidden class to hide any content that exceeds your page height and not have any scrollbars. And you can use flex to get your content div to fill the available space (and then use h-100 to cause the child elements to fill that space.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid px-0 d-flex flex-column vh-100">
<nav id="navbar" class="navbar navbar-expand navbar-dark bg-dark">
<div id="logo" title="App" />
<button aria-controls="navbar-nav" type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed">
<span class="navbar-toggler-icon" />
</button>
<div class="navbar-collapse collapse" id="navbar-nav" style="--logoHeight:68px;">
<div class="mr-auto navbar-nav">
Menu
</div>
</div>
</nav>
<div class="container-fluid mt-2 flex-grow-1 overflow-hidden">
<div class="row h-100">
<div class="col-4 h-100 d-flex flex-column justify-content-center">
<p>
This column’s content is vertically centered and is hidden if it exceeds the column height.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, eum? Officia, tenetur iste nemo soluta esse nesciunt nostrum quod ut ab rem eaque, facere magnam possimus quia error, praesentium veniam? Quis, iste? Repellat magni eveniet quos minima dignissimos deserunt cupiditate a animi! Repudiandae nobis sequi quas libero aliquam officia dolor, vero quod obcaecati recusandae ut deleniti consequuntur explicabo exercitationem fugiat quidem. Odit iusto voluptatem possimus dicta recusandae soluta odio, natus nobis, earum eos rerum ratione atque temporibus tenetur numquam reiciendis non. Odit adipisci, numquam fuga facere nesciunt aperiam consectetur expedita autem iure incidunt eligendi placeat necessitatibus animi blanditiis aspernatur nostrum.
</p>
</div>
<div class="col-8">
<p>This column content is not centered</p>
</div>
</div>
</div>
</div>
I used two columns for the content area just as an example. You can use a single col or col-12 if you just need one column.
I'm trying to make a bootstrap design as shown in the codepen.
Everything works fine when I look at the codepen:
Codepen_bootstrap
... but when looking a the page locally in my browser (chrome and safari) the design gets crushed and things do not stack as it should.
The problem is, that the <div class="container thirdSection">is not expanding as I was wanted it. So the rows inside this container-div do exceed the borders of the container.
Same thing happens inside the <div class="container fourthSection">
Local setup is Wordpress running on "Local by flywheel".
Problem is shown in the following screenshot.
Bootstrap_screenshot_1
Bootstrap_screenshot_2
Could Wordpress be the problem?
index.php
<?php get_header(); ?>
<div class="container secondSection">
<div class="row firstRow">
<div class="col-sm-4 firstCol">
<div class="text-center">
<img src="<?php echo get_theme_file_uri('/images/fitsperfect.svg');?>" width="65" height="65" class="d-inline-block" alt="">
</div>
<h2 class="pt-4 pb-4">100% correct</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, quo blanditiis ut necessitatibus ad quisquam? Voluptas, molestiae nobis, cum obcaecati magni soluta numquam rerum quas nemo facere doloribus voluptates sint.</p>
</div>
<div class="col-sm-4 secondCol">
<div class="text-center">
<img src="<?php echo get_theme_file_uri('/images/like.svg');?>" width="65" height="65" class="d-inline-block" alt="">
</div>
<h2 class="pt-4 pb-4">lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam praesentium itaque unde voluptatibus similique numquam repellendus earum aspernatur porro maiores veritatis, animi necessitatibus? Rerum sit sunt repudiandae ipsam mollitia est!</p>
</div>
<div class="col-sm-4 thirdCol p">
<div class="text-center">
<img src="<?php echo get_theme_file_uri('/images/secure.svg');?>" width="65" height="65" class="d-inline-block" alt="">
</div>
<h2 class="pt-4 pb-4">lorem heading</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium, repellendus dignissimos. Minima sunt voluptatem et reprehenderit molestias dignissimos, facilis voluptate, sit rerum beatae, hic error deleniti accusantium unde possimus est!</p>
</div>
</div>
</div>
<div class="container thirdSection">
<div class="row firstRow pt-5 pb-5">
<div class="col-sm-12 firstCol">
<h2 class="pt-4 pb-4">Five Steps from here to there</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum enim consequuntur a dolorum amet voluptatum, ducimus eveniet laboriosam voluptatem qui, asperiores nisi minus libero similique molestias animi eos quod totam odio dolores. Assumenda dicta eveniet modi ex velit dolorum cumque ut aperiam architecto? Culpa iusto officiis minima fugiat suscipit adipisci ab sed perspiciatis rerum eveniet doloremque, dicta quibusdam architecto labore ad laudantium? Quas voluptas rerum modi mollitia fuga tenetur nesciunt illo earum? Vitae hic sequi beatae, quasi, eligendi, magni ipsam libero velit non nobis illo mollitia molestiae. Sequi vitae doloribus iusto rerum tempora? In laborum perferendis dolores molestias suscipit! Voluptate necessitatibus, beatae a iure nesciunt odit officiis reiciendis, molestias sint sapiente optio error et quam maiores repudiandae minus, atque eaque soluta quasi provident illum? Numquam dignissimos autem dolore cumque laboriosam cum sapiente mollitia nesciunt quaerat labore ratione quod, corporis soluta natus porro eveniet eligendi et dolorum est ullam accusamus placeat?</p>
</div>
</div>
<div class="row secondRow pt-5 pb-5">
<div class="col-md-6 col-sm-12 secondCol">
<div class="text-center">
<img src="<?php echo get_theme_file_uri('/images/window-art#2x.png');?>" width="446" height="471" class="d-inline-block img-fluid" alt="">
</div>
</div>
<div class="col-md-6 col-sm-12 thirdCol">
<ul class="list-display list-checkmarks">
<li ><span class="pfDinTextBold">This is a little bit of descripton</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, doloribus!</li>
<li ><span class="pfDinTextBold">This is a little bit more of a descripton</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, maiores.</li>
<li ><span class="pfDinTextBold">Takes some moer than describing</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, recusandae.</li>
<li ><span class="pfDinTextBold">Stripes are a better design then dots</span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, deleniti.</li>
</ul>
<ul class="list-display listButton pt-4">
<li ><span><button type="button" class="btn buttonRed btn-block">configure button</button></span></li>
</ul>
</div>
</div>
</div>
<div class="container fourthSection">
<div class="row firstRow pt-5 pb-5">
<div class="col-sm-12 firstCol">
<h2 class="pt-4 pb-4">Just the best for you</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nulla laborum nesciunt! Nam possimus amet quas nesciunt saepe non veritatis molestiae optio. Est a dicta placeat impedit recusandae, ipsum exercitationem blanditiis nostrum atque optio pariatur? Numquam illum eius, a eveniet ex et consequatur inventore in modi quibusdam, at repudiandae voluptatem. Adipisci odio dolor laudantium culpa quis debitis sint quae temporibus.</p>
</div>
</div>
<!-- <div class="row firstRow pt-5 pb-5 order-1"> -->
<div class="container-fluid mt-4">
<div class="row justify-content-center">
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
ⓘ detailled data
Another link
<p class="card-text">5m</p>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
ⓘ detailled data
Another link
<p class="card-text">5m</p>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
ⓘ detailled data
Another link
<p class="card-text">5m</p>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
ⓘ detailled data
Another link
<p class="card-text">5m</p>
</div>
</div>
</div>
<div class="col-auto mb-3">
<div class="card" style="width: 185px;">
<div class="card-body">
<h5 class="card-title">just a card</h5>
<h6 class="card-subtitle mb-2 text-muted">weiß matt</h6>
<p class="card-text">card text</p>
<p class="card-text">description text</p>
ⓘ detailled data
Another link
<p class="card-text">5m</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container fifthSection">
<div class="row firstRow pt-5 pb-5 order-2">
<div class="col-sm-12 firstCol">
<h2 class="pt-4 pb-4">Some free samples?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium perspiciatis itaque quidem ex, aperiam, debitis natus eos ullam corporis quos a aliquid ratione officia cumque veritatis quas ipsam rem cupiditate harum, quo illum. Voluptatum itaque odit deleniti voluptatibus quia quam.</p>
<span><button type="button" class="btn buttonYellow btn-block">Configuration</button></span>
</div>
</div>
</div>
<div class="container sixthSection">
<div class="row SecondRow pt-5 pb-5">
<div class="col-sm-12 firstCol">
<h2 class="pt-4 pb-4">Some text goes here</h2>
</div>
</diy>
<div class="row SecondRow pt-5 pb-5">
<div class="col-md-4 FirstCol">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi libero rerum explicabo? Incidunt laborum adipisci inventore ipsam expedita blanditiis sapiente atque tenetur? Provident facilis tempora ipsam veniam magnam nulla harum, eum fuga! Quis illum natus itaque nihil nulla hic molestiae doloribus molestias ab minus laborum exercitationem iure, sunt temporibus, provident ea maiores praesentium in beatae dolore fugiat alias mollitia adipisci at? Officia id nemo placeat, consectetur repellendus vel error beatae itaque, quibusdam hic maxime reprehenderit laudantium corporis. Dicta, sapiente consequatur, nisi veritatis rerum nesciunt consequuntur iusto qui esse autem soluta quam ipsam! Ut voluptatem doloribus nulla, assumenda praesentium distinctio laudantium reiciendis perferendis natus eveniet consequuntur minus at earum ex voluptatum asperiores, nesciunt, quisquam libero tempora? Asperiores molestias blanditiis, nobis minima architecto ea consequuntur minus nemo dolores perspiciatis, officia optio numquam aliquam placeat vel quia accusamus magni, laboriosam suscipit quaerat sit non odit adipisci molestiae. Deleniti rerum reprehenderit eius facere dolore.
</p>
</div>
<div class="col-md-4 SecondCol">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, sint obcaecati earum rerum dolore adipisci numquam exercitationem repudiandae quis, officiis sit? Nulla voluptatem sint incidunt. Perspiciatis aut sed alias aliquam, illum aliquid repudiandae cupiditate perferendis placeat harum repellendus enim accusamus, optio consequuntur officiis. Perspiciatis quam exercitationem quaerat neque, quidem voluptatem soluta numquam commodi voluptatum laudantium harum totam doloribus quibusdam? Vitae eveniet, at dolorum animi consectetur impedit earum dicta exercitationem accusamus autem pariatur doloremque optio suscipit ipsam maiores nam atque culpa incidunt deleniti. Modi nulla harum quae suscipit. Sint, inventore soluta eaque aperiam, nobis omnis aliquid quo quas consectetur veniam at quasi recusandae quaerat est eum fugit voluptatibus autem odit suscipit tempora error mollitia dignissimos incidunt in. Nihil expedita natus rem necessitatibus culpa corrupti ab, laborum earum magni quo. Voluptatum doloribus eligendi odio vitae dolorem aspernatur veniam itaque, laboriosam doloremque ea autem. Repellat dolor asperiores dolore voluptates excepturi, at nobis delectus!
</p>
</div>
<div class="col-md-4 ThirdCol">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat suscipit ad id voluptatem. Cupiditate nesciunt accusamus vero ea mollitia velit laudantium iusto, ipsa quibusdam, aliquid accusantium doloremque nulla quo numquam ducimus nostrum fugit labore iure saepe error? Odio officia, voluptatum cum architecto, natus hic veritatis sequi quae blanditiis molestiae, pariatur culpa. Officia voluptas earum reprehenderit ab accusantium nam iste sequi nesciunt ea laborum non aliquid eligendi, quaerat deleniti, necessitatibus sunt minima reiciendis. Dolore eum ipsam molestias nisi tenetur, enim quia corporis repellat, dolorem hic debitis. A reprehenderit voluptas dignissimos exercitationem laboriosam rerum distinctio consectetur qui recusandae natus, repellendus vitae quas, doloribus impedit mollitia, nihil veritatis quidem. Est, cum ipsam provident distinctio excepturi pariatur quasi labore perferendis unde ut, ullam possimus non fugiat a odio, rerum ab minus maxime architecto accusantium. Similique, sapiente ad! Ea delectus quis temporibus expedita natus quae nesciunt officia, architecto unde similique, facilis est aut! Quibusdam voluptatibus praesentium perspiciatis, voluptatum atque suscipit perferendis corporis sit dignissimos asperiores recusandae minus delectus nesciunt! Dicta necessitatibus similique veniam rerum beatae eligendi, inventore exercitationem autem id saepe quisquam est sequi cum aspernatur ipsa accusantium aut delectus harum nulla, quis facilis. Magnam ab, doloremque commodi obcaecati quam vero fugiat ea deserunt quis.
</p>
</div>
</div>
</div>
<?php
get_footer();
?>
header.php
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head();?>
</head>
<body>
<header>
<div class="container">
<div class="container topSection">
<div class="row justify-content-center mt-0 pt-0 pb-0">
<div class="col-sm-12 d-flex justify-content-center">
<span class="topSection d-flex align-items-center"><img src="<?php echo get_theme_file_uri('/images/icons8-in_transit copy.svg');?>" width="30" height="30" class="d-inline-block mr-1" alt="" loading="lazy"> Fsat shipping from our warehouse</span>
</div>
</div>
</div>
<div class="container">
<div class="row rowSectionNav align-items-center">
<div class="col-sm-12 justify-content-center">
<nav class="navbar navbar-expand-lg navbar-light bg-white navNoPaddingMargin">
<a class="navbar-brand d-flex align-items-center brandName" href="#"><img src="<?php echo get_theme_file_uri('/images/fensterfolie.svg');?>" width="40" height="40" class="d-inline-block align-top mr-2" alt="" loading="lazy">Logo <span style="color: #FF5A6E;font-family: Uni-Sans-Bold; font-size: 1.6rem" >+</span></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="nav collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Start</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link3</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
footer.php
<!-- Footer -->
<footer class="page-footer font-small mdb-color lighten-3 pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 mx-auto my-md-4 my-0 mt-4 mb-1">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mb-4">About</h5>
<ul class="list-unstyled">
<li>
<p>
Link1
</p>
</li>
<li>
<p>
Link2
</p>
</li>
<li>
<p>
Link3
</p>
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 mx-auto my-md-4 my-0 mt-4 mb-1">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mb-4">Support</h5>
<ul class="list-unstyled">
<li>
<p>
contact us
</p>
</li>
<li>
<p>
FAQ
</p>
</li>
<li>
<p>
Delivers
</p>
</li>
<li>
<p>
Payment
</p>
</li>
<li>
<p>
Business
</p>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-4 col-lg-3 mx-auto my-md-4 my-0 mt-4 mb-1">
<!-- Contact details -->
<h5 class="font-weight-bold text-uppercase mb-4">Our services</h5>
<ul class="list-unstyled">
<li>
<p>
<i class="fas fa-home mr-3"></i>free shipping</p>
</li>
<li>
<p>
<i class="fas fa-envelope mr-3"></i>correct</p>
</li>
<li>
<p>
<i class="fas fa-phone mr-3"></i>Simplicity</p>
</li>
<li>
<p>
<i class="fas fa-print mr-3"></i>Warranty</p>
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 text-center mx-auto my-4">
<!-- Social buttons -->
<h5 class="font-weight-bold text-uppercase mb-4">delivery</h5>
<!-- Facebook -->
<a type="button" class="btn-floating btn-fb">
<i class="fab fa-facebook-f"></i>
</a>
<!-- Twitter -->
<a type="button" class="btn-floating btn-tw">
<i class="fab fa-twitter"></i>
</a>
<!-- Social buttons -->
<h5 class="font-weight-bold text-uppercase mb-4">Secure</h5>
<!-- Google +-->
<a type="button" class="btn-floating btn-gplus">
<i class="fab fa-google-plus-g"></i>
</a>
<!-- Dribbble -->
<a type="button" class="btn-floating btn-dribbble">
<i class="fab fa-dribbble"></i>
</a>
</div>
</div>
<!-- Grid column -->
<!-- Grid row -->
<div class="row">
<div class="col-md-2 col-lg-2 text-center mx-auto my-4">
<h5 class="font-weight-bold text-uppercase mb-4">Payments</h5>
<span><img src="<?php echo get_theme_file_uri('/images/paypal#2x.png');?>" width="60" height="20" class="d-inline-block img-fluid" alt=""></span>
<span><img src="<?php echo get_theme_file_uri('/images/sofort#2x.png');?>" width="77" height="24" class="d-inline-block img-fluid" alt=""></span>
<span><img src="<?php echo get_theme_file_uri('/images/mastercard#2x.png');?>" width="52" height="41" class="d-inline-block img-fluid" alt=""></span>
<span><img src="<?php echo get_theme_file_uri('/images/Visa#2x.png');?>" width="60" height="20" class="d-inline-block img-fluid" alt=""></span>
</div>
</div>
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
blabla.com
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<?php wp_footer();?>
</div>
</body>
</html>
functions.php
<?php
function wpbootstrap_enqueue_styles() {
wp_enqueue_style('boostrap_V4','https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css');
wp_enqueue_style('font-awesome-new','https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_script('bootstrap_jquery', '//code.jquery.com/jquery-3.5.1.slim.min.js');
wp_enqueue_script('bootstrap_popper', '//cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js');
wp_enqueue_script('bootstrap_js', '//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js');
}
add_action('wp_enqueue_scripts', 'wpbootstrap_enqueue_styles');
function flt_files() {
wp_enqueue_style('fensterfolie_main_styles', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'flt_files');
?>
problem solved: Did add the following to each individual div-container:
.containerClass {
min-height: 100%
}
I am using Bootstrap 4 and I am making use of the CSS class called fixed-top to leave my sidebar landline while I go down with the scroll, this works perfect, but it happens that what I have inside container-fluid which is a table, is below sidebar, as I show it in The following example:
Keep in mind that I also use one sidebar Toggle to contract or not the sidebar, likewise the table is below the
I leave the class fixed-top and class code container-fluid
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.container-fluid {
width: 100%;
padding-right: 0.75rem;
padding-left: 0.75rem;
margin-right: auto;
margin-left: auto;
}
UPDATE:
Add HTML code
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="shortcut icon" href="/Content/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion toggled fixed-top" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center">
<div class="sidebar-brand-icon rotate-n-15">
</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Nav Item - Dashboard -->
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Index", "TicketForm")">
<i class="fa fa-paper-plane"></i>
<span>Abrir un ticket</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Index", "Tickets")">
<i class="fa fa-bars"></i>
<span>Listado de Tickets</span>
</a>
</li>
<!-- Nav Item ties Collapse Menu -->
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Index", "Service")">
<i class="fa fa-cogs"></i>
<span>Gestionar servicios</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Index", "Report")">
<i class="fa fa-table"></i>
<span>Reportes</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Index", "Dashboard")">
<i class="fa fa-line-chart"></i>
<span>Dashboard</span>
</a>
</li>
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>
</body>
</html>
$(document).ready(function() {
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("menuDisplayed");
});
});
/* Sidebar */
#sidebar-wrapper {
z-index: 1;
position: fixed;
width: 150px;
height: 100%;
overflow-y: hidden;
background: #5b4282;
opacity: 0.9;
transition: all 0.5s;
}
/* Main Content */
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
padding-left: 150px;
transition: all 0.5s;
}
#menu-toggle {
transition: all 0.3s;
font-size: 2em;
display: block;
text-align: center;
}
/* Change the width of the sidebar to display it*/
#wrapper.menuDisplayed #sidebar-wrapper {
width: 250px;
}
#wrapper.menuDisplayed #page-content-wrapper {
padding-left: 250px;
}
/* Sidebar styling */
.sidebar-nav {
padding: 0;
list-style: none;
transition: all 0.5s;
width: 100%;
text-align: center;
}
.sidebar-nav li {
line-height: 40px;
width: 100%;
transition: all 0.3s;
padding: 10px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #ddd;
}
.sidebar-nav li:hover {
background: #846bab;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<span class="fa fa-bars"></span>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="text-center">Sidebar</h1>
<h2 class="small text-center">Second Header</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!DOCTYPE html>
</body>
</html>
You need to divide the page in two sections first. Then distribute them as content section and sidebar section. That should solve your overlapping issue. like below snippet
<body>
<div id="wrapper">
<div id="sidebar">
dashboard menu (that nav tag and its childs)...
make this div fixed and sticky
</div>
<div id="content">
Contents
</div>
</div>
</body
This is just div distribution without css.
I am trying to program a website with HTML. This works very well, but I want the footer to be at the bottom of the website!
footer {
background-color: #F2F2F2;
border: 1px solid #DEDCD9;
border-radius: 5px;
clear: both;
}
no error
Here is a 2-column layout with the footer always at the bottom, also using Bootstrap 4 grid for responsiveness:
#wrapper {
min-height: 100vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="wrapper" class="d-flex flex-column">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Brand</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div class="container mt-3">
<div class="row">
<div class="col-sm-12 col-md-8 col-lg-9">
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut quas quae placeat non, eligendi odio, sit animi corporis unde fugiat ex est reprehenderit voluptas facilis quo amet nisi consequuntur perferendis.</p>
<p class="text-justify">Eius reiciendis, modi nam magni, vel et, labore sit perspiciatis obcaecati illo aspernatur laboriosam, sed veritatis nisi deleniti quae alias nesciunt. Et possimus, reprehenderit voluptatibus officiis consequatur illo architecto magnam!</p>
<p class="text-justify">Qui tempora deserunt, corrupti soluta obcaecati ab fugiat consectetur? Asperiores ullam aliquid recusandae doloribus voluptate ipsa. Reprehenderit aspernatur est dolore ipsum voluptatum doloribus atque suscipit. Quod voluptatum, facere temporibus
iure.</p>
<p class="text-justify">Ipsum quasi, iste fugit doloribus accusantium natus provident, dolorum molestiae alias. Quo earum explicabo corporis assumenda autem ratione ea corrupti tenetur, fugit esse doloremque, laborum, ab iste eum. Mollitia, consectetur!</p>
<p class="text-justify">Eligendi dolores nisi quibusdam, officia earum neque harum iure reprehenderit voluptates, veritatis quaerat deserunt ratione porro itaque rem voluptatum minima similique temporibus unde! Quaerat laborum ullam optio sequi quae quidem!</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-3 mb-3">
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
</div>
</div>
</div>
<div class="footer mt-auto text-center p-2 bg-light">
© Lorem ipsum dolor sit amet
</div>
</div>
Hope it helps.