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>
Related
I've made bootstrap cards that appear on two different pages. One on the landing page which I want to increase the spacing and one on the books page which I want to increase the width of the cards. Here's the code that I've written and used in both pages. The only thing that I've changed is on the 6th line from '...col-lg-3' to '...col-lg-2'. If anyone can assist me in adding the spacing and increasing the with of the card, help me if you can. d-flex justify-content-evenly doesn't work when i use col-lg-3.
<section id="about" class="ts-block" >
<div id="cards_landscape_wrap-2">
<div class="container " style="width:70%">
<div class="row d-flex justify-content-around">
#foreach($products as $product)
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer ">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div>
#endforeach
</div>
</div>
</div>
</section>
Try including d-flex justify-content-around to a direct parent containing the cards instead of
<div class="row d-flex justify-content-around">. And add margin to the card.
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 d-flex justify-content-around">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer m-2">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div
I'd like to order my bootstrap cards thus:
My code is this:
<div class="row ">
<div class="col-12 col-md-6 mb-1" style="height: 75vh;">
<div class="map svelte-xu5vn1" id="map">
...
</div>
<div class="col-12 col-md-6">
<div class="col-6">
<a rel="prefetch" href="communes/xxx/objects/Cykelhus">
<div class="card mr-1 mb-1">
<div class="card-body text-center">
<img class="card-img-top" src="img/300x300/cykelhus.thumb.jpg" alt="(image)">
<p class="card-text">Cykelhus</p>
</div>
</div>
</a>
</div>
<div class="col-6">
<a rel="prefetch" href="communes/brf_masthugget/objects/Sedumtak">
<div class="card mr-1 mb-1">
... as per the above
But I get this result:
What do I need to change?
Fixed it, I needed to add a <div class="row"> before the first of the cards:
<div class="row">
<div class="col-6">
<a rel="prefetch" href="communes/xxx/objects/Cykelhus">
...
And close it of course.
hmm, sure I'd already tried that ...
guys so I'm pulling in content from a JSON file to populate a grid of images. when the data loads it displays all the images in 1 column instead of in a grid. ideally, i would like a 4 wide image grid. All the CSS for this part of from default Bootstrap 4 values
HTML
<div id="UHD" ng-controller="Content-folders-4K">
<div id="UHD-frames" class="d-flex">
<div ng-repeat="friend in UHD" class="row">
<div id="img-frame" class="col-md-3 col-sm-6 col-xs-12">
<a href="/4k/{{friend.name}}.html">
<img alt="{{friend.name}}" src="assets/images/4k-thumbs/{{friend.name}}.jpg" class="img-fluid">
</a>
<p class="font-weight-bold text-center">{{friend.name}}</p>
</div>
</div>
</div>
</div>
Current result
Expected (simulated) result
I think You didn't wrap Your Grid with container and row class
Follow below example
<div class="container">
<div class="row">
<div class="col"> 1 of 2 </div>
<div class="col"> 2 of 2 </div>
</div>
</div>
**Wrap Your column div with container and row class **
You want to iterate the columns instead of the row...
<div id="UHD" ng-controller="Content-folders-4K">
<div id="UHD-frames" class="d-flex">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12" ng-repeat="friend in UHD">
<a href="/4k/{{friend.name}}.html">
<img alt="{{friend.name}}" src="assets/images/4k-thumbs/{{friend.name}}.jpg" class="img-fluid">
</a>
<p class="font-weight-bold text-center">{{friend.name}}</p>
</div>
</div>
</div>
</div>
here's the code I used to get it to work.
<div id="UHD" ng-controller="Content-folders-4K" class="row">
<div ng-repeat="friend in UHD" class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<a href="{{friend.link}}">
<div id="tiles" class="tiles">
<img src="thumbs/111/{{friend.name}}.png" alt="" />
</a>
<p class="text-center">{{friend.name}}</p>
</div>
</div>
</div>
This question already has an answer here:
Bootstrap 4.0 Grid System Layout not working
(1 answer)
Closed 4 years ago.
The class .col-6 is not working propely, when below 575px screen size, the cards gets a weird aspect. How to fix it?
Click on Run code snippet->Full Page, and resize the screen to below 575px of width:
.divCard{
float:left;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mx-md-2">
<div class="card-group col-lg-8">
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
</div>
<div class="col-12 col-lg-4" style="background-color: red"></div>
</div>
</div>
Wrap the content of your class col-lg-8 inside of a row class.
As col-*-* have default margins which is causing the issue.
Please try the below code.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mx-md-2">
<div class="card-group col-lg-8">
<div class="row">
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 divCard">
<article class="card">
<a href="#">
<img class="card-img-top" src="https://imgjapan.com/wp-content/themes/img_jpn/static/img/global-locations/img-singapore.jpg">
</a>
</article>
</div>
</div>
</div>
<div class="col-12 col-lg-4" style="background-color: red; height:200px"></div>
</div>
</div>
I noticed some errors and here is how to fix it. I will provide simplified version to show where the problem is.
According to bootstrap you need to have the following scheme in your layout.
container → row → col → row → col and so on.
Your layout has container → row → col → col and i suppose this is the problem.
Plus, it is really helpful to add borders so you can easily see the layout and how it behaves.
I hope this solves your problem.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
<article class="card w-100">1</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
<article class="card w-100">2</article>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
<article class="card w-100">3</article>
</div>
</div>
</div>
</div>
</div>
I'm trying to make a site for my new documentary and have found Bootstrap to be very helpful but I'm running into a bit of a problem:
I have 12 images, I'd like them to be arranged into 3 rows of 4, but make sure that with smaller screens this works out, so maybe on a mobile device it is only 1 image per column (or two).
Here is the site as is (no margins) http://athomewhileaway.org/gallery.html
Any ideas? Thanks...
Please try this one
HTML
<div class="row no-gutter">
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<img src="" alt="">
</div>
</div>
if you need one photo in small screen then you can remove col-xs-6 class from related div
CSS
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
This CSS property needs to remove space between the columns (Twitter Bootstrap set gutter width in default).
Thanks!
Note the xs (extra small) and sm (small) You can use the .col-xs-6 (row of 2) or .col-xs-12 (single colum) for phones, and .col-sm-6/.col-sm-12 for tablet, up to 768px, I believe. If you provide a fiddle I will hook you up with a better solution. Learn more here.
On extra small devices (most phones):
<div class="container">
<div class="row">
<div class="col-xs-6">
#Your Stuff
</div>
<div class="col-xs-6">
#Your Stuff
</div>
</div>
</div>