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!
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'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 try to apply the masking effect for Carousel images at bootstrap 5 in the Django web project.
I tried many solutions but nothing work
this is the carousel
<div id="carouselExampleControls" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner" >
<div class="carousel-item active" data-bs-interval="10000">
<img src="{% static '.\images\home\sec1-1.jpg' %}" class="d-block w-100" alt="..." >
<div class="carousel-caption d-none d-md-block ">
<h1>Welcome to Markvira Agency</h1>
<p>Smart digital marketing agency</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="{% static '.\images\home\sec1-2.jpg' %}" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1>Welcome to Markvira Agency</h1>
<p>Smart digital marketing agency</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
i tried the mask tag like this..but effect appear only at text are not mask the whole image slide
<div class="carousel-item active" data-bs-interval="10000">
<img src="{% static '.\images\home\sec1-1.jpg' %}" class="d-block w-100" alt="..." >
<div class="mask" style="background-color: rgba(0, 0, 0, 0.6)"> <!--Mask Tag-->
<div class="carousel-caption d-none d-md-block ">
<h1>Welcome to Markvira Agency</h1>
<p>Smart digital marketing agency</p>
</div>
</div>
I want to make a gray layer over carousel images
like this
I hope you could help me
Thanks
How to align these 3 div with more margin?
i tried col-3, but still doesn't work for me, i want 1 div to be in left, 2nd in center, and 3rd in right. i tried using css for margin, but it's worse in responsive. do i need to do responsive part to?
Check this image, i want to make this..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>General Announcement</title>
</head>
<body>
<section class="activities">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="text-center text-primary text-uppercase font-weight-bold mb-4">Upcoming activities for october 2019</h3>
</div>
<div class="col-md-3 mb-sm-5">
<img src="images/img-5.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 20</span>
<h4 class="text-uppercase font-weight-bold">Run for charity</h4>
More info
</div>
<div class="col-md-3 mb-sm-5">
<img src="images/img-6.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 11</span>
<h4 class="text-uppercase font-weight-bold">Book drive</h4>
More info
</div>
<div class="col-md-3">
<img src="images/img-7.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 21</span>
<h4 class="text-uppercase font-weight-bold">Recycling initiative</h4>
More info
</div>
</div>
</div>
</section>
</body>
</html>
Move the col-12 header part outside of what is now your row and change row to be a flex column. BS4 supports flex and it's the best way to go for this use case.
Here's a fiddle
<section class="activities">
<div class="container">
<div class="col-md-12">
<h3 class="text-center text-primary text-uppercase font-weight-bold mb-4">Upcoming activities for october 2019</h3>
</div>
<div class="d-flex justify-content-between">
<div class="col-md-3 mb-sm-5">
<img src="images/img-5.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 20</span>
<h4 class="text-uppercase font-weight-bold">Run for charity</h4>
More info
</div>
<div class="col-md-3 mb-sm-5">
<img src="images/img-6.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 11</span>
<h4 class="text-uppercase font-weight-bold">Book drive</h4>
More info
</div>
<div class="col-md-3">
<img src="images/img-7.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 21</span>
<h4 class="text-uppercase font-weight-bold">Recycling initiative</h4>
More info
</div>
</div>
</div>
</section>
You need to include Bootstrap css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>General Announcement</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<section class="activities">
<div class="container">
<div class="row justify-content-between">
<div class="col-md-12">
<h3 class="text-center text-primary text-uppercase font-weight-bold mb-4">Upcoming activities for
october 2019</h3>
</div>
<div class="col-md-3 mb-sm-5">
<img src="images/img-5.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 20</span>
<h4 class="text-uppercase font-weight-bold">Run for charity</h4>
More info
</div>
<div class="col-md-3 mb-sm-5">
<img src="images/img-6.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 11</span>
<h4 class="text-uppercase font-weight-bold">Book drive</h4>
More info
</div>
<div class="col-md-3">
<img src="images/img-7.jpg" class="img-fluid">
<span class="d-block text-uppercase font-weight-bold mt-3">October 21</span>
<h4 class="text-uppercase font-weight-bold">Recycling initiative</h4>
More info
</div>
</div>
</div>
</section>
</body>
</html>
try this I hope this will work :)
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/