I am trying to remove white space between Navigation bar and the carousel in Bootstrap. I've found a lots of answer but none worked for me. Please take a look at the my code if I am doing anything wrong.
jsp for carousel
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="3000" id="bs-carousel">
<div class="overlay"></div>
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
</div>
<div class="item slides">
<div class="slide-2"></div>
</div>
<div class="item slides">
<div class="slide-3"></div>
</div>
</div>
css file
.fade-carousel {
position: relative;
height: 100vh;
padding-top: 0px;
}
.fade-carousel .carousel-inner .item {
height: 100vh;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
.navbar {
margin-bottom: 0px;
}
/* Responsiveness of the link bar */
#media ( min-width : 767px) {
.navbar-default .navbar-nav>li>a {
color: #4e0300;
}
.navbar-nav>li.dropdown.open>a {
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
min-width: 100%;
}
}
Have you tried applying negative padding/margin?
padding: -5px;
Related
I have the following layout
Example
Im having a little issue tho when I rezie the window the overlap with the main content
Example of the issue
How do I prevent this issue and retain a padding ?
Here is my html and Css
<body>
<div class="sidebar">
test
test
test
</div>
<div class="container col-xxl-8 px-4 py-5 main_gradient" id="fade">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 shadow-lg main_gradient " style=" background-color:rgb(240, 240, 255)">
</div>
</div>
</body>
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow-y: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
I tried to add padding however this did not solve the issue
Two main things to consider:
Bootstrap col should always be wrapped in a row.
Change position: fixed; (this broke Bootstrap grid) to position: sticky;. Also, add height: 100vh;.
See the snippet below.
.sidebar {
margin: 0;
padding: 0;
background-color: #f1f1f1;
position: sticky;
height: 100vh;
overflow-y: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<body>
<div class="row m-0">
<div class="col-xxl-4 sidebar">
test
test
test
</div>
<div class="col-xxl-8 px-4 py-5 main_gradient" id="fade">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 shadow-lg main_gradient" style="background-color:rgb(240, 240, 255)">
</div>
</div>
</div>
</body>
I need help with this site: http://www.jsdkqwoj.eu/
In mobile drop down menu goes under the div. Tried z-index:9999 for the header / topnav elements and z-index:-9999 to div. Not help. Also tried this Dropdown menu hidden under div and it is not helping.
I googled yesterday few hours and tried many things, and not helping. I also would like to get image top of the page under the header, but i am satisfied of the menu fix.
I linked the page but here is code of the top nav/header and div.
Summary: I want menu open over the div and image shows behind the menu dropdown. I can do dropdown menu like pushing down the div, but that is not what i want.
CSS
header {
background-color: rgba(0,0,0,0.7);
width: 100%;
height: 100px;
}
.topnav {
overflow: hidden;
background-color: rgba(0,0,0,0.7);
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
display: block;
height: 60px;
}
.topnav2 a {
text-align: center;
}
.topnav a.icon {
display: block;
position: absolute;
right: 0;
top: 0;
height: 90px;
width: 90px;
}
.topnav2 a:hover {
background-color: rgba(0,0,0,0.4);
color: #ff6000;
}
TOPNAV
<h2 class="black">OSKARI ALAJÄRVI</h2><p class="light">Portfolio</p>
<div class="topnav2" id="myLinks">
Home
Blog
Contact
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="hamburger_bars" onclick="myFunction2(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</i>
</a>
</div>
DIV
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-sm pt-5 pb-5">
<div class="etusivun_teksti" data-aos="fade-up">
<?php if (have_posts()) : while(have_posts()) : the_post();?>
<?php the_content();?>
<?php endwhile; endif;?>
</div>
</div>
<div class="col-sm etusivun_kuva"></div>
</div>
</div>
</div>
.topnav2{
position:relative;
z-index:1;
}
Add this to your css. Hope this works
Im using carousel on my website, and it's somehow not aligned with row, but is instead margined like 40px to the right
I've tried using margin:0, margin-left:0, but nothing works.
Also everytime it scrolls through next images, it gets thrown out of a row for some reason.
Any help?
my html code
<div class="container">
<div class="row">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="col-md-4">
<div class="fff">
<div class="thumbnail">
<img src="random img" alt="">
</div>
<div class="caption">
<h4>random caption</h4>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
my css code
img {
max-width: 100%;
}
.thumbnails li > .fff .caption {
background: #fff !important;
padding: 10px
}
ul.thumbnails {
margin-bottom: 0px;
}
.caption h4 {
color: #444;
}
.caption p {
color: #999;
}
li {
list-style-type: none;
}
#media (max-width: 767px) {
.page-header, .control-box {
text-align: center;
}
}
#media (max-width: 479px) {
.caption {
word-break: break-all;
}
}
Add this CSS Rule:
ul.thumbnails {
padding:0;
}
hope this helps...
Use :
body {
margin:0;
}
.thumbnails {
padding: 0;
}
I'm trying to put a down chevron to my carousel but the chevron appears outside of the carousel container. I want to have something like this :
http://www.yummygum.com
my HTML code:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-rounded" src="images/biz%20bznner.png" alt="First slide">
<div class="container ccontainers">
<div class="carousel-caption">
<h1 class="animated rubberBand 1">You have a project? Let Us Do it for you</h1>
<h3 class="animated bounceInLeft">We will do your projects with the best prices</h3>
<p><a class="btn btn-lg btn-primary animated shake 1" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
</div>
<a class="chevron-down" href="#myCarousel" role="button">
<span class="glyphicon glyphicon-chevron-down" aria-hidden"true"></span>
</a>
</div>
my CSS:
.carousel-control.right, .carousel-control.left {
background-image: none;
}
.carousel .item {
height: 100vh;
margin-bottom: 60px;
}
.carousel {
height: 100vh;
width:100%;
}
.carousel-caption {
z-index: 10;
margin-top: 0%;
margin-bottom: 5%;
}
.carousel-caption h3 {
padding: 0.5em;
animation-delay: 0.5s;
}
.chevron-down{
**margin-bottom:100px** //THIS DOES NOT WORK
margin-left: 50%;
font-size: 30px;
}
.carousel-caption a{
background-color: orangered;
border-color: darkred;
margin-top: 1em;
animation-delay: 2s;
}
.carousel-caption h1 {
text-align: center;
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
animation-delay: 0s;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 100vh;
}
so in the .chevron-down class margin left works but when I try to vertically move the chevron it does not do anything.. what is the correct way of doing this?
You can do something like this:
.chevron-down {
font-size: 30px;
position: relative;
bottom: 100px;
}
CODEPEN
i'm working on bootstrap 2.3.2 and i want to position an image at the bottom of a viewport div, but unable to do so.i want that the secondlayer image will remain at the bottom of viewport div in every device. How can i achieve this.
Here is my code for carousel:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="bgImage">
<img src="http://placehold.it/1280x600" alt="First slide">
</div>
<div class="header-text">
<div class="text-center">
<div class="row-fluid">
<div class="span6 offset3">
<div class="firstlayer">
<img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-text.png">
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="secondlayer">
<img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-bottomImage01.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Here is my CSS:
.carousel-indicators .active {
background-color: #2980b9;
}
.carousel-inner .item .bgImage img {
width: 100%;
min-height: 100vh;
}
.carousel-control.left,
.carousel-control.right {
opacity: 1;
filter: alpha(opacity=100);
background-image: none;
background-repeat: no-repeat;
text-shadow: none;
}
.carousel-control.left span {
padding: 15px;
}
.carousel-control.right span {
padding: 15px;
}
/* Carousel Header Styles */
.header-text {
position: absolute;
top: 20%;
left: 1.8%;
right: auto;
width: 96.66666666666666%;
color: #fff;
}
.text-center {text-align:center;}
.firstlayer {margin-top:180px;}
.secondlayer {margin-top:175px;}
To get the secondlayer div positioned at the bottom of the viewport, it has to be positioned absolutely. See the revised code of your example:
.carousel-indicators .active {
background-color: #2980b9;
}
.carousel-inner .item .bgImage img {
width: 100%;
min-height: 100vh;
}
.carousel-control.left,
.carousel-control.right {
opacity: 1;
filter: alpha(opacity=100);
background-image: none;
background-repeat: no-repeat;
text-shadow: none;
}
.carousel-control.left span {
padding: 15px;
}
.carousel-control.right span {
padding: 15px;
}
/* Carousel Header Styles */
.header-text {
position: absolute;
top: 20%;
left: 1.8%;
right: auto;
width: 96.66666666666666%;
color: #fff;
}
.text-center {text-align:center;}
.firstlayer {margin-top:180px;}
.secondlayer {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.secondlayer img {
max-width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="bgImage">
<img src="http://placehold.it/1280x600" alt="First slide">
</div>
<div class="header-text">
<div class="text-center">
<div class="row-fluid">
<div class="span6 offset3">
<div class="firstlayer">
<img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-text.png">
</div>
</div>
</div>
</div>
</div>
<div class="secondlayer">
<img src="http://projects.flashonmind.in/jaldiad/wp-content/uploads/2015/08/slider01-bottomImage01.png">
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>