i am learning bootstrap 5, i have tried to create simple carousel by following official documentation of Bootstrap 5 Bootstrap 5 Carousel. but when i simply copied their code and used in my template i got unexpected error.my carousel moving full page content instead of his images. Content after Carousel Div also moves when Carousel moves and when i put more div or section on page full page moves along Carousel move. here is my code Codepen Demo
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="icons/fontawesome.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" />
<style>
/*** Slider Box ***/
.sliderbox {
margin-left: 0;
padding: 0;
background-color: yellow;
}
.carousel-inner .carousel-item {
background-color: darkkhaki;
margin: 0;
margin-left: 0;
padding: 0;
}
.carousel-caption {
bottom: 20%;
padding-right: 80%;
width: 25%;
text-align: left;
}
.slider-image-heading {
font-family: Montserrat-Bold;
font-weight: 300;
font-size: xx-large;
color: white;
letter-spacing: 3px;
}
.slider-image-text {
margin-top: 40px;
letter-spacing: 2px;
}
.slider-image-btn {
background-color: #56e0cd;
}
.slider-image-btn:hover {
background-color: black;
color: white;
border-color: white;
}
.carousel-control-prev-icon {
background-color: black;
border-radius: 50%;
}
.getrugdiv {
background-color: #215f6a;
width: auto;
}
</style>
</head>
<body>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/austin-fireworks.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/taj-mahal_copy.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ibiza.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="container-fluid getrugdiv">
<h1> Boot Your Trip Now</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
</body>
</html>
Here you go...
After a lot of trial and error, I found out that after deleting margin: 0; from .carousel-inner .carousel-item {...} the carousel started working (i.e. white space doesn't appear every time the slide is changed).
So, change this...
.carousel-inner .carousel-item {
background-color: darkkhaki;
margin: 0;
margin-left: 0;
padding: 0;
}
...into this.
.carousel-inner .carousel-item {
background-color: darkkhaki;
margin-left: 0;
padding: 0;
}
See the snippet below.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="icons/fontawesome.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" />
<style>
/*** Slider Box ***/
.sliderbox {
margin-left: 0;
padding: 0;
background-color: yellow;
}
.carousel-inner .carousel-item {
background-color: darkkhaki;
margin-left: 0;
padding: 0;
}
.carousel-caption {
bottom: 20%;
padding-right: 80%;
width: 25%;
text-align: left;
}
.slider-image-heading {
font-family: Montserrat-Bold;
font-weight: 300;
font-size: xx-large;
color: white;
letter-spacing: 3px;
}
.slider-image-text {
margin-top: 40px;
letter-spacing: 2px;
}
.slider-image-btn {
background-color: #56e0cd;
}
.slider-image-btn:hover {
background-color: black;
color: white;
border-color: white;
}
.carousel-control-prev-icon {
background-color: black;
border-radius: 50%;
}
.getrugdiv {
background-color: #215f6a;
width: auto;
}
</style>
</head>
<body>
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/austin-fireworks.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/taj-mahal_copy.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ibiza.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="container-fluid getrugdiv">
<h1> Boot Your Trip Now</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
</body>
</html>
Related
I have this flex slider to show a customers previous purchases/orders, it uses a "slider" div and inside that is a foreach statement to pull the users previous purchases from a database to produce each "slide" within the slider.
In each slide there is a button to open the modal, which works fine if there is only one item there, but if there is 2-3 items then the display:flex is activated - causing the modal to pop up inside the slider div rather than on top of everything, I believe it has something to do with the position:relative for the "slider" CSS and the position for the modal CSS
and I cant move the modal outside of those divs because the modal needs to be inside the foreach statement so that it pops up with the correct item details (since they are being pulled from a database).
Also, I cant seem to replicate the issue on my PC when I narrow my browser as much as I can (guessing the window doesn't go narrow enough for the issue to occur).
Had this issue a long time, any help is appreciated, thanks
.slider {
width: 100%;
padding: 6px 0px;
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
.slider::-webkit-scrollbar {
display: none;
}
.slide {
border: 1px solid black;
width: 140px;
flex-shrink: 0;
height: 100%;
}
.slider>div {
scroll-snap-align: start;
}
.slider img {
margin: 6px 6px;
}
.modal {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
z-index: 1200 !important;
display: none;
width: 100%;
height: 100%;
overflow-x: hidden !important;
overflow-y: auto !important;
outline: 0;
background-color: rgba(10, 10, 10, 0.45);
}
.modal-backdrop {
display: none !important;
}
.modal-content {
color: black !important;
z-index: 1200 !important;
position: relative;
display: block;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: .3rem;
outline: 0;
}
i.fa-ellipsis-v {
border-radius: 60px;
box-shadow: 0 0 2px #888;
padding: 0.5em 0.6em;
font-size: 14px;
}
i.fa-ellipsis-v:hover {
cursor: pointer;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" id="bootstrap-css">
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<div class="slider">
<div class="slide" id="slide-1">
<img src="/images/products/<?php echo $ditt['prodimage'];?>">
<i data-toggle="modal" data-target="#exampleModal-1"></i>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin-top:64px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order options</h5>
</div>
<div class="modal-body">
<img src="/images/products/<?php echo $ditt['prodimage']; ?>">
<br>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="slide" id="slide-2">
<img src="/images/products/<?php echo $ditt['prodimage'];?>">
<i data-toggle="modal" data-target="#exampleModal-2"></i>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin-top:64px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order options</h5>
</div>
<div class="modal-body">
<img src="/images/products/<?php echo $ditt['prodimage']; ?>">
<br>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="slide" id="slide-3">
<img src="/images/products/<?php echo $ditt['prodimage'];?>">
<i data-toggle="modal" data-target="#exampleModal-3"></i>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal-3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin-top:64px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order options</h5>
</div>
<div class="modal-body">
<img src="/images/products/<?php echo $ditt['prodimage']; ?>">
<br>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
If you’re wanting the modal above all other elements in the window you can use position:fixed and z-index:99999
.modal{
position:fixed;top:calc(50% - 200px);left:calc(50% - 250px);width:500px;height:400px:z-index:99999;
}
First of all set these attributes
.Modal{
position:absolute
}
.slider{
position:relative
top:0; //as default to overwrite browser defaults for non-static elements
left:0;//as default to overwrite browser defaults for non-static elements
}
Now Your .Modal will be visible in constraints of .slider.
Anyway if Your .Modal be visible out of the .slider
edit .slider{overflow} value
or
YOu can set .modal{position:fixed } or YOu can put YOur .modal out of .slider :
<div class="Modal></div><div class="slider>...</div>
Prevent from using z-index - it's unintuitive.
Z-index is worth just for dynamic purpose, like programaticly switching visible images layed out in the same constraints.
By the way
here You can figure out Your snippet to be reproducable.
Just a modal using the bootstrap classes:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" id="bootstrap-css">
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Bootstrap carousel with modal
.outer-container {
display: flex;
flex-direction: column;
}
.main-container {
border: solid yellow 2px;
padding: 1rem;
}
#carouselExampleControls {
border: solid green 1px;
display: flex;
background-color: #88dd8811;
}
.modal-container {
display: block;
height: 8rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" id="bootstrap-css">
<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="outer-container">
<div class="other-container">Other container</div>
<div class="main-container">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators bg-success">
<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="..." class="d-block w-100" alt="...">
<div class="modal-container d-flex flex-row p-3 justify-content-center align-items-center">
<div class="me-2">Happy people modal here:</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary w-25 me-1" data-bs-toggle="modal" data-bs-target="#firstModal">
Launch FIrst modal
</button>
<!-- Modal -->
<div class="modal fade modal-centered" id="firstModal" tabindex="-1" aria-labelledby="firstModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="firstModalLabel">Big Dog title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<span class="ms-5 p-3 text-white bg-warning">I am a big dog!</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- end of first modal -->
<div class="modal-container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalTwo">
Launch demo modal two
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalTwo" tabindex="-1" aria-labelledby="exampleModalTwoLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalTwoLabel">Modal two title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<span> I am a fish!</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="modal-container m-3">I will hold a modal</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="modal-container m-3">I will hold a modal</div>
</div>
</div>
<button class="carousel-control-prev text-primary" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon bg-primary" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next text-success" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon bg-primary" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
Original example:
.slider {
width: 100%;
padding: 6px 0px;
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
.slider::-webkit-scrollbar {
display: none;
}
.slide {
border: 1px solid black;
width: 140px;
flex-shrink: 0;
height: 100%;
}
.slider>div {
scroll-snap-align: start;
}
.slider img {
margin: 6px 6px;
}
.modal {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
z-index: 1200 !important;
display: none;
width: 100%;
height: 100%;
overflow-x: hidden !important;
overflow-y: auto !important;
outline: 0;
background-color: rgba(10, 10, 10, 0.45);
}
.modal-backdrop {
display: none !important;
}
.modal-content {
color: black !important;
z-index: 1200 !important;
position: relative;
display: block;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: .3rem;
outline: 0;
}
i.fa-ellipsis-v {
border-radius: 60px;
box-shadow: 0 0 2px #888;
padding: 0.5em 0.6em;
font-size: 14px;
}
i.fa-ellipsis-v:hover {
cursor: pointer;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" id="bootstrap-css">
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Slider does not run and style seems to have no effect on it
<div class="slider">
<div class="slide" id="slide-1">
<img src="/images/products/<?php echo $ditt['prodimage'];?>" alt="prodimage1">
<i class="bi-bag-fill" style="font-size: 3rem; color: orange;" data-toggle="modal" data-bs-toggle="modal" data-bs-target="#exampleModal-1"></i>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin-top:64px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order options</h5>
</div>
<div class="modal-body">
<img src="/images/products/<?php echo $ditt['prodimage']; ?>" alt="prodimage1">
<br>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="slide" id="slide-2">
<img src="/images/products/<?php echo $ditt['prodimage'];?>" alt="prodimage2">
<i class="bi-bag-fill" style="font-size: 3rem; color: orange;" data-bs-toggle="modal" data-bs-target="#exampleModal-2"></i>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin-top:64px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order options</h5>
</div>
<div class="modal-body">
<img src="/images/products/<?php echo $ditt['prodimage']; ?>" alt="prodimage2">
<br>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="slide" id="slide-3" data-bs-target="#exampleModal-3">
<img src="/images/products/<?php echo $ditt['prodimage'];?>" alt="prodimage3">
<i class="bi-bag-fill" style="font-size: 3rem; color: orange;"data-bs-toggle="modal" data-bs-target="#exampleModal-3"></i>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal-3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style="margin-top:64px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Order options</h5>
</div>
<div class="modal-body">
<img src="/images/products/<?php echo $ditt['prodimage']; ?>" alt="prodimage3">
<br>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
I'm working on an assignment and I'm only allowed to use HTML, CSS & Bootstrap. I started my project and everything went well until I noticed there's a gap on the right side of my container. Why is this and how can I remove it? Thanks in advance!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tarea Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Saira+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<div class="container-fluid" style="padding-left: 0; padding-right: 0;">
<!-- Header -->
<header></header>
<nav class="navbar justify-content-center navbar-dark bg-dark">
<div>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Pet Care
</li>
<li class="nav-item">
Volunteer
</li>
<li class="nav-item">
Adopt an friend!
</li>
<li class="nav-item">
Donate
</li>
<li class="nav-item">
Contact us
</li>
</ul>
</div>
</nav>
<main>
<div class="row row-cols-1 sec1 box">
<div class="col">
<img class="img-fluid rounded mx-auto mt-5 d-block" src="/img/logo.png">
</div>
</div>
<div class="row row-cols-1 sec2 box" style="width: 100%;">
<div class="col mt-3">
<h1>Who we are:</h1>
</div>
<div class="col mb-5 text-center">
<p>The New Hope Animal Shelter NHAS is a registered charity that has been operating for 150 years. The Society provides care, comfort and compassion to animals in need in communities across the country. It values all animals and advocates to treat them with respect and kindness. The Society strives to keep pets and families together and do so through a variety of community support services, such as sheltering and adoptions, including emergency sheltering, feral cat management programs, animal transfers, food distribution, humane education, animal advocacy, and spay/neuter services. The NHAS does not receive annual government funding and relies on donations to provide programs and services to help animals in need.</p>
</div>
</div>
<div class="row row-cols-1 sec3 box">
<div class="col align-self-center">
<h1>Compassion for animals is intimately connected with goodness of character; and it may be confidently asserted that he who is cruel to animals cannot be a good man.</h1>
<p>-S. Chopenhauer</p>
</div>
</div>
<div class="row row-cols-1 sec4 box">
<div class="col">
<h1>From our Supporters</h1>
</div>
<div id="carouselExampleControls" class="col carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/carousel1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/carousel2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/540518/pexels-photo-540518.jpeg" class="d-block w-100" alt="...">
</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>
</div>
</main>
<section>
</section>
<footer>
<p></p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
CSS:
html{
height: 100%;
width: 100%;
}
body{
background-color: #116D44;
background-position: center;
}
header{
align-items: center;
}
nav{
font-family: 'Saira Condensed', sans-serif;
}
.box{
width: 100%;
height: 600px;
padding: 40px 60px;
color: white;
font-family: 'Saira Condensed', sans-serif;
text-align: center;
}
.box h1{
font-family: 'Anton', sans-serif;
font-size: 50px;
text-shadow: 0px 0px 5px #000;
}
.box p{
font-size: 25px;
margin-top: 100px;
}
.sec1{
height: 100vh;
background-image: url(/img/indexbg1.jpg);
background-attachment: fixed;
background-size: cover;
}
.sec2{
background: #28689c;
}
.sec3{
height: 100vh;
background-image: url(/img/indexbg2.jpg);
background-attachment: fixed;
background-size: cover;
}
.carousel{
width: 640px;
height: 360px;
margin: 0 auto;
}
.carousel-inner img{
width: 640px;
height: 360px;
}
.sec4{
background: #546C08;
}
In order to remove the gap on the right, I tried to set the "max-width: unset", "overflow-x: hidden; width: 100vw;" on the body, "padding-right: 0; margin-right: 0;" on my .row classes, adding "img-fluid" to the images in my carousel, setting margin, padding and width to 0, 0 & 100vw respectively, setting "box-sizing: border-box;" on my html and "margin: 0;" on the body but to no avail.
Just remove margin-left on the row class.
html {
height: 100%;
width: 100%;
}
body {
background-color: #116D44;
background-position: center;
}
header {
align-items: center;
}
nav {
font-family: 'Saira Condensed', sans-serif;
}
.box {
width: 100%;
height: 600px;
padding: 40px 60px;
color: white;
font-family: 'Saira Condensed', sans-serif;
text-align: center;
}
.box h1 {
font-family: 'Anton', sans-serif;
font-size: 50px;
text-shadow: 0px 0px 5px #000;
}
.box p {
font-size: 25px;
margin-top: 100px;
}
.sec1 {
height: 100vh;
background-image: url(/img/indexbg1.jpg);
background-attachment: fixed;
background-size: cover;
}
.sec2 {
background: #28689c;
}
.sec3 {
height: 100vh;
background-image: url(/img/indexbg2.jpg);
background-attachment: fixed;
background-size: cover;
}
.carousel {
width: 640px;
height: 360px;
margin: 0 auto;
}
.carousel-inner img {
width: 640px;
height: 360px;
}
.sec4 {
background: #546C08;
}
main .row {
margin-left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tarea Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Saira+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<div class="container-fluid" style="padding-left: 0; padding-right: 0;">
<!-- Header -->
<header></header>
<nav class="navbar justify-content-center navbar-dark bg-dark">
<div>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Pet Care
</li>
<li class="nav-item">
Volunteer
</li>
<li class="nav-item">
Adopt an friend!
</li>
<li class="nav-item">
Donate
</li>
<li class="nav-item">
Contact us
</li>
</ul>
</div>
</nav>
<main>
<div class="row row-cols-1 sec1 box">
<div class="col">
<img class="img-fluid rounded mx-auto mt-5 d-block" src="/img/logo.png">
</div>
</div>
<div class="row row-cols-1 sec2 box" style="width: 100%;">
<div class="col mt-3">
<h1>Who we are:</h1>
</div>
<div class="col mb-5 text-center">
<p>The New Hope Animal Shelter NHAS is a registered charity that has been operating for 150 years. The Society provides care, comfort and compassion to animals in need in communities across the country. It values all animals and advocates to treat
them with respect and kindness. The Society strives to keep pets and families together and do so through a variety of community support services, such as sheltering and adoptions, including emergency sheltering, feral cat management programs,
animal transfers, food distribution, humane education, animal advocacy, and spay/neuter services. The NHAS does not receive annual government funding and relies on donations to provide programs and services to help animals in need.</p>
</div>
</div>
<div class="row row-cols-1 sec3 box">
<div class="col align-self-center">
<h1>Compassion for animals is intimately connected with goodness of character; and it may be confidently asserted that he who is cruel to animals cannot be a good man.</h1>
<p>-S. Chopenhauer</p>
</div>
</div>
<div class="row row-cols-1 sec4 box">
<div class="col">
<h1>From our Supporters</h1>
</div>
<div id="carouselExampleControls" class="col carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/carousel1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/carousel2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/540518/pexels-photo-540518.jpeg" class="d-block w-100" alt="...">
</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>
</div>
</main>
<section>
</section>
<footer>
<p></p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
I know this has been asked many times, but I still cannot seem to fix my code. As you can see, I am copied the code directly from bootstrap, and I was able to get my buttons to appear, but they are not activating. Also, google fonts was directly imported, but it too is not changing my fonts as it should. It is remaining as default.
#title {
background-color: #FF4C68;
color: WHITE;
}
.container-fluid{
padding: 3% 15%;
}
/* H1 FONT FAMILY NOT WORKING */
h1 {
font-family: "Montserrat-Black";
font-size: 3.5rem;
line-height: 1.5;
}
h2 {
font-family: "Montserrat-Bold";
font-size: 3rem;
line-height: 1.5;
}
h3{
font-family: "Montserrat-Bold";
font-size: 1.5rem;
}
p{
color: #8F8F8F;
}
body {
font-family: "Montserrat";
}
/* NAVIGATION BAR */
.navbar {
padding-bottom: 4.5rem;
}
.navbar-brand {
font-family: 'Ubuntu';
font-size: 2.5rem;
font-weight: bold;
color: yellow;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-size: 1.2rem;
font-family: "Montserrat-Light";
}
/* DOWNLOAD BUTTONS */
.download-button {
margin: 5% 3% 5%;
}
/* TITLE IMAGE */
.title-image {
width: 60%;
transform: rotate(45deg);
}
/* FEATURES SECTION */
#features {
padding: 7% 15%;
text-align: center;
padding: 5%;
}
/* CHANGE PADDING ABOVE IF FIRST BODY ISNT LOOKING RIGHT */
.icon{
color: #ef8172;
margin-bottom: 1rem;
}
.icon:hover{
color: #ff4c68;
}
/* TESTIMONIAL SECTION */
#testimonials {
text-align: center;
background-color: #ef8172;
color: #fff;
}
.testimonial-img{
width: 10%;
border-radius: 100%;
margin: 20px;
}
#press {
background-color: #ef8172;
text-align: center;
padding-bottom: 3%;
}
.press-logo {
width: 15%;
margin: 20px 20px 50px;
}
.carousel-item {
padding: 7% 15%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!-- BOOTSTRAP SCRIPTS -->
<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.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;400;900&family=Ubuntu&display=swap" rel="stylesheet">
<!-- CSS STYLESHEETS -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<!-- C:\Users\dparr\Downloads\TinDog-Start-master\TinDog-Start-master\css\styles.css -->
<!-- FONT AWESOME -->
<script src="https://kit.fontawesome.com/849c3de797.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Tindog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-primary btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fa-brands fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-circle-check fa-4x"></i>
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-bullseye fa-4x"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-heart fa-4x"></i>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials">
<div id="#testimonial-carousel" class="carousel slide" data-bs-ride="false" data-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-img" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" 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="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!-- Press -->
<section id="press">
<img class="press-logo" src="images/techcrunch.png" alt="tc-logo">
<img class="press-logo" src="images/tnw.png" alt="tnw-logo">
<img class="press-logo" src="images/bizinsider.png" alt="biz-insider-logo">
<img class="press-logo" src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<h3>Chihuahua</h3>
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Labrador</h3>
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Mastiff</h3>
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright TinDog</p>
</footer>
</body>
</html>
Remove # in the carousel ID id="testimonial-carousel" and everything will work
Also set the font style like this font-family: 'Montserrat', sans-serif;
/* TESTIMONIAL SECTION */
#testimonials {
text-align: center;
background-color: #ef8172;
color: #fff;
}
.testimonial-img{
width: 10%;
border-radius: 100%;
margin: 20px;
}
#press {
background-color: #ef8172;
text-align: center;
padding-bottom: 3%;
}
.press-logo {
width: 15%;
margin: 20px 20px 50px;
}
.carousel-item {
padding: 7% 15%;
}
<!DOCTYPE html>
<html>
<head>
<!-- BOOTSTRAP SCRIPTS -->
<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.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- FONT AWESOME -->
<script src="https://kit.fontawesome.com/849c3de797.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Testimonials -->
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false" data-pause="hover">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-img" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" 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="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</body>
</html>
1. What exactly is wrong with the buttons? Carousel
Read how to connect the 5 Budstrap correctly
The scripts should be plugged at the very bottom, before </body>
<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>
2. Connecting fonts
html:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
css:
font-family: 'Montserrat', sans-serif;
font-weight: 900;
body{
background-color: #CAF7E3;
}
.container-fluid{
padding: 3% 15%;
}
.navbar{
font-family: 'Montserrat';
font-weight: bold;
}
.navbar-brand{
font-size: 2.5rem;
}
.nav-item{
margin-right: 2rem;
}
#title{
padding: 8% 15%;
background-color: #F8EDED;
}
.slogun{
padding-left: 25px;
font-family: 'Ubuntu';
font-weight: bold;
font-size: 3rem;
}
.img-fruit{
padding-left: 9%;
}
.fruit{
width: 90%;
}
.carousel-inner{
padding: 8% 15%;
}
.unsplash{
object-fit: none;
width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Grocery Store</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,600;0,700;1,900&family=Ubuntu:ital,wght#0,400;0,500;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrap">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-lg-6 slogun">
Not only an apple but fruits every day keeps the doctor away
</div>
<div class="col-lg-6 img-fruit">
<img class="fruit" src="photos/fruit.png" alt="">
</div>
</div>
</div>
<div class="carousel-item">
<img class="unsplash" src="photos/check.jpg" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Here is slide 2 I took the landscape photo from unsplash.com and used it here but since then when I move from slide 1 to slide 2 the carousel section height increases due to image and also the image doesn't in the width of the carousel-item (the image name in the html is check.png) how can i solve this problem.
You can give fixed height and width to the images as required by the carousel:
<img class="fruit" src="photos/fruit.png" alt="" height="50" width="200" >
(Height and Width are in Pixels.)
I have the following structure:
<div class="carousel" id="my-carousel">
<div class="carousel-item">
<div class="text-center">
...
</div>
</div>
<div class="carousel-item">
<div class="text-center">
...
</div>
</div>
<div class="carousel-item">
<div class="text-center">
...
</div>
</div>
</div>
I also have the following script for normalizing the carousel:
function normalizeCarousel() {
function normalize() {
var maxHeight = 0;
$(".carousel-item").each(function() {
var currentHeight = $(this).height();
if (currentHeight > maxHeight) {
maxHeight = currentHeight;
}
});
$("#my-carousel").css("height", maxHeight);
};
normalize();
$(window).on("resize orientationchange", function() {
normalize();
});
}
$(document).ready(function() {
normalizeCarousel();
});
Here is the JSFiddle: JSFiddle
What I'm trying to do is vertically align each text-center div inside the carousel-items. I've tried using flexbox but couldn't manage to make it work!
Thank you in advance!
This is ought to do the trick
.carousel-item {
display: table;
}
.text-center {
display: table-cell;
vertical-align:middle;
}
with flexbox, use something like this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
div.text-center {
position: absolute;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
width: 100%;
color: red;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="text-center">Text Vertically Center Aligned</div>
<img src="la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<div class="text-center">Text Vertically Center Aligned</div>
<img src="chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<div class="text-center">Text Vertically Center Aligned</div>
<img src="ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>