i'm trying to convert this row of images...
Convert that into a little carousel for visualization in small devices (Responsive Desing) i'm using bootstrap, the code of that images is here:
<div class="row d-flex justify-content-center pb-5" style="background-image: url('assets/img/Vector_Chain1.png'); margin-left:0px; margin-right:0px;">
<img src="assets/img/TheEye.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
<img src="assets/img/ThePyramid.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
<img src="assets/img/TheEthernal.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
</div>
I want when the device are small like a phone, this div convert itself into a carousel for a better visualization
Add classes d-block and d-md-flex to your container
Create a new container for the carousel function on mobile.
Final html code:
<div class="row d-none d-md-flex justify-content-center pb-5" style="background-image: url('assets/img/Vector_Chain1.png'); margin-left:0px; margin-right:0px;">
<img src="assets/img/TheEye.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
<img src="assets/img/ThePyramid.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
<img src="assets/img/TheEthernal.png" class="img-fluid col-md-3 col-sm-8 mt-5 img-section2" alt="">
</div>
<div id="carouselExampleSlidesOnly" class="carousel slide d-block d-md-none" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/img/TheEye.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/ThePyramid.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/ThePyramid.png" alt="Third slide">
</div>
</div>
</div>
Related
I have a slider in bootstrap. The images are different sizes and the page rescales with each image. Is there a solution that all images in the slider are displayed with the same height but the slider still remains responsive?
<div class="container-fluid" ><!--style="background-color:WhiteSmoke;"-->
<div class="row">
<div class="col-md-4 mx-auto ">
<div id="carouselExampleSlideOnly" class="carousel slide rounded-3 " data-ride="carousel" data-interval="20" >
<div class="carousel-inner ">
<div id="ctest" class="carousel-item active">
<img class="d-block w-100 rounded" src="https://heidicon.ub.uni-heidelberg.de/iiif/2/1108249:570905/full/full/0/default.jpg" alt="1">
<div class="carousel-caption d-none d-md-block">
<button type="button" class="btn btn-outline-dark" href="annotator#HS_1001">
<a class="nav-link text-dark" href="annotator#HS_1001"> Weiter</a>
</button>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 rounded" src="https://heidicon.ub.uni-heidelberg.de/iiif/2/1107988:570686/full/full/0/default.jpg" alt="2" >
<div class="carousel-caption d-none d-md-block">
<button type="button" class="btn btn-outline-dark" href="annotator#HS_1001">
<a class="nav-link text-dark" href="annotator#HS_1001"> Weiter</a>
</button>
</div>
</div>
<div class="carousel-item rounded">
<img class="d-block w-100" src="https://heidicon.ub.uni-heidelberg.de/iiif/2/1127839:592145/full/full/0/default.jpg" alt="3">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://heidicon.ub.uni-heidelberg.de/iiif/2/1107996:570695/full/full/0/default.jpg" alt="4">
</div>
<div class="carousel-item rounded">
<img class="d-block w-100" src="https://heidicon.ub.uni-heidelberg.de/iiif/2/1108004:570704/full/full/0/default.jpg" alt="5">
<div class="carousel-caption d-none d-md-block">
<button type="button" class="btn btn-outline-dark" href="annotator#HS_1001">
<a class="nav-link text-dark" href="annotator#HS_1001"> Weiter</a>
</button>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://heidicon.ub.uni-heidelberg.de/iiif/2/1108012:570713/full/full/0/default.jpg" alt="6">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://heidicon.ub.uni-heidelberg.de/iiif/2/1108020:570722/full/full/0/default.jpg" alt="7">
</div>
</div>
</div>
</div>
</div>
</div>
Your image should be set to the below:
<img class="d-block rounded" src="https://heidicon.ub.uni-heidelberg.de/iiif/2/1108249:570905/full/full/0/default.jpg" alt="1" height="300px">
I would try to scale all the images to the same height using the CSS height property. That worked for me, let me know if that works for you.
img {
height: 100px;
}
I want to achieve a layout using Boostrap 5 and I'm failing to do so.
This is the layout which I want to have:
layout example
This is the layout that I have: https://jsfiddle.net/7rpmqsc0/
This is my mark up:
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-12">
<img data-src="https://via.placeholder.com/600x300" class="img-fluid w-100 lazyload" alt="...">
</div>
</div>
<div class="row">
<div class="col-6">
<img data-src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
</div>
<div class="col-6">
<img data-src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
</div>
</div>
</div>
<div class="col-6">
<img data-src="https://via.placeholder.com/600x600" class="img-fluid w-100 lazyload" alt="...">
</div>
</div>
My problem is that I can't achieve a gap between rows where the images meet on the left side. Maybe I am missing something silly but I can't figure it out. Thank you for your help
You can rethink the structure with 2 col side by side where one olds also two columns with the smaller img.:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<!--left col also styled as a row -->
<div class="col-6 row">
<!-- first row of that col -->
<img src="https://via.placeholder.com/600x300" class="img-fluid w-100 lazyload" alt="...">
<!-- second row of that col with 2 col-6 -->
<div class="col-6 mt-auto">
<img src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
</div>
<div class="col-6 mt-auto">
<img src="https://via.placeholder.com/300x300" class="img-fluid w-100 lazyload" alt="...">
</div>
</div>
<!-- right column -->
<div class="col-6">
<img src="https://via.placeholder.com/600x600" class="img-fluid w-100 lazyload" alt="...">
</div>
</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 just created a slider that holds four images, the issue is, as soon as the pixel size dips below < 768px, the images begin to lose quality and then stack. Is there any possible way I can lock the images on one row so that they don't move after it goes below 768px?
Thanks in advance.
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- slider 1 -->
<div class="carousel-item active">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
</div>
</div>
</div>
<!-- slider 2 -->
<div class="carousel-item">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<span><img class="d-block img-thumbnail img-fluid" src="images/5.jpg" alt="First slide"> </span>
</div>
</div>
</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>
</div>
css:
.carousel-item span img {
height:200px !important;
}
For Bootstrap 4, you have a new col- tag
So you need to use col-3 in place of specifying col-xs-3 for your divs
(Note that specifying col- automatically sets sm, xs, lg to the same widths unless you specify another class for sm/xs/lg)
jsfiddle: https://jsfiddle.net/as6md81b/16/
Refer https://getbootstrap.com/docs/4.0/layout/grid/
I am using bootstrap columns that each have an image inside of different sizes which are aligned on full screen view however when using bootstrap's class img-fluid they resize for smaller viewports but instead of being aligned between the other images vertically the smaller images end up on the top of their div column.
Is there a way to vertically align these images while the image scales down?
Here is the markup:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-2">
<img src="http://via.placeholder.com/350x150" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/300x150" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/250x150" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/200x100" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/250x150" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/150x150" class="d-block img-fluid">
</div>
</div>
As you are using bootstrap 4, Just add align-items-center class in your row
For more help read Bootstrap4 Flex Grid
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row align-items-center">
<div class="col-2">
<img src="http://via.placeholder.com/350x150" class="d-block img-fluid">
</div>
<div class="col-2 align-items-center">
<img src="http://via.placeholder.com/300x150" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/250x150" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/200x100" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/250x150" class="d-block img-fluid">
</div>
<div class="col-2">
<img src="http://via.placeholder.com/150x150" class="d-block img-fluid">
</div>
</div>