This question already has answers here:
`col-xs-*` not working in Bootstrap 4
(6 answers)
No img-responsive in Bootstrap 4
(7 answers)
Missing col-xs sizes using bootstrap 4 [duplicate]
(1 answer)
Closed 5 years ago.
I'm trying to display images in a container, but i have a problem when resizing the browser window: Before going from 6 to 4 items, it stays at 6 items per row, but now they overlap
Here is what i'm talking about: https://www.bootply.com/render/dKyKQWIL9j
The images have to stay a fixed size (160x230) and there should always be a margin of 7 at top/bottom and some margin inbetween the items in a row (just not a margin on the outer left and right, so the images allign perfectly in the container)
Here is my code:
<div class="container" style="border:1px solid green">
<div class="row">
<div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
<a href="#" class="d-block mb-6">
<img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
<a href="#" class="d-block mb-6">
<img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
<a href="#" class="d-block mb-6">
<img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
<a href="#" class="d-block mb-6">
<img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
<a href="#" class="d-block mb-6">
<img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
<a href="#" class="d-block mb-6">
<img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
<a href="#" class="d-block mb-6">
<img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
</a>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2" style="margin-top:7px;margin-bottom:7px;border:1px solid red">
<a href="#" class="d-block mb-6">
<img class="rounded img-fluid" src="http://via.placeholder.com/160x230.jpg" width="160" height="230">
</a>
</div>
<!-- etc... -->
</div>
</div>
(The solid borders are just there for testing)
Any help is greatly appreciated. I'm kind of new to css and html, but i did my best reading the bootstrap documentation of their grid system, but i couldn't find anything in between col-6 col-sm-4 col-md-3 col-lg-2 to fix my problem. Thanks in advance!
Edit:
When resizing the browser window the images should always stay the same resolution and go from 6 items in a row down to 2 items per row (so 6-5-4-3-2), while always filling the screen as soon as the browser size is smaller than the container.
I see you are using bootstrap version 4, So please use col-6 instead of col-xs-6 for mobile. And also for responsive images use img-fluid instead of img-responsive class. Thanks
Related
I have a row of images that on a normal large display goes nicely across the screen, but when I go to a smaller display it just shrinks the images and keeps them horizontally across the small screen. How would I go about making it responsive so it stacks vertically when it goes to the smaller screen size.
<div class="container">
<div class="imgRow">
<div class="d-flex justify-content-around">
<div class="col-sm-3 w-25">
<img
src="image1.jpg"
class="img-fluid"
alt="..."
/>
</div>
<div class="col-sm-3 w-25">
<img
src="image2.jpg"
class="img-fluid"
alt="..."
/>
</div>
<div class="col-sm-3 w-25">
<img
src="image3.jpg"
class="img-fluid"
alt="..."
/>
</div>
</div>
</div>
</div>
The only CSS I have for this row is as follows:
.container .imgRow {
padding-bottom: 10%;
}
#media only screen and (max-width: 768px) {
.imgRow img {
width: 100;
}
}
I've tried removing the CSS, taking out the image-fluid, changing the col- to all different things, taking it out the container, and taking out the justify-content-around.
You could use Bootstrap's row and tell each of your columns when you want them to be all on one line versus being on separate lines.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row bg-dark d-flex justify-content-around">
<div class="col-12 col-md-3 bg-warning">
<img src="https://via.placeholder.com/200x100.png" class="mx-auto d-block img-fluid" alt="..." />
</div>
<div class="col-12 col-md-3 bg-primary">
<img src="https://via.placeholder.com/200x100.png" class="mx-auto d-block img-fluid" alt="..." />
</div>
<div class="col-12 col-md-3 bg-info">
<img src="https://via.placeholder.com/200x100.png" class="mx-auto d-block img-fluid" alt="..." />
</div>
</div>
</div>
I have 6 photos and on md size I would like to have a slider to show them all, on lg they are all displayed side by side and on sm they are displayed 1 per row so there is no problem. Basically I am saying that I don't want to have 2 rows on md but 1 with a slider.
Here is how it looks now
but I would like to make it look like this
the blue line is supposed to be a slider that slides right to reveal more photos.
This is the code I am using now
<div class="row align-items-center text-center">
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" id="">
<img src="./assets/GAMES/fortnite.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/gta5.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/leagueoflegends.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/mobile legends.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/minecraft.jpg" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<img src="./assets/GAMES/rust.jpg" alt="" class="rounded">
</a>
</div>
</div>
Is it possible to do? What do i have to learn to do it? Any links would be appreciated.
You may use the media query to set the flex-wrap and overflow for the respective screen width. I have set the minimum width as 768px and max-width as 991.98px. You may change it accordingly. Please run the code snippet for the output.
#media (min-width: 768px) and (max-width: 991.98px) {
.row {
flex-wrap: nowrap !important;
overflow: auto !important;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="row align-items-center text-center">
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" id="">
<!-- <img src="./assets/GAMES/fortnite.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/gta5.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/leagueoflegends.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/mobile legends.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/minecraft.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
<div class="col-md-3 col-lg-2 col-sm-12 mt-3">
<a href="#" class="">
<!-- <img src="./assets/GAMES/rust.jpg" alt="" class="rounded"> -->
<img src="https://picsum.photos/200/200" alt="" class="rounded">
</a>
</div>
</div>
You can dynamically create a corousel item (slide) for each of 4 card by using js and use corousel of bootstrap 4 to show sliding row.
Corousel
Instead of putting up a slider to move around the images, we can actually create a carousel effect with bootstrap. It will provide a breath-taking experience to the users. Here's the code for it.
PS: Edit the class and ID names as per your requirements.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Just a simple question
I was going through a tutorial for multiple item carousel and found this in I a css code which I couldn't understand
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
transition: none;
}
<div class="container-fluid">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="900000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2 active">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 8">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=9" alt="slide 9">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=10" alt="slide 10">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=11" alt="slide 11">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=12" alt="slide 12">
</div>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-2">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=13" alt="slide 13">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<i class="fa fa-chevron-left fa-lg text-muted"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
<i class="fa fa-chevron-right fa-lg text-muted"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<br>
<br>
<p class="d-block p-5">
<br>
split up and commented css for understanding. <br>
fixed animation for previous slide. <br>
added breakpoints and slide item counts
<br><br>
based on:
https://www.codeply.com/go/s3I9ivCBYH
</p>
so my question is what is use of classes carousel-item-right and carousel-item-left in above code when it is not even mentioned in the html code?? moreover what these classes are trying to indicate and what they mean??
carousel-item-right and carousel-item-left classes show while a slide is changing. those classes Period of stability is less than 1s. open your browser dev tool to see this. here is a screenshot for you.
I have tried a lot of different solutions: added class center-block to "row", wrap "row" in . I just want to have 4 imges, centered, but instead they are shifted to the left. Please help me, what`s my mistake? thank you.
<div class = "row center-block">
<div class = "col xs-12 col-sm-6 col-md-2 col-lg-2">
<a target="_blank" href="tea-003.jpg">
<img src="tea-003.jpg" class="img-responsive" alt="tea">
</a>
<div class = "desc">1</div>
</div>
<div class = "col xs-12 col-sm-6 col-md-2 col-lg-2">
<a target="_blank" href="tea-003.jpg">
<img src="tea-003.jpg" class="img-responsive" alt="Посуда">
</a>
<div class = "desc">2</div>
</div>
<div class = "col xs-12 col-sm-6 col-md-2 col-lg-2">
<a target="_blank" href="tea-003.jpg">
<img src="tea-003.jpg" class="img-responsive">
</a>
<div class = "desc">3</div>
</div>
<div class = "col xs-12 col-sm-6 col-md-2 col-lg-2">
<a target="_blank" href="tea-003.jpg">
<img src="tea-003.jpg" class="img-responsive" alt=" ">
</a>
<div class = "desc">4</div>
</div>
</div>
I think this is what you want. Note, you only need to specify the smaller size if the larger is the same. You don't need col-lg-2 since the col-md-2 cover the md side and up. All I added was col-md-offset-2 which moves that column 2 over. You had 8 columns (2x4) and there are 12 total. So 12-8 = 4. If you want it centered then you want to split that so 4/2 = 2.
<div class = "row center-block">
<div class = "col xs-12 col-sm-6 col-md-2 col-md-offset-2">
<a target="_blank" href="tea-003.jpg">
<img src="tea-003.jpg" class="img-responsive" alt="tea">
</a>
<div class = "desc">1</div>
</div>
<div class = "col xs-12 col-sm-6 col-md-2">
<a target="_blank" href="tea-003.jpg">
<img src="tea-003.jpg" class="img-responsive" alt="Посуда">
</a>
<div class = "desc">2</div>
</div>
<div class = "col xs-12 col-sm-6 col-md-2">
<a target="_blank" href="tea-003.jpg">
<img src="tea-003.jpg" class="img-responsive">
</a>
<div class = "desc">3</div>
</div>
<div class = "col xs-12 col-sm-6 col-md-2">
<a target="_blank" href="tea-003.jpg">
<img src="tea-003.jpg" class="img-responsive" alt=" ">
</a>
<div class = "desc">4</div>
</div>
</div>
If you want them evenly spaced across the entire row at all screen sizes, you'll need to look into flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
class="img-responsive center-block" add this inside img tag
I am having a problem with bootstrap 3 and some thumbnails where although I'm using the same code and the image sizes are exactly the same the last image row is broken on mobile when in vertical only
Here is the code:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=4">
<img class="img-responsive" src="http://mysite/tn-1_256x300.jpg" alt="">
<div class="text-center text_margin">styling</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=5">
<img class="img-responsive" src="http://mysite/tn-2_256x300.jpg" alt="">
<div class="text-center text_margin">colour</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=6">
<img class="img-responsive" src="http://mysite/tn-3_256x300.jpg" alt="">
<div class="text-center text_margin">extensions</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=7">
<img class="img-responsive" src="http://mysite/tn-4_256x300.jpg" alt="">
<div class="text-center text_margin">hair enhancements</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=8">
<img class="img-responsive" src="http://mysite/tn-5_256x300.jpg" alt="">
<div class="text-center text_margin">smoothing treatment</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="?service=9">
<img class="img-responsive" src="http://mysite/tn-6_256x300.jpg" alt="">
<div class="text-center text_margin">hair up</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="meet-the-team">
<img class="img-responsive" src="http://mysite/tn-7_256x300.jpg" alt="">
<div class="text-center text_margin">meet the team</div>
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="/price-list/">
<img class="img-responsive" src="http://mysite/tn-8_256x300.jpg" alt="">
<div class="text-center text_margin">price list</div>
</a>
</div>
</div><!--end row-->
</div><!--end container-->
This is happening because some of the text below the thumbnails is wrapping, and as a result the thumbnail heights are different. One way to fix this problem is to clear the columns float on mobile with CSS like this..
#media (max-width: 768px) {
.row > .col-xs-6:nth-child(2n+1) {
clear: left;
}
}
Demo 1: http://codeply.com/go/Bgt8JFkPht
Another option (simpler), is to use CSS text-overflow ellipsis on the text DIV's since it's these DIVs that are causing the height to be different on each thumbnail. When the thumbnail heights are the same, the row wrapping is not an issue..
Demo 2: http://codeply.com/go/5uOP4bM5pk
Check your text-margin class, when adding a margin or padding to some items in Bootstrap, you change the width of your columns.