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;
}
Related
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>
I'm having trouble getting the spacing correct.
I need to have my carousel and cards the exact way as shown on the picture
However I can't get it, wether I'm using padding margin on bootstrap columns I just can't seem to get it.
col-9 seems to be fine for the carousel length wise but then I can't get the adequate spacing between the cards using offset (offset-1 makes the spacing way off)
Code
<div class="container" id="roomijs">
<div class="row justify-content-center">
<div class="row justify-content-center">
<div class="card col-10">
<div class="card-header card-head">
Specialiteiten deze week
</div>
<div class="card-body">
<div id="carousel-card-body" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-card-body" data-slide-to="0" class="active"></li>
<li data-target="#carousel-card-body" data-slide-to="1"></li>
<li data-target="#carousel-card-body" data-slide-to="2"></li>
</ol>
<div class="carousel-inner carousel-height">
<div class="carousel-item active">
<img class="d-block w-100" src="img/blanco.jpg" 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 carousel-control-left " href="#carousel-card-body" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next carousel-control-right" href="#carousel-card-body" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="card col-3">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card col-3">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card col-3">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>```
You just need to make sure you're following the rules of the Bootstrap grid...
columns and only columns should be the immediate children of row
content goes inside columns
The code is breaking these rules. The row has been doubled up causing double negative margins around the carousel. Also, cards should be inside col and not the same div.
<div class="container" id="roomijs">
<div class="row justify-content-center">
<div class="col-9">
<div class="card">
<div class="card-header card-head"> Specialiteiten deze week </div>
<div class="card-body">
<div id="carousel-card-body" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-card-body" data-slide-to="0" class="active"></li>
<li data-target="#carousel-card-body" data-slide-to="1"></li>
<li data-target="#carousel-card-body" data-slide-to="2"></li>
</ol>
<div class="carousel-inner carousel-height">
<div class="carousel-item active">
<img class="d-block w-100" src="//via.placeholder.com/1500x600" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="//via.placeholder.com/1500x600" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="//via.placeholder.com/1500x600" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev carousel-control-left " href="#carousel-card-body" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next carousel-control-right" href="#carousel-card-body" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">
...
</div>
</div>
<div class="col-3">
<div class="card">
...
</div>
</div>
<div class="col-3">
<div class="card">
...
</div>
</div>
</div>
</div>
Demo
I'm sorry if this was already there, but it didn't help me.
I have to make a 3 pages website using Bootstrap 5 with Carousel. The problem here is that the Carousel isn't the full width as I'd like it to be.
HTML:
<main class="container pt-3 mt-5 pb-3">
<!-- Carousel -->
<div
id="carouselExampleControls"
class="carousel slide border rounded"
data-bs-ride="carousel"
>
<div class="carousel-inner rounded">
<div class="carousel-item active">
<img
src="Images/Compressed/ΠΆ-34-85.jpg"
class="d-block w-100"
alt="Soviet medium tank T-34/85"
title="Soviet medium tank T-34/85"
/>
<div class="carousel-caption d-none d-md-block">
<h5>T-34/85</h5>
</div>
</div>
<div class="carousel-item">
<img
src="Images/Compressed/KV-1.JPG"
class="d-block w-100"
alt="Soviet heavy tank KV-1"
title="Soviet heavy tank KV-1"
/>
<div class="carousel-caption d-none d-md-block">
<h5>KV-1</h5>
</div>
</div>
<div class="carousel-item">
<img
src="Images/Compressed/Panzer_V_Panther.jpg"
class="d-block w-100"
alt="German medium tank Pz. V Panzer_V_Panther"
title="German medium tank Pz. V Panther"
/>
<div class="carousel-caption d-none d-md-block">
<h5>Pz. V Panther</h5>
</div>
</div>
<div class="carousel-item">
<img
src="Images/Compressed/Tiger_I.jpg"
class="d-block w-100"
alt="German heavy tank Pz. VI Tiger I"
title="German heavy tank Pz. VI Tiger I"
/>
<div class="carousel-caption d-none d-md-block">
<h5>Pz. VI Tiger I</h5>
</div>
</div>
<div class="carousel-item">
<img
src="Images/Compressed/Valentine_II.jpg"
class="d-block w-100"
alt="British infantry tank Valentine II"
title="British infantry tank Valentine II"
/>
<div class="carousel-caption d-none d-md-block">
<h5>Valentine II</h5>
</div>
</div>
<div class="carousel-item">
<img
src="Images/Compressed/Churchill_VI.jpg"
class="d-block w-100"
alt="British heavy tank Churchill VI"
title="British heavy tank Churchill VI"
/>
<div class="carousel-caption d-none d-md-block">
<h5>Churchill VI</h5>
</div>
</div>
<div class="carousel-item">
<img
src="Images/Compressed/M18_Hellcat.jpg"
class="d-block w-100"
alt="American tank destroyer M18 Hellcat"
title="American tank destroyer M18 Hellcat"
/>
<div class="carousel-caption d-none d-md-block">
<h5>M18 Hellcat</h5>
</div>
</div>
<div class="carousel-item">
<img
src="Images/Compressed/M4_Sherman.jpg"
class="d-block w-100"
alt="American medium tank M4 Sherman"
title="American medium tank M4 Sherman"
/>
<div class="carousel-caption d-none d-md-block">
<h5>M4 Sherman</h5>
</div>
</div>
</div>
<button
class="carousel-control-prev rounded"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="prev"
title="Previous"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
<span class="visually-hidden"><</span>
</button>
<button
class="carousel-control-next rounded"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="next"
title="Next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
<span class="visually-hidden">></span>
</button>
</div>
<!-- Footer -->
<footer
class="bg-primary text-white text-center text-lg-start rounded mt-2"
>
<div class="container p-4">
<div class="row">
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Used references</h5>
<p>
There may be something incorrect, I'm not
flawless. You can check the references I used to
be more sure or to check information on other
sources.
</p>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Information</h5>
<ul class="list-unstyled mb-0">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase mb-0">Pictures</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
</div>
</div>
<div
class="text-center p-3"
style="background-color: rgba(0, 0, 0, 0.2)"
>
Please note, that this page is still in development. Thank
you for understanding.
</div>
</footer>
</main>
The CSS code is unchanged from Bootstrap.
Here is how it looks now:
screen of the carousel
Thank you in advance and have a nice day!
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/
Hello everyone so i'm making a website as a project and in one of the parts i'm putting a list group with the name of the item and on the right the image of said item. I did it already using Pingendo but the text is not align with the image correctly.
This is the code i have atm:
<div class="container">
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-8">
<!-- Page Content -->
<div class="container">
<div class="row text-center text-lg-left">
<div class="col-md-12">
<div class="list-group my-3">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="w-100">
<h4 class="mb-1 text-center">Arduino Uno</h4>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="150" height="150" > </a>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="w-100">
<h5 class="mb-1 text-center">Breadboard</h5>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
</a>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="w-100">
<h5 class="mb-1 text-center">Product</h5>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
</a>
</div>
and this is how it looks on the website:
Basically what i'm trying to do is to put both text and image aligned on the same line so i doesn't look the text on the top and the image below.
Thanks in advance.
Remove '.flex-column' class form .list-group-item and add '.d-flex'.
also remove duplicate closing a tag form your code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-8">
<!-- Page Content -->
<div class="container">
<div class="row text-center text-lg-left">
<div class="col-md-12">
<div class="list-group my-3">
<a href="#" class="list-group-item list-group-item-action d-flex align-items-start">
<div class="w-100">
<h4 class="mb-1 text-center">Arduino Uno</h4>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-start">
<div class="w-100">
<h5 class="mb-1 text-center">Breadboard</h5>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-start">
<div class="w-100">
<h5 class="mb-1 text-center">Product</h5>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
</div>
if you want text and image into center
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-2"> </div>
<div class="col-sm-8">
<!-- Page Content -->
<div class="container">
<div class="row text-center text-lg-left">
<div class="col-md-12">
<div class="list-group my-3">
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<div class="w-100">
<h4 class="mb-0 text-center">Arduino Uno</h4>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<div class="w-100">
<h5 class="mb-0 text-center">Breadboard</h5>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
<a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
<div class="w-100">
<h5 class="mb-0 text-center">Product</h5>
</div>
<img class="d-block float-right img-thumbnail img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg" width="60" height="60" > </a>
</div>