I'm using HTML, Javascript, Bootstrap, and CSS to create a navbar and sidebar for our system. I just want to make the navbar and sidebar fixed even the user scroll down the page. And also responsive. How can I do that without changing the design of the navbar and sidebar? Can somebody help me with my problem using bootstrap? Here's my jsfiddle https://jsfiddle.net/exyvat08/17/
Original Design
The problem when I put the fixed-top and custom CSS
<div class="d-flex" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></div>
<div class="list-group list-group-flush">
<i class="fas fa-tachometer-alt"></i>Dashboard
User
Supplier
Purchase Order
Reports
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-success border-bottom">
<button class="btn btn-outline-light btn-sm" id="menu-toggle">Hide Menu</button>
<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 ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link text-light" href=""><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-light"><i class="fas fa-building"></i> Contact</a>
</li>
<li class="nav-item dropdown">
<a class="btn nav-link dropdown-toggle text-light" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i> John Doe
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">See Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
Using fixed-top bootstrap class and custom css
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
if (e.target.innerText == "Show Menu") {
e.target.innerText = "Hide Menu";
} else {
e.target.innerText = "Show Menu";
}
});
body {
height: 100%;
overflow-x: hidden;
font-family: sans-serif;
}
#logo {
width: 160px;
height: 150px;
border-radius: 50%;
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
.navbar {
background: linear-gradient(to top right, #0084ff, #0084ff);
/*position: fixed;*/
}
#media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
#sidebar-wrapper {
position: fixed;
}
#page-content-wrapper {
padding-top: 57px;
}
#page-content-wrapper,
#page-content-wrapper>.navbar {
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
#wrapper.toggled #page-content-wrapper>.navbar {
left: 15rem;
}
#wrapper.toggled #page-content-wrapper {
margin-left: 15rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="d-flex" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading">
<img class="mx-auto d-block" src="../images/logo.jpg" id="logo">
</div>
<div class="list-group list-group-flush">
<i class="fas fa-tachometer-alt"></i>Dashboard
User
Supplier
Purchase Order
Reports
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-success border-bottom">
<button class="btn btn-outline-light btn-sm" id="menu-toggle">Hide Menu</button>
<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 ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link text-light" href=""><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-light"><i class="fas fa-building"></i> Contact</a>
</li>
<li class="nav-item dropdown">
<a class="btn nav-link dropdown-toggle text-light" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i> John Doe
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">See Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
Related
so i'm relatively new to programing,and i wanted to create a loader that whenever the page loads or refreshes it shows a centered loading animation that greys out and fades the entire page then all goes back to normal when the page fully loads.
i managed to get everything else working except centering the animation and fading/greying the page. idk if i'm missing something really obvious but i've searched everywhere and i didn't quite get what i wanted.
here's the html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>S&B Clothes</title>
<link rel="icon" type="image/x-icon" href="logo/icons8-needle-96.png">
</head>
<body id="body">
<!--Navbar-->
<nav class="navbar navbar-expand-sm sticky-top" id="navbar1">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="logo/logo_svg.svg" class="rounded" id="navbar_logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#men_women">
<div class="container_menu" onclick="menu(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</button>
<div class="collapse navbar-collapse" id="men_women">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<button type="button" class="btn" onclick="women_index_fn()" id="navbar_men">Women</button>
</li>
<li>
<vr class="vr"></vr>
</li>
<li class="nav-item">
<button type="button" class="btn" onclick="children_index_fn()" id="navbar_women">Children</button>
</li>
</li>
<li>
<vr class="vr"></vr>
</li>
<li class="nav-item">
<button type="button" class="btn" onclick="men_index_fn()" id="navbar_children">Men</button>
</li>
</ul>
</div>
<div class="input-group rounded">
<input type="search" class="form-control rounded" placeholder="Search" aria-label="Search" aria-describedby="search-addon" />
<button type="button" class="btn rounded" id="src_btn">Search</button>
</div>
<div>
<button class="btn" id="user_btn" onmouseover="change_img_user()" onmouseout="change_img_user_2()">
<img src="Icons/user-white.png" id="user_btn_ico"/>
</button>
</div>
<div>
<button class="btn" id="favorite_btn" onmouseover="change_img_fav()" onmouseout="change_img_fav_2()">
<img src="Icons/favorite-white.png" id="favorite_btn_ico"/>
</button>
</div>
<div>
<button class="btn" id="shop_cart_btn" onmouseover="change_img_cart()" onmouseout="change_img_cart_2()">
<img src="Icons/shopping-cart-white.png" id="shop_cart_ico"/>
</button>
</div>
</div>
</nav>
<!--Loader-->
<div class="preloader" id="ld">
<div class="box">
<div class="box__inner">
<div class="box__back-flap"></div>
<div class="box__right-flap"></div>
<div class="box__front-flap"></div>
<div class="box__left-flap"></div>
<div class="box__front"></div>
</div>
</div>
<div class="box">
<div class="box__inner">
<div class="box__back-flap"></div>
<div class="box__right-flap"></div>
<div class="box__front-flap"></div>
<div class="box__left-flap"></div>
<div class="box__front"></div>
</div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
<div class="line">
<div class="line__inner"></div>
</div>
here's the js
window.addEventListener("load", function()
{
var loader = document.getElementById("ld");
loader.style.display = "none";
})
all the css i've done so far is just loader style and coloring nothing really related to positioning.
i tried putting my loader in a container and centering that but it didn't work out as planned and the navbar didn't get greyed out
thank you all
Ok you are asking how to create an overlay and center your loading widget in the middle of the screen. There are a lot of ways your could do this, here is one of them.
function removeOverlay() {
const overlay = document.querySelector('#overlay');
overlay.classList.remove('show');
document.body.style.overflow = 'auto';
}
body {
overflow: hidden;
}
#overlay {
background-color: rgba(255,255,255,0.7);
display: none;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
#overlay.show {
display: block;
}
#overlay-container {
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
height: 100%;
}
<article>
<header><h2>My Article</h2></header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</p>
</article>
<div id="overlay" class="show">
<div id="overlay-container">
<h3>Loading ...</h3>
<p>Place your loading widget in the overlay-container</p>
<button onclick="removeOverlay()">Remove Overlay</button>
</div>
</div>
I want my footer to be at the bottom of the page. Not at the bottom of the content in the DIV that its in. But I also want the footer to dynamically resize when the side bar on the page is opened and closed.
I've spend TOO long trying all options I can find on google with no luck. The best I've managed is to have the footer across the whole page including overlapping the sidebar which is not what i'm after.
Side note:
I also want main content to not scroll under the footer and stop just above. I.e the scroll bar for this div to stop just above the footer if this is easily achievable?
Have a look at Facebook messenger web for a perfect example. The left sidebar and centre content is what I'm looking for.
Can anyone assist?
Example jsfille here:
https://jsfiddle.net/pwdt95u8/1/
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c551403873.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"
integrity="sha256-yr4fRk/GU1ehYJPAs8P4JlTgu0Hdsp4ZKrx8bDEDC3I=" crossorigin="anonymous"></script>
<!-- Custom styles for this template -->
<link href="../static/css/simple-sidebar.css" rel="stylesheet">
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading">Start Bootstrap</div>
<div class="list-group list-group-flush">
Dashboard
Shortcuts
Overview
Events
Profile
Status
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>
<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 ml-auto mt-2 mt-lg-0">
<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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid h-100">
<h1 class="mt-4">Simple Sidebar</h1>
<div class="row text-left w-50">
TEST
<footer id="sticky-footer" class="float-bottom card-footer py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
</div>
</div> <!-- /#page-content-wrapper -->
</div>
<!-- Footer -->
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
This is best solved with CSS Grids. In fact there doesn't need to be too many changes. I have moved the footer to be the last child of the body element and added a few properties to the body style rule. (I've also made a few edits such as switching JQuery for Vanilla JS)
I added the toggle text button so you can easily toggle text within the main content area.
Here is a JFiddle of same code.
document.getElementById('menu-toggle').addEventListener('click', () => {
document.getElementById('wrapper').classList.toggle('toggled');
});
document.getElementById('text-toggle').addEventListener('click', () => {
document.getElementById('lorem-ipsum').classList.toggle('hide-text');
});
body {
display: grid;
/* last row is footer and takes whatever is its natural height.
* first row is rest of content and stretches to fill available space
*/
grid-template-rows: 1fr auto;
min-height: 100vh;
}
#wrapper {
overflow-x: hidden;
}
#sticky-footer {
flex-shrink: none;
}
#sidebar-wrapper {
margin-left: -15rem;
transition: margin 0.25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#page-content-wrapper {
min-width: 100vw;
}
.hide-text {
display: none;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
#media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="main.css" rel="stylesheet"/>
</head>
<body>
<div class="d-flex" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading">Start Bootstrap</div>
<div class="list-group list-group-flush">
Dashboard
Shortcuts
Overview
Events
Profile
Status
</div>
</div>
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>
</nav>
<div class="container-fluid">
<h1 class="mt-4">Simple Sidebar</h1>
<div class="p1">
TESTing
<br/>
<button class="btn btn-primary" id="text-toggle">toggle text</button>
<div id="lorem-ipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
</div>
<footer id="sticky-footer" class="float-bottom card-footer py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<script src="main.js"></script>
</body>
</html>
when i am placing div after video that div come up over video not
after video,also when i am making min-width: 100% to only width: 100%
then is show content coming before video when i am scaling browser
body{
font-family: 'Mina', sans-serif;
}
.navbar{
margin-bottom: 0px;
}
.navbar-brand{
padding: 0px;
}
.vid video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.content {
position: fixed;
bottom: 0;
color: #ffffff;
width: 100%;
padding: 0px;
top: 10%;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="https://fonts.googleapis.com/css?family=Mina" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top container-fluid">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo1.png"></a>
</div>
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>Countries</li>
<li>RECOMMENDED</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid vid">
<video autoplay="" loop="" class="fillWidth" poster="" id="video-background">
<source src="video/24.mp4" type="video/mp4">
</video>
<video autoplay="" loop="" class="fillWidth" poster="" id="video-background">
<source src="video/24.webm" type="video/mp4">
</video>
<div class="content">
<h1>Discover the Best Holiday Homes to stay</h1>
</div>
</div>
<div class="container">
<div class="row aft-vid">
<div class="col-lg-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src=""></script>
</body>
</html>
You can use two rows:
<div class="row">
<div class="col-md-12"> video </div>
</div>
<div class="row">
<div class="col-md-12"> content </div>
</div>
You should not use container-fluid vid
Use seperate divs. See code below
<div class="container-fluid>
<div class="vid>
//video iframe
</div>
</div>
`
/* Style by CSS */
html,
body {
height: 100%;
}
img{
max-width: 100%;
}
/* Cover */
#cover {
background: #222 url("../images/123.jpg") center center no-repeat;
background-size: cover;
color: white;
height: 100%;
text-align: center;
display: flex;
align-items: center;
}
#cover-caption {
width: 100%;
}
#cover form {
justify-content: center;
}
.carousel-inner > .carousel-item > img {
width: 100%;
height: 100%;
}
.section-content {
padding: 5rem 0 0;
}
#about {
background: url('../images/girlincar.jpg') center center no-repeat;
background-size: cover;
text-align: center;
}
.about-text {
background: rgba(0,0,0,0.8);
color: white;
padding-top: 1.875rem;
}
<!DOCTYPE html>
<html lang="ro">
<head><!--STARTING HEADING-->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!--Custom CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head><!--ENDING HEADING-->
<body><!--STARTING BODY-->
<section id="cover">
<div id="cover-caption">
<div class="container-fluid">
<div class="col-sm-10 offset-sm-1">
<h1 class="display-3">Bun Venit pe site-ul nostru!</h1>
<p>Ma bucur mult ca ati trecut pe aici, in momentul de fata inca invatam cum sa construim un site si cum sa ne atragem clientii intr-un mediu virtual, indiferent de experienta noastra in vanzari, satisfacerea nevoilor clientului,marketing sau pur si simplu, completarea proiectului dumneavoastra cu MOBILA de calitate, in mediul online, mereu ai ceva de invatat.</p>
<form action="" class="d-flex justify-content-center form-inline">
<div class="form-group">
<label class="sr-only">Name</label>
<input type="text" class="form-control form-control-lg" placeholder="Jane Doe">
</div>
<div class="form-group">
<label class="sr-only">E-mail</label>
<input type="text" class="form-control form-control-lg" placeholder="Jane.Doe#Example.com">
</div>
<button type="submit" class="btn btn-success">Okay, go!</button>
</form>
<br>
↓
</div>
</div>
</div>
</section>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse navbar-full" id="nav-main">
<a class="navbar-brand" href="#">
<img src="dre.png" width="30" height="30" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#">S.C. MOBPROSIM S.R.L</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">ACASA <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PRODUSE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DESPRE NOI</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="CAUTA">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">CAUTA</button>
</form>
</div>
</nav>
<section id="carousel">
<div id="carousel-home" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-home" data-slide-to="0" class="active"></li>
<li data-target="#carousel-home" data-slide-to="1"></li>
<li data-target="#carousel-home" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="assets/images/hearthand.jpg" alt="Love is in the air">
<div class="carousel-caption d-none d-md-block">
<h3>CALITATE</h3>
<p>Noi garantam calitatea produselor noastre.</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/woman-camera.jpg" alt="Music is my life">
<div class="carousel-caption d-none d-md-block">
<h3>ORIGINALITATE</h3>
<p>Stilul clasic nu are pereche.</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/images/banjo.jpg" alt="Instruments everywhere">
<div class="carousel-caption d-none d-md-block">
<h3>FUNCTIONABILITATE</h3>
<p>Usor de transportat, usor de montat, usor de apreciat.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-home" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-home" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<section id="what-we-do">
<div class="section-content">
<div class="container">
<h2>What we do</h2>
<div class="card-deck">
<p class="lead">Lorem ipsum dolor sit amet, consectetu adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card-deck">
<div class="card" style="width: 5rem;">
<div class="card-block">
<h4 class="card-title">Strategy & Planning</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
<img class="card-img-top" class="card-img-bottom img-fluid" src="assets/images/chalkboard.jpg" alt="Writing on a chalkboard">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">learn more
</button>
</div>
</div>
<div class="card" style="width: 20rem;">
<div class="card-block">
<h4 class="card-title">Creative & Design</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
<img class="card-img-top" class="card-img-bottom img-fluid" src="assets/images/chalkboard.jpg" alt="Writing on a chalkboard">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">learn more
</button>
</div>
</div>
<div class="card" style="width: 20rem;">
<div class="card-block">
<h4 class="card-title">Creative & Design</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
<img class="card-img-top" class="card-img-bottom img-fluid" src="assets/images/chalkboard.jpg" alt="Writing on a chalkboard">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<button type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#myModal">learn more
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="about">
<div class="section content">
<div class="container">
<div class="col-md-6">
<div class="about-text">
<h3>About us</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h5>Follow me on the web</h5>
Facebook
Instagram
Linkdel
</div>
</div>
</div>
</div>
</section>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
`https://imgur.com/a/kKaDU - Check the picture!
I am really new to web designing, an right now I am working on my first bootstrap 4 project. Everything is almost good, but the "padding" command for top spaces in css3 is not working. I want to make a gap by 80px ( 5rem ) between two sections, and I don't have a clue why is it not working. I am using sublimetext3 forwriting and google chrome for implementing. Code below.
<section id="what-we-do">
<div class="section-content">
<div class="container">
<h2>What we do</h2>
<div class="card-deck">
<p class="lead">Lorem ipsum dolor sit amet, consectetu adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card-deck">
<div class="card" style="width: 5rem;">
<div class="card-block">
<h4 class="card-title">Strategy & Planning</h4>
<h6 class="card-subtitle">Support card subtitle</h6>
</div>
And the CSS code:
.section-content {
padding: 5rem 0;
}
Try using margins instead of paddings.
So in the code snippet you provided, the "What we do" section has correct padding. The next section "About us" does not just because you have a typo in the class name section-content vs section content (missing dash). Your screenshot shows that you are also missing padding on the "What we do" but I can't help you with that, because you did not replicate it in the snippet.
HI i reviewed your code padding-top is working fine but the problem is padding is used for maintaining space or gap with in the box only.if u want maintain space between two blocks u should have to use margin or u can assign padding to #about section that will also work .
To default open an accordion section, you need to add "is-active" class for the li tag. like this:
<li class="accordion-item is-active" data-accordion-item>
<h5>This is the title</h5>
<div class="accordion-content" data-tab-content>
<p>This is the content
</p>
</li>
So I tried to remove "is-active" class using js so that the accordion will collapse/close. But even after "is-active" class is removed, the accordion stays open. How should I collapse/close all the accordion with a single click of a button?
Here is the documentation for Zurb Accordion
Here is the script that I used, (although I dont think its relevant)
$(document).ready(function(){
$(".testClass").click(function(){
$("li").removeClass("is-active");
});
});
You can do it as follows, run the snippet and see it in action.
$(document).foundation();
function closeAll() {
$('.accroot').each(function () {
var $acc = $(this);
var $openSections = $acc.find('.accordion-item.is-active .accordion-content');
$openSections.each(function (i, section) {
$acc.foundation('up', $(section));
});
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.js"></script>
<button type="button" onclick="closeAll()"> Close All </button>
<ul class="accordion accroot" data-accordion data-allow-all-closed='true'>
<li class="accordion-item is-active" data-accordion-item>
Accordion 1
<div class="accordion-content" data-tab-content>
Panel 1. Lorem ipsum dolor
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 2
<div class="accordion-content" data-tab-content>
Panel 2. Lorem ipsum dolor
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 3
<div class="accordion-content" data-tab-content>
Panel 3. Lorem ipsum dolor
</div>
</li>
</ul>
To add to Jatin's answer, the "Open all" function would look like this (one other change besides 'up' to 'down'):
function openAll() {
$('.accroot').each(function () {
var $acc = $(this);
var $openSections = $acc.find('.accordion-item .accordion-content');
$openSections.each(function (i, section) {
$acc.foundation('down', $(section));
});
});
}
I know is a bit late for this, but I came across to this issue today and after expending a few hours on it (kind of new on this), using Jatin's code I create a CodePen with an example. Using a Javascript function that will Expand or Collapse not matter the states of the different Accordions (If there's a mix of open/closes).
For reference see this Codepen
$(document).foundation();
$(document).ready(function() {
$(".toggle-accordion").on("click", function() {
var accordionId = $(this).attr("accordion-id");
$(this).toggleClass("accordions-expanded");
triggerAccordions = document.querySelectorAll(".accordions-expanded");
if (triggerAccordions.length == 0) {
collapseAll();
} else {
expandAll();
}
});
});
function collapseAll() {
$(".accordion").each(function () {
var $acc = $(this);
var $openSections = $acc.find(".accordion-item.is-active .accordion-content");
$openSections.each(function (i, section) {
$acc.foundation("up", $(section));
});
});
};
function expandAll() {
$(".accordion").each(function () {
var $acc = $(this);
var $openSections = $acc.find(".accordion-item .accordion-content");
$openSections.each(function (i, section) {
$acc.foundation("down", $(section));
});
});
};
body {
color: #6a6c6f;
background-color: #f1f3f6;
margin-top: 30px;
}
.container {
max-width: 960px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.accordion-option {
width: 100%;
float: left;
clear: both;
margin: 15px 0;
}
.accordion-option .title {
font-size: 20px;
font-weight: bold;
float: left;
padding: 0;
margin: 0;
}
.accordion-option .toggle-accordion {
float: right;
font-size: 16px;
color: #6a6c6f;
}
.accordion-option .toggle-accordion:before {
content: "Expand All";
}
.accordion-option .toggle-accordion.accordions-expanded:before {
content: "Collapse All";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/what-input/5.1.1/what-input.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<div class="container">
<div class="accordion-option">
<h2 class="title">Accordion Example</h2>
<a class="toggle-accordion accordions-expanded" accordion-id="#accordion"></a>
</div>
<br/>
<br/>
<ul class="accordion" data-accordion="" data-allow-all-closed="true">
<li class="accordion-item is-active" data-accordion-item="">
<a class="accordion-title" data-parent="#accordion">
<span style="padding-left:20px">
<b>Collapsible Group Item #1</b>
</span>
</a>
<div class="accordion-content" data-tab-content="">
<div class="grid-x grid-margin-x">
<div class="cell medium-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum!</p>
</div>
</div>
</li>
</ul>
<ul class="accordion" data-accordion="" data-allow-all-closed="true">
<li class="accordion-item is-active" data-accordion-item="">
<a class="accordion-title" data-parent="#accordion">
<span style="padding-left:20px">
<b>Collapsible Group Item #2</b>
</span>
</a>
<div class="accordion-content" data-tab-content="">
<div class="grid-x grid-margin-x">
<div class="cell medium-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum!</p>
</div>
</div>
</li>
</ul>
<ul class="accordion" data-accordion="" data-allow-all-closed="true">
<li class="accordion-item is-active" data-accordion-item="">
<a class="accordion-title" data-parent="#accordion">
<span style="padding-left:20px">
<b>Collapsible Group Item #3</b>
</span>
</a>
<div class="accordion-content" data-tab-content="">
<div class="grid-x grid-margin-x">
<div class="cell medium-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum!</p>
</div>
</div>
</li>
</ul>
</div>
Good Luck to everyone.