When using bootstrap 3 and Desandro's Masonry, I'm getting stuck on a weird issue in which it seems that once Masonry is called, an extra 10px is added to the width of my images, causing the masonry to go from a desired 3 columns to 2 (but still working properly in 2). My best guess is that this must have something to do with Bootstrap's new .img-responsive class.
The issue can be seen here: http://jsfiddle.net/68qxE/2/ (just be sure to expand the width of the result), but if you'd prefer:
Here is my HTML:
<div class="container">
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/260/large/tumblr_msnl3ayMxU1rsnzy2o5_1280.jpg" />
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/257/large/24ekOAH.jpg" />
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/248/large/tumblr_mqeom2a2oU1qbltjyo2_1280.jpg" />
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/244/large/3CjBFlN.jpg" />
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/241/large/OoRsR42.gif" />
</div>
</div>
Here is my Javascript:
$(document).ready(function(){
var $container = $('.container');
$container.imagesLoaded( function() {
$container.masonry({
itemSelector : '.post-box',
columnWidth : '.post-box',
transitionDuration : 0
});
});
});
And here is my CSS:
.img-thumbnail {
padding: 10px;
}
.post-box {
margin: 15px 0 15px 0;
}
Now when the page is originally loaded, and before any of the javascript takes place, the width of col-lg-4's are 350px. But as soon as the javascript is called, the width of the col-lg-4's jumps up to 360px, which I believe is what's causing this to go from a 3-column layout down to a 2-column layout.
The answer was further discussed and solved here: https://github.com/desandro/masonry/issues/405
I don't think it's caused by imagesLoaded. The issue is that there's a padding on .container.
Why don't you just reset that to 0?
.container {
padding: 0px;
}
Related
see here:
https://getbootstrap.com/docs/4.0/utilities/flex/#direction
items stretch to full width, but that is not really my desired outcome.
I want the items to keep their original size
what is the proper way of doing that?
Wrap the flex-column element with a col-auto element so that it takes as much space as it needs.
.bd-highlight {
background: #eee;
border: 1px solid
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-auto">
<div class="d-flex flex-column bg-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
</div>
</div>
You may use a container also.
Even better, use a d-flex element to wrap the flex-column element. But if you do, remove the d-flex and flex-column classes from the element itself and instead use w-auto.
.bd-highlight {
background: #eee;
border: 1px solid
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex">
<div class="w-auto bg-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
</div>
My code is given below
<div class="row align-items-center">
<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
One of three columns
</div>
<div class="col-12 col-xl-6 col-lg-6 col-md-12 col-sm-12">
One of three columns
</div>
</div>
CSS look like below
.row {
height: calc(70vh - 60px);
}
When I check-in mobile or small device grid item put some space in upper side and lower side. screenshot attached below
you can see space. I want to make div without space.
How can I?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div style="height: 200px;background-color: sandybrown;" class="d-flex align-items-center justify-content-center">
<div class="row no-gutters d-flex bg-primary">
<div class="col-12 col-md-6 bg-info">on small 12-cols and medium or above 6-cols</div>
<div class="col-12 col-md-6 bg-warning">on small 12-cols and medium or above 6-cols</div>
</div>
</div>
if you want no padding, no margin only on small screen, you can use media query in scss
#media (max-width: 576px) {
margin: 0px; padding: 0px
}
this is simple. I'm trying to align-items-bottom a gear svg image to the bottom center of a div. However, it always keeps at the top of the div.
I tried both align-items-center and also align-bottom options.
What happens
How it should be
.gear {
height: 50px;
}
.banner {
height: 70px;
}
<footer>
<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-bottom">
<img class="gear d-flex" src="/assets/gear.svg">
</div>
</footer>
There is no align-items-bottom class. The class name is align-items-end..
<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-end">
<img class="gear d-flex" src="//placehold.it/300x70">
</div>
https://www.codeply.com/go/ub6hNpd9TL
Rows and column are your friends in Bootstrap.
So, create a pair, put your image/SVG inside, apply the class d-flex to the column and mt-auto (margin-top:auto) to the image.
Click the "run code snippet" button below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<footer>
<div class="container-fluid bg-warning banner d-flex justify-content-center">
<div class="row" style="height: 60px;">
<div class="col d-flex">
<img class="gear mt-auto" src="https://placehold.it/30">
</div>
</div>
</div>
</footer>
I am trying to make a packery layout that uses the the width of an image. Whether it is 400px or the width of the entire container, I would like to fill up the space with my images. I don't want any whitespace either. Can someone tell where I am going wrong. Code and codepen are below.
<div class="grid" style="width:1200px; height:100%; background:salmon">
<!-- <div class="grid-sizer"></div> -->
<div class="grid-item one"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:200px" /></div>
<div class="grid-item two"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:400px"/></div>
<div class="grid-item three"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:300px"/></div>
<div class="grid-item one"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:600px"/></div>
<div class="grid-item two"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:900px"/></div>
<div class="grid-item three"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:300px"/></div>
</div>
$('.grid').isotope({
// options
layoutMode: 'packery',
packery: {
columnWidth: '.grid-item'
},
itemSelector: '.grid-item',
percentPosition: true
});
http://codepen.io/Jesders88/pen/GrpqQr
I had the exact same issue and switched to a packery package.
Take a look at this link http://packery.metafizzy.co/
When I tried using isotope with a packery layout mode it didn't work: http://demoserver.co.za/test2.html
When I switched to the above it worked great: http://demoserver.co.za/test3.html
if i have:
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
Some Element....
</div>
<div class="span4">
Other Element
</div>
</div>
</div>
With this code i have some margin from left and right window borders. How can eliminate these margins?
Thanks for your support
If i understand your question correctly, I believe you want this:
.container-fluid {
padding: 0px;
}
Also if you are using responsive bootstrap you will also want this:
#media (max-width: 797px) {
body {
padding-left: 0px;
padding-right: 0px;
}
}
Edit: here is a js fiddle.
The effect you are seeing is because of the container’s padding.
You can change the container’s default padding with the built-in Bootstrap 4 spacing utility classes.
To remove the padding, add p-0 to the container:
<div class="container-fluid p-0">
<div class="row">
<div class="col-8">
Some Element....
</div>
<div class="col-4">
Other Element
</div>
</div>
</div>
Using the built-in utility classes has the benefit of keeping your CSS lean and it also does not modify the default container-fluid class definition.