I am having trouble with grid in bootstrap grid. I have empty spaces in a row. this is shown on desktop and on mobile is like .
The code which I am using is
<div class="row">
<div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="image/book image/book1.png" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="image/book image/book2.png" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="image/book image/book3.png" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="image/book image/book4.png" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="image/book image/book4.png" alt="">
</a>
</div>
</div>
I don't really know how I could fix that, so I hope somebody can give me some advice.
You have to set min-height for the columns since the columns have different heights.
.portfolio-item {
min-height: 200px;
}
Change 200px for a minimum that would fit the columns in their respective places.
This is due to different heights on your divs. You have a few possible fixes for this:
Set all divs to equal heights manually.
Use something like https://github.com/liabru/jquery-match-height to set the heights of divs for you. There are different settings you can use such as on a row per row basis.
Use flexbox grids. Unfortunately flexbox isn't widely available yet 😵
Use a mixture of flexbox with JavaScript like this http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback
make sure all the book images are same size...or just set min-height to "portfolio-item" class.
Just add class clearfix after every row
Related
building a web page using Bulma I want to display several events in this way:
<div class="card" style="background: lightgreen;">
<div class="card-header p-4">
<div class="is-flex is-flex-direction-row ">
<div class="has-text-right pr-4 is-one-quarter" style="white-space: nowrap;">
<strong>[1st column]</strong><br/>
See https://codepen.io/baschtl/pen/PobXamm
But I want to have the first column for each "row/line" always have the equal width.
But maybe this would be only possible by using the good, old TABLE element [https://bulma.io/documentation/elements/table/] and not columns or something else, too?
Thanks a lot!
mtemp
You can fix the width of the first column with is-x class which can be is-1 to is-12.
<div class="columns">
<div class="column is-1"></div>
<div class="column"></div>
</div>
I'm not familiar with this framework but this is pretty simple to do in CSS.
You could add a class with width to each first element like this
.width-fix{
width:10rem;
}
Your html (minus white-space:nowrap and added width-fix class):
<div class="card" style="background: lightgreen;">
<div class="card-header p-4">
<div class="is-flex is-flex-direction-row ">
<div class="width-fix has-text-right pr-4 is-one-quarter">
<strong>[1st column]</strong><br/>
Saturday<br /><strong>27th May 2022</strong>
</div>
<div class="pr-4" style="min-width: 80px;">
<strong>[2nd column]</strong><br/>
<a href="#" target="_blank">
<figure class="image is-128x128">
<img class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</a>
</div>
Also keep in mind that using table isn't bad if you actually need a table, so you could also consider that.
This question already has answers here:
Bootstrap Rows and Columns - Do I need to use row?
(4 answers)
Bootstrap 4.0 Grid System Layout not working
(1 answer)
Closed 4 years ago.
I'm building a simple website with gallery. Below code, to my understanding, when the width of the website is of medium devices (768px and up to 992px) should result in showing two columns of photos. However, only one column shows on the screen. I cannot group images in rows since I need them to be responsive and adapt to the device screen' width. What could be the cause of such behaviour?
<div class="container-fluid">
<h1 class="text-center pb-4">Gallery</h1>
<div id="lightgallery" class="text-center no-gutter">
<a data-src="img/img-1.jpg">
<img class="img-fluid col-lg-3 col-md-6 col-sm-12" src="img/img-1.jpg">
</a>
<a data-src="img/img-2.jpg">
<img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-2.jpg">
</a>
<a data-src="img/img-3.jpg">
<img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-3.jpg">
</a>
<a data-src="">
<img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-4.jpg">
</a>
<a data-src="">
<img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-5.jpg">
</a>
<a data-src="">
<img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-6.jpg">
</a>
</div>
</div>
When I set medium columns to col-md-5 they work, but considering bootstrap maxium amount of columns, which is 12, left me with this question.
Col should directly embed inside a row. I believe it should be solved if you change your code to:
<div class="container-fluid">
<h1 class="text-center pb-4">Gallery</h1>
<div id="lightgallery" class="text-center no-gutter row">
<a data-src="img/img-1.jpg" class="col-lg-3 col-md-6 col-sm-12">
<img class="img-fluid" src="img/img-1.jpg">
</a>
I managed to find a solution. Despite my thoughts of not using row, it was needed. I added div with class="row" and another div, one for each picture, with column classes. Below is fixed code:
<div class="container-fluid">
<h1 class="text-center pb-4">Galeria</h1>
<div id="lightgallery">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
<a data-src="img/img-1.jpg">
<img class="img-fluid" src="img/img-1.jpg">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
<a data-src="img/img-2.jpg">
<img class="img-fluid" src="img/img-2.jpg">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
<a data-src="img/img-3.jpg">
<img class="img-fluid" src="img/img-3.jpg">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
<a data-src="img/img-4.jpg">
<img class="img-fluid" src="img/img-4.jpg">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
<a data-src="img/img-5.jpg">
<img class="img-fluid" src="img/img-5.jpg">
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
<a data-src="img/img-6.jpg">
<img class="img-fluid" src="img/img-6.jpg">
</a>
</div>
</div>
</div>
</div>
I am designing the asp.net bootstrap form. I have one div in it.
Code:
<div id="gallery">
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a>
<a href="http://expogr.com/" target="_blank">
<img src="images/layout/777x282-africa-1.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a>
<a href="addlisting.aspx">
<img src="images/layout/becomeAMember.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a><a href="dubaiexhibitions.aspx">
<img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" width="1000" title="" alt=""
rel="a" />
</a>
</div>
Css:
#gallery
{
position: relative;
height: 282px;
}
I wanted to make this div responsive using Bootstrap grid system. I am confused with div ie. How to apply grid system on div?
<div class="row">
<div class="col-sm-12">
<div class="gallery">
------contents------
</div>
</div>
</div>
Is it like this? I am new to Bootstrap. I just wanted to know how to apply grid system to div.
You can use the bootstrap grid like this.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="http://expogr.com/" target="_blank">
<img src="images/layout/777x282-africa-1.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="addlisting.aspx">
<img src="images/layout/becomeAMember.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="dubaiexhibitions.aspx">
<img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
</div>
</div>
You can follow this link for further details. Bootstrap Grid
A general way to use grid system is
<div class="container">
<div class="row">
<div class="col-sm-3">Content1</div>
<div class="col-sm-3">Content2</div>
<div class="col-sm-3">Content3</div>
<div class="col-sm-3">Content4</div>
</div>
</div>
Every column will have equal width and it will act responsive. You don't need to set height or width of divs inside these columns unless you intentionally want it. If you can provide more details what exactly do you want , i can try to help more.
you can use the grid system of 12 spans and as many rows as you want as you have different spanning of images for different rows like this:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12"></div>
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" alt=""/>
</a>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">...</div>
<div class="col-xs-6 col-md-6">...</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">...</div>
<div class="col-xs-6 col-md-6">.....</div>
</div>
.....
.....
and so on
</div>
I have a grid of images. Within this grid I have albums. The albums are displayed as a single image (images-album-cover) until they are expanded, after which the entire album is displayed among the rest of the images (images-album-images).
Both images-album-cover and images-album-image have the class images-image-col. images-image-col is also the class of the rest of the non-album images.
I've added a border (with a div, not an actual border) to the bottom of each album image to indicate which images are part of an album.
I need to be able to do a few things:
select each images-album-cover OR images-album-image that is on the left side of the grid.
select each images-album-cover OR images-album-image that is on the right side of the grid.
select each images-album-image that is the last image in an album.
So far I have been able to select the left images and right images when the grid has only non-album images, but I'm at a loss of how to handle this with the albums which is when I actually need it. Not only am I unable to select the nth-child only when it matches a certain class, but when the grid has any albums in it at all nth-child stops working as it was with no albums even though I'm trying to target all images (images-image-col)
Heres a fiddle of it working (on large screens) without albums.
As soon as I started with the albums, I haven't even been able to select just the first images-album-cover, which i tried with this:
&:nth-child(2n+1) {
.images-album-cover {
outline: 1px dashed mediumvioletred;
}
}
and that doesn't seem to do anything
here is the HTML for the album
<div class="col-xs-6 col-sm-4 images-image-col images-album-cover open">
<a class="thumbnail image images-image-thumbnail">
<img>
<div class="album-label">
<figcaption>asdfasf <span>(5)</span></figcaption>
</div>
</a>
<div class="images-album-cover-bar"></div>
</div>
<span id="gallery-detail-22">
<div class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
<div class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
<div class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
<div class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
<div class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
</span>
I'm open to a JS solution if you guys think that would be better but in any case i'd still like to know if this is possible.
Try this:
:nth-child(2n+1).images-album-cover {
outline: 1px dashed mediumvioletred;
}
Have you tried to use something like:
&:nth-child(2n+1) {
&.images-album-cover {
outline: 1px dashed mediumvioletred;
}
}
BTW, per your code seems that you're using SASS, I'm answering taking that for granted.
The problem is the wrapper
<span id="gallery-detail-22"></span>
which is messing up the nth-child numbering. I suggest you take that out. If you need to identify which album images are associated with an album cover so that you can show/hide them, perhaps add a data attribute to each one, such as
data-album="gallery-detail-22"
so your album html would be
<div class="col-xs-6 col-sm-4 images-image-col images-album-cover open">
<a class="thumbnail image images-image-thumbnail">
<img>
<div class="album-label">
<figcaption>asdfasf <span>(5)</span></figcaption>
</div>
</a>
<div class="images-album-cover-bar"></div>
</div>
<div data-album="gallery-detail-22" class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
<div data-album="gallery-detail-22" class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
<div data-album="gallery-detail-22" class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
<div data-album="gallery-detail-22" class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
<div data-album="gallery-detail-22" class="col-xs-6 col-sm-4 images-image-col images-album-image">
<a class="thumbnail image images-image-thumbnail">
<img>
</a>
<div class="images-album-image-bar"></div>
</div>
All divs with the class images-image-col would be siblings of each other, so .images-image-col:nth-child(2n+1) will work.
Still brand new to CSS, so please be gentle ;). I have a grid setup like the following:
<div class="row">
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x150" class="img-responsive">
</a>
</div>
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x150" class="img-responsive">
</a>
</div>
</div>
The problem is when I actually fill the src with an image, I want the image to actually compeltely "fill" the placeholder no matter what the image size is. I guess in other words, a ratio should be applied so it fills the 150x150? The width (max-width: 100%) is fitting, but the height is auto. I've tried adjusting height, width, max-height, etc. with no success.
I'm also new to bootstrap. I must have been messing with this longer than I should have but basically here is what I found works
You want to have a custom stylesheet that you load after bootstrap's css so you can make custom adjustments without destroying the original css. You can then make the adjustments:
.thumbnail-image {
overflow: hidden;
height: 150px;
}
.thumbnail-image > img {
width: 100%;
}
So then I sandwiched the image inbetween a div with the "thumbnail-image" class in the HTML.
<div class="row">
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image"><img src="http://placehold.it/150x150"></div>
</a>
</div>
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image"><img src="http://placehold.it/150x150"></div>
</a>
</div>
</div>
As column sizes adjust at the breakpoints you would have to do some similar adjustments regarding the custom height property of the custom .thumbnail-image class but other than that this is what I came up with!
Try adding height and width attributes within the image tag like so:
<img src="..." height="150" width="150">
Not sure how this'll interact with bootstrap's responsive image class. Best practice would be to actually insert an image which has the correct dimensions.