I am using bootstrap 5 carousel and added 9 items
The first item is YouTube video and the other 7 items is empty Divs with background-image
the problem is the first three items is the only working items and I just see three indicators
And when I try to display the fourth item, the carousel stops working
<section class="slider">
<div id="carouselExampleIndicators" class="carousel h-100" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner h-100">
<div class="carousel-item h-100 active">
<iframe class="w-100 h-100" src="https://www.youtube.com/embed/Z6nvbmqYR9g"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div class="carousel-item carousel-item-one h-100">
</div>
<div class="carousel-item carousel-item-two h-100">
</div>
<div class="carousel-item carousel-item-three h-100">
</div>
<div class="carousel-item carousel-item-four h-100">
</div>
<div class="carousel-item carousel-item-five h-100">
</div>
<div class="carousel-item carousel-item-six h-100">
</div>
<div class="carousel-item carousel-item-seven h-100">
</div>
<div class="carousel-item carousel-item-eight h-100">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
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="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
Think about it, you only have 3 buttons, so that must be something with that, try adding more buttons.
<section class="slider">
<div id="carouselExampleIndicators" class="carousel h-100" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4"
aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5"
aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6"
aria-label="Slide 6"></button>
</div>
// And more buttons
<div class="carousel-inner h-100">
<div class="carousel-item h-100 active">
<iframe class="w-100 h-100" src="https://www.youtube.com/embed/Z6nvbmqYR9g"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div class="carousel-item carousel-item-one h-100">
</div>
<div class="carousel-item carousel-item-two h-100">
</div>
<div class="carousel-item carousel-item-three h-100">
</div>
<div class="carousel-item carousel-item-four h-100">
</div>
<div class="carousel-item carousel-item-five h-100">
</div>
<div class="carousel-item carousel-item-six h-100">
</div>
<div class="carousel-item carousel-item-seven h-100">
</div>
<div class="carousel-item carousel-item-eight h-100">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
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="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
You have only three carousel indicator. You can take off carousel indicator or add 4 more divs .
Here is a working fiddle that i modified your code.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<section class="slider">
<div id="carouselExampleIndicators" class="carousel h-100" data-bs-ride="carousel">
<div class="carousel-inner h-100">
<div class="carousel-item h-100 active">
<iframe class="w-100 h-100" src="https://www.youtube.com/embed/Z6nvbmqYR9g"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div class="carousel-item carousel-item-one h-100"><img src="https://via.placeholder.com/150">
</div>
<div class="carousel-item carousel-item-two h-100"><img src="https://via.placeholder.com/250">
</div>
<div class="carousel-item carousel-item-three h-100"><img src="https://via.placeholder.com/350">
</div>
<div class="carousel-item carousel-item-four h-100"><img src="https://via.placeholder.com/450">
</div>
<div class="carousel-item carousel-item-five h-100"><img src="https://via.placeholder.com/550">
</div>
<div class="carousel-item carousel-item-six h-100"><img src="https://via.placeholder.com/650">
</div>
<div class="carousel-item carousel-item-seven h-100"><img src="https://via.placeholder.com/750">
</div>
<div class="carousel-item carousel-item-eight h-100"><img src="https://via.placeholder.com/850">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
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="#carouselExampleIndicators"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
Related
<div id="carouselExampleIndicators" className="carousel slide" data-bs-ride="true">
<div className="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div className="carousel-inner">
<div className="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div>
Captions
</div>
</div>
<div className="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div className="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="visually-hidden">Previous</span>
</button>
<button className="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="visually-hidden">Next</span>
</button>
</div>
This is a standard bootstrap carousel that I have. What I wanna do now is to position the Captions that are going to be inside each carousel-item, outside of the carousel-item and carousel-inner, but within the carousel container. I want them to be beneath the indicators, and to slide with each carousel-item.
Here's an image of where I want the captions to be:
Captions outside of the item
I can obviously use position absolute, but then the height of the carousel will not expand, I have to expand it myself, and I don't wanna do that. What other ways can you think of moving them outside of the image, beneath the indicators, but still to slide with each carousel-item?
Why is it that when I add padding-top or margin-top to the caption element, the indicators move down with it?
padding or margin on the caption element
Simply removing Bootstrap's carousel-caption class solves the issue. You can use the position-relative class as a replacement on your caption div.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="container">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://dummyimage.com/1000x200/000/fff" class="d-block w-100" alt="...">
<div class="position-relative text-center">
Caption 1
</div>
</div>
<div class="carousel-item">
<img src="https://dummyimage.com/1000x200/000/fff" class="d-block w-100" alt="...">
<div class="position-relative text-center">
Caption 2
</div>
</div>
<div class="carousel-item">
<img src="https://dummyimage.com/1000x200/000/fff" class="d-block w-100" alt="...">
<div class="position-relative text-center">
Caption 3
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
I wish to create variations of a bootstrap 5 thumbnails carousel, where the thumbnails are on the top or on the left side of the slides section (I need these two variations). Current default is at the bottom.
The base model functions well. However, I cannot split it into rows (thumbnails) and columns (thumbnails on left column) - when I try to wrap the carousel section differently the end result is the same.
Below is the base code, after, followed by a snippet of how I tried to split it unsuccessfully.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<!-- Carousel wrapper -->
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
<!-- Thumbnails -->
<div class="row">
<div class="">
<div class="my slider carousel-indicators" style="margin-bottom: ;">
<div class="container op position-relative">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" style="width: 100px;">
<img class="d-block w-100"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(88).webp" class="img-fluid" />
</button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" style="width: 100px;">
<img class="d-block w-100"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(121).webp" class="img-fluid" />
</button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3" style="width: 100px;">
<img class="d-block w-100"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(31).webp" class="img-fluid" />
</button>
</div>
</div>
</div>
</div>
<!-- Thumbnails -->
<!-- Slides -->
<div class="carousel-inner mb-5">
<div class="carousel-item active">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(88).webp" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(121).webp" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(31).webp" class="d-block w-100" alt="..." />
</div>
</div>
<!-- Slides -->
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<!-- Controls -->
</div>
</div>
<!-- Carousel wrapper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
I tried to split it with rows/grid wrapping to differ thumbnails and slides. Yet,the thumbnail section stays at the bottom of the screen.
below is an example for placing thumbnails at top, as with other tries I made, the result is the same, i.e. the thumbnails at the bottom:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<!-- Carousel wrapper -->
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel">
<!-- Thumbnails -->
<div class="col">
<div class="row">
<div class="my slider carousel-indicators" style="margin-bottom: ;">
<div class="container op position-relative">
.... closing with </div> etc'
<!--Thumbnails-->
<!-- Slides -->
<div class="row">
<div class="col">
<div class="carousel-inner mb-5">
<div class="carousel-item active">
.... closing with </div> etc'
<!-- Slides -->
</div>
</div>
Def
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
I also used variations of col md-4, inverse the row/col...didn't work.
I managed to create the layout without a carousel, but I'd like to have a cleaner code and where media is served from one similar structure.
Any input, reference would be great.
I don't think I'd try to apply rows and columns here. There's just too much complexity with what's going on inside the carousel. Instead I'd shift the carousel with padding to make room for the thumbs.
.carousel.carousel-thumbs-top {
padding-top: 60px;
}
.carousel.carousel-thumbs-top .carousel-indicators {
top: 0;
bottom: auto;
}
.carousel .carousel-indicators button {
width: 100px !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<!-- Carousel wrapper -->
<div id="carouselExampleIndicatorsLeft" class="carousel slide carousel-fade carousel-thumbs-top" data-bs-ride="carousel">
<!-- Thumbnails -->
<div class="slider carousel-indicators position-absolute">
<button type="button" data-bs-target="#carouselExampleIndicatorsLeft" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
<img class="d-block w-100"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(88).webp" class="img-fluid" />
</button>
<button type="button" data-bs-target="#carouselExampleIndicatorsLeft" data-bs-slide-to="1" aria-label="Slide 2">
<img class="d-block w-100"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(121).webp" class="img-fluid" />
</button>
<button type="button" data-bs-target="#carouselExampleIndicatorsLeft" data-bs-slide-to="2" aria-label="Slide 3">
<img class="d-block w-100"
src="https://mdbcdn.b-cdn.net/img/Photos/Others/Carousel-thumbs/img%20(31).webp" class="img-fluid" />
</button>
</div>
<!-- Slides -->
<div class="carousel-inner mb-5">
<div class="carousel-item active">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(88).webp" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(121).webp" class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(31).webp" class="d-block w-100" alt="..." />
</div>
</div>
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Carousel wrapper -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
I would like to use card-image-top section as a slider, especially on mobile. I will use that part as product card and i want my customers to see several images on this part. Is there an easy way to do this?
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-text">Example Text</p>
</div>
</div>
I solved it.
<div class="card">
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="https://picsum.photos/1920/1080?random=4" alt="image">
</div>
<div class="carousel-item">
<img class="w-100" src="https://picsum.photos/1920/1080?random=5" alt="image">
</div>
<div class="carousel-item">
<img class="w-100" src="https://picsum.photos/1920/1080?random=6" alt="image">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators2" 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="#carouselExampleIndicators2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
i want to overflow an element its parent context in css(bootstrap). is there any way ?
in my case code is below. I want the description fields to cover the whole row. but its in col-md-4 therefore not cover. Is there a way to do what i want. My English is bad, I'm sorry.
Edit:
the design i want to make
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
item 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="panel" aria-labelledby="headingOne">
<div class="panel-body">
Description 1
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
item 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="panel" aria-labelledby="headingTwo">
<div class="panel-body">
description 2
</div>
</div>
</div>
</div>
</div>
I think you have to separate description (panel content) and put it below the tabs (headings)
And after all I think in this case you need Bootstrap's accordion approach
Try this out:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
item 1
</a>
</h4>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
item 2
</a>
</h4>
</div>
</div>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="panel" aria-labelledby="headingOne">
<div class="panel-body">
Description 1
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="panel" aria-labelledby="headingTwo">
<div class="panel-body">
description 2
</div>
</div>
I created a carousel modal for Bootstrap and can't figure out how to properly center it regardless of screensize or if for example a mobilescreen is tilted vertically.
The CSS Code I have right now properly spaces the modal on a normal pc screen, but it doesnt work on mobile screen and the MOdal appears on the top of the screen instead of appearing in the middle as it should. neither
position
nor
vertical-alignment
worked for me.
.modal {
vertical-align: middle;
padding-left: 5%;
padding-left: 5%;
padding-top: 1%;
text-align: middle;
max-height: 90vh;
max-width: 95vw;
}
.modal .carousel-inner {
max-height: 100% ! important;
position: center;
text-align: middle;
vertical-align: middle;
}
.modal .carousel .item #media (max-width: 991px) {
.modal {
padding-top: 55%;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Page Content -->
<div class="container">
<h1 class="my-4 text-center text-lg-left" style="padding-bottom:3%;padding-left:0%">Gallerie</h1>
<div class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="" data-toggle="modal" data-target="#Gallerie">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="#" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="http://placehold.it/400x300" alt="">
</a>
</div>
</div>
<div class="modal" id="Gallerie">
<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="http://placehold.it/400x300" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x300" 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>
</div>
</div>
<!--/Gallerie-->
The modal needs the proper structure as detailed the Bootstrap 4 docs. Just use modal-dialog-centered and you don't need the extra CSS...
https://www.codeply.com/go/BDNba719xE
<div class="modal" id="Gallerie">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<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="http://placehold.it/400x300" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x300" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/400x300" 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>
</div>
</div>
</div>