I am trying to make sticky div inside div col-md-3 , it working fine if I don't use col-md-3 class, please tell what I am doing wrong,
.sticky {
position: sticky;
top: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class=" col-3">
<div class="sticky" style="border:1px solid; color:red">sticky</div>
</div>
<div class="col-9" style="height:1000px; border:1px solid; background:red">
</div>
</div>
The sticky position is happening due to parent div (.col-3) because it have display flex property with this it's getting height equal to the div (col-9).
In short:
<div style="display: flex;">
<div class="1"></div>
<div class="2" style="height="500px;"></div>
</div>
Now in above HTML the div class 1 also get the height = div class 2 (500px).
Any element(position:sticky) inside div class 1 is sticky for next 500px.
If any element is sticky then it also has same defined parent height.
Related
I have created a 3 column grid which contains some text and an image in between using Bootstrap 4 for the grid system.
I've noticed that although my image has a img-fluid class assigned the image overflows outside the div.
Can anyone explain the reason for this?
HTML
<div class="row">
<div class="col blue-bg-outter">
<div class="col blue-bg" style="height: 300px;">
<!-- start of content -->
<div class="row">
<div class="col">
<h2> Some line</h2>
</div>
<div class="col img-col">
<img src="https://purepng.com/public/uploads/large/51508089516arw4tqfangou1wmvwzihlw7hxnzjujpulweq1otwrsdcsaxc5kvmu1crkpcyfxezyx4dmcvkbgg5w7oc1sioxib4j044tjwbfcyu.png" alt="" class="img-fluid">
</div>
<div class="col">
<h2> Another line</h2>
</div>
</div>
</div>
</div>
</div>
CSS
.img-fluid {
max-height: 100vh;
}
.blue-bg-outter {
padding: 60px;
}
.blue-bg {
background: #3ad7f7;
}
Might be easier to see on an actual page, please view the CodePen.
Because you have set a height on a parent div to 300px, if you remove height it works. Or you can set the height of img-fluid to 300px as #august suggested:
<div class="col blue-bg">
https://codepen.io/anon/pen/oJKvLp
Or you can keep the height and stop the image overflowing like this:
.blue-bg
{
overflow: hidden;
}
I have a bootstrap grid layout but the row is not occupying 100% width. I am using Bootstrap 4 alpha 6. Here is the HTML:
<div class="container-fluid">
<h1 class="center-text" id="heading">[Enter Heaading Here]</h1>
<div class="container">
<div height="100px" class="row border-show">
<div class="col-4" id="one"></div>
<div class="col-4" id="two"></div>
<div class="col-4" id="three"></div>
</div>
</div>
</div>
Here is the CSS:
.center-text{
text-align: center;
}
#heading{
padding: 60px;
}
.border-show{
border-style: solid;
border-color: black;
}
In case someone else comes across this and the answer doesn't solve their problem, my issue that was causing this was because I didn't realize I was adding a row and trying to set up columns in a Bootstrap navbar. navbar already has a grid-like system in it by default, so it seems you are pushing it over the edge if you try to add columns inside of it. They aren't necessary anyway.
So if this answer doesn't solve your problem, check to see if you are inside of another Bootstrap component that already handles spacing. You may be trying to double-delimit your content!
Remove it from the container. The container is not 100% width, and shouldn't be nested in another container.
The container class has this effect.
<div class="container">
<div class="row">
<div class="col-12">
div into <b>container</b> class
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
div into <b>container-fluid</b> class
</div>
</div>
</div>
This code will generate following image:
In my case even container-fluid also didnot work because I used row class with the container-fluid in the same div. So, I removed the row class from the parent div and inside that I created a child div and used row class. Then it worked.
<div class="container-fluid row">
<div class="col-12">
didn't work
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
worked
</div>
</div>
</div>
I have a div container of width and height 420px inside that container i have 4 small div's with width 140px and height 140px but 2nd divs height is 170px.if i apply css float property float:left to all the divs except container div.
Q1).where will the 4th div sit.
Q2).if i want the 4th div to come below 1st div how can i do it without using position:absolute or relative.
<div class="container">
<div class="section1"></div>
<div class="section2"></div>
<div class="section3" ></div>
<div class="section4"></div>
</div>
css
.container{width:420px;height:420px;border:1px solid black;}
.section1{width:140px;height:140px;background-color:green;float:left;}
.section2{width:140px;height:170px;background-color:yellow;float:left;}
.section3{width:140px;height:140px;background-color:red;float:left;}
.section4{width:140px;height:140px;background-color:orange;float:left;}
Here is the link for my code JSFiddle
Define your .section4{clear:left;}
Demo
.container{width:420px;height:420px;border:1px solid black;}
.section1{width:140px;height:140px;background-color:green;float:left;}
.section2{width:140px;height:170px;background-color:yellow;float:left;}
.section3{width:140px;height:140px;background-color:red;float:left;}
.section4{width:140px;height:140px;background-color:orange;float:left;}
.section4{clear:left;}
<div class="container">
<div class="section1"></div>
<div class="section2"></div>
<div class="section3" ></div>
<div class="section4"></div>
</div>
2nd option your can try to display:inline-block as like this
.container{width:420px;height:420px;border:1px solid black;font-size:0;}
.section1{width:140px;height:140px;background-color:green;display:inline-block;vertical-align:top;font-size:12px;}
.section2{width:140px;height:170px;background-color:yellow;display:inline-block;vertical-align:top;font-size:12px;}
.section3{width:140px;height:140px;background-color:red;display:inline-block;vertical-align:top;font-size:12px;}
.section4{width:140px;height:140px;background-color:orange;display:inline-block;vertical-align:top;font-size:12px;}
<div class="container">
<div class="section1"></div>
<div class="section2"></div>
<div class="section3" ></div>
<div class="section4"></div>
</div>
Add clear: both to your 4th div:
https://jsfiddle.net/8kyed4fx/1/
I am trying to make the <div> with class col-md-6 to be always positioned in the right end of the row even while scrolling horizontally.Here is an illustration.
<div class="row">
<div id="div1" class="col-md-6">.col-md-6</div>
<div id="div2" class="col-md-6">.col-md-6</div>
</div>
<div class="test">LARGER DIV
</div>
When we scroll horizontally i want div2 to remain in the last 6 columns of the window Which is not happening.The div itself is going out of the view.
Can you please specify or give some references to achieve this?I'm using Bootstrap-v3.3.0
You can set the second div to absolute position, and make it keeps the right always at the border of the screen using some jQuery.
CSS:
[class*="col-"] {
background: #F2FAFF;
border: 0px solid #B1D8ED;
display:inline-block;
}
.test{
width:2000px;
background: #F2F79F;
border: 0px solid #B1D8ED;
}
#fixed{
position:absolute;
}
HTML:
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div id="fixed" class="col-md-6">.col-md-6</div>
</div>
<div class="test">
LARGER DIV
</div>
Javascript:
$(window).scroll(function(){
$('#fixed').css('right', $(this).scrollLeft() * -1);
});
Example:
http://www.bootply.com/yeKqMVA91r
Why not just wrap the larger div in a scrollable element like so:
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-md-12" style="overflow:scroll;">
<div class="test">LARGER DIV</div>
</div>
</div>
I'm trying to create a certain layout using bootstrap:
But unable to achieve 2 main principles in my layout:
in the first row, div 2 should be 'sticked' to the bottom of it's column (relayed on div1's height).
in the second row, i have 3 divs i want to align at center (while using bootstrap grid system!)
edit: regarding the 2nd row: i tried using 3 columns lets say 3-col for each div (since i want the margin on the right and left) but i remain with an offset of 3 more which i cant divide equally.
so i decided changing it to col-4 with a margined container, that's my solution to it:
<div class="container" style="padding: 0 80px;">
<div class="row">
<div class="col-xs-4">
<div style="border:solid 1px black;">Div1</div>
</div>
<div class="col-xs-4">
<div style="border:solid 1px black;">Div2</div>
</div>
<div class="col-xs-4">
<div style="border:solid 1px black;">Div3</div>
</div>
</div>
</div>
http://jsfiddle.net/tomico/y7xesq6v/
Hope anyone could explain how can i handle this 2 issues
Would this suffice?
.div1{position:relative;margin-top:20px;float:left;}
.div2{position:absolute;float:left;right:0px;top:40px;}
As for the 3 div row, i would wrap those three up with another div, to center just that one div containing the other three divs.
// Classes
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as mixins
.element {
.center-block();
}
from : Bootstrap Source
You could just use a margin-top with % for .div2
.div2 {margin-top:50%}
For your second issue what's been said above will work,
here's how the code should look:
<div class="row">
<div class="wrap">
<div class="col-xs-4">
<div style="border:solid 1px black;">Div1</div>
</div>
<div class="col-xs-4">
<div style="border:solid 1px black;">Div2</div>
</div>
<div class="col-xs-4">
<div style="border:solid 1px black;">Div3</div>
</div>
</div>
then add CSS for wrap
.wrap {width:50% ; margin:0 auto } //or 800px or whatever