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>
Related
---------//////Question starts here/////---------------
I am trying to make all of my Bootstrap 5 cards even in standard view and responsive to mobile devices, but adjusting the height in CSS does not seem to work. Right now it is responsive, but the pictures are all stretched out. As far as the card's height they are all different sizes. I tried grabbing the card-text "class" and using truncate but it doesn't seem to help either. I feel like I'm so close. Im almost positive it has to do with the card-text class. Any thoughts? I've attached a picture to this question, and here is my code below:
<!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>Portfolio Projects</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/bootstrap.min (15).css" />
</head>
<body>
<!-- ===================== NavBar Starts from here====================== -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">CHAZZY!</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a
class="nav-link active"
aria-current="page"
href="../index.html"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="../About/index.html"
>About</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="../Projects/index.html"
>Projects</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="https://chaz-carothers.netlify.app"
>Tree.Link</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
href="../Contact/index.html"
tabindex="-1"
aria-disabled="true"
>Contact</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- ================== NavBar Ends ========================== -->
<!-- ========================== Project Cards ======================== -->
<div class="container">
<div class="row">
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img src="../Projects/img/weather.jpeg" alt="Weather" />
<div class="card-body">
<h5 class="card-title">Weather API</h5>
<p class="card-text">
This is a weather app I created using the ___ API. I added
several other weather resources to provide extra information.
</p>
<a
href="../WEATHER API/index.html"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img
src="../Projects/img/Skeletorrr.png"
class="card- img-top"
alt="skeletor"
/>
<div class="card-body">
<h5 class="card-title.text-truncate">Whack-A-Skeletor</h5>
<p class="card-text">
This is my version of a Whack-A-Mole game that I created using plain vanilla JavaScript.
Skeletor is the mole, and the game has background music to the Price Is Right. Once the user
is finished playing, Vincent Price's notorious laugh chimes in at the end.
</p>
<a
href="https://pedantic-swartz-521f4d.netlify.app"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img
src="./img/badguys.png"
class="card- img-top"
alt="villain"
/>
<div class="card-body">
<h5 class="card-title">Disney Villain Page</h5>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore.
</p>
<a
href="https://dizney.netlify.app"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img
src="../Projects/img/memory.jpeg"
class="card- img-top"
alt="memory"
/>
<div class="card-body">
<h5 class="card-title.text-truncate">Harry Potter Memory Game</h5>
<p class="card-text">
My 7 year old son's favorite movie is Harry Potter, so I programmed a memory game for him using JavaScript.
</p>
<a
href="../Projects/Memory Game/index.html"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"
></script>
<!-- JavaScript Bundle with Popper -->
<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>
</body>
</html>
-----------------/////And here is my CSS//// -------------
body {
background-color: gray;
}
.card {
transition: border-color 1s, box-shadow 0.5s;
}
.card:hover {
border-color: rgb(255, 0, 0);
box-shadow: 0px 0px 10px 2px rgb(255, 0, 0);
}
.card-title {
display: flex;
justify-content: center;
}
.film {
font-size: 3rem;
}
#media all and (max-width: 600px) {
.film {
font-size: 2rem;
}
.card {
width: 100%;
}
.card-title {
font-size: 1.5rem;
}
.img-card {
width: 100%;
}
}
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 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>
I wanted to see if it was possible to add arrows to the right of the Bootstrap Accordion headings.
I want the arrows to change from down to up on accordion collapse, is this complicated?
I want just the headings to have the arrows and for them to change on collapse, but I'm having the most trouble trying to figure this out.
Here is the code:
#AccordionHeadings {
font-weight: bolder;
color: slategrey;
font-size: medium;
}
.small:hover {
background-color: #F8E498!important;
}
.list-group-item h5 {
margin-left: 10px;
}
#AccordionText {
margin-bottom: 0px!important;
color: gray;
margin-left: 10px;
}
#AccordIcon {
padding-right: 10px;
height: 25px;
width: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="row">
<div class="col-12 col-md-10 col-md-8">
<h4>Choose the right app for the job!</h4>
<hr style="margin-top: 10px;" />
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
<span id="AccordionHeadings">File Storage and Sharing</span><span class="glyphicon glyphicon-menu-down pull-right"></span></a>
<div id="s0" class="sublinks collapse">
<!-- sublinks collapse -->
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" />
<div class="">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet.
</p>
</div>
</a>
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/uii8cJt.png" />
<div>
<h5>SharePoint</h5>
<p id="AccordionText">Share and manage content, knowledge, and applications to empower teamwork and quickly find information within your organization.</p>
</div>
</a>
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/fV0AGNi.png" />
<div>
<h5>Teams</h5>
<p id="AccordionText">Microsoft Teams is a chat-based workspace offered in Office 365. Teams makes collaborating with your team easy.
</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Update
I have now gotten it to somewhat work thanks to the help from the awesome contributors here at Stack Overflow but I've come across a small problem.
Here is my problem that I'm currently experiencing.
On page load: (Why are the arrows not pointing down on pageload?)
On first Accordion click: (Now the icon is correct)
On second Accordion click: (Perfect now)
Code:
.panel-title:after {
font-family: FontAwesome;
content: "\f106";
float: right;
color: grey;
}
.panel-title.collapsed:after {
content: "\f107";
}
<a href="#" class="list-group-item panel-title" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
<span id="AccordionHeadings">File Storage and Sharing</span></a>
<div id="s0" class="sublinks collapse"> <!-- sublinks collapse -->
<a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<div class="col-md-1">
<img style="height: 32px; width: 45px;" src="/TrainingResourceCenter/O365Training/PublishingImages/Homepage/OneDriveAccordion.png" />
</div>
<div class="col-md-11">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them
with others, and get them from any device connected to the
Internet.</p>
</div>
</a>
Try this:
.panel-title {
position: relative;
}
.panel-title::after {
content: "\f107";
color: #333;
top: -2px;
right: 0px;
position: absolute;
font-family: "FontAwesome"
}
.panel-title[aria-expanded="true"]::after {
content: "\f106";
}
This is what it looks like in the snippet: PLEASE NOTE this is using font-awesome (for the arrow), so you will need the <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> in your <head> tags
#AccordionHeadings {
font-weight: bolder;
color: slategrey;
font-size: medium;
}
.small:hover {
background-color: #F8E498!important;
}
.list-group-item h5 {
margin-left: 10px;
}
#AccordionText {
margin-bottom: 0px!important;
color: gray;
margin-left: 10px;
}
#AccordIcon {
padding-right: 10px;
height: 25px;
width: 25px;
}
.panel-title {
position: relative;
}
.panel-title::after {
content: "\f107";
color: #333;
top: -2px;
right: 10px;
position: absolute;
font-family: "FontAwesome"
}
.panel-title[aria-expanded="true"]::after {
content: "\f106";
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<div class="row">
<div class="col-12 col-md-10 col-md-8">
<h4>Choose the right app for the job!</h4>
<hr style="margin-top: 10px;" />
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<a href="#" class="list-group-item panel-title" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" />
<span id="AccordionHeadings">File Storage and Sharing</span><span class="glyphicon glyphicon-menu-down pull-right"></span></a>
<div id="s0" class="sublinks collapse">
<!-- sublinks collapse -->
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" />
<div class="">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet.
</p>
</div>
</a>
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/uii8cJt.png" />
<div>
<h5>SharePoint</h5>
<p id="AccordionText">Share and manage content, knowledge, and applications to empower teamwork and quickly find information within your organization.</p>
</div>
</a>
<a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">
<img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/fV0AGNi.png" />
<div>
<h5>Teams</h5>
<p id="AccordionText">Microsoft Teams is a chat-based workspace offered in Office 365. Teams makes collaborating with your team easy.
</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Added the attribute "collapsed" to all the individual Accordion panel-title class and it works perfectly.
<a href="#" class="list-group-item panel-title collapsed" data-toggle="collapse" data-target="#s6" data-parent="#accordion" style="background-color: #e5edf4;">
Like the Bootstrap 3 solution I linked to as a possible duplicate; this can be solved entirely through the use of [aria-expanded=true] as a CSS selector. The only difference in Bootstrap 4 is the actual HTML structure of the accordion, the CSS for applying the arrows remains the same:
.panel-title:after {
font-family: FontAwesome;
content: "\f107";
float: right;
color: grey;
}
.panel-title[aria-expanded="true"]:after {
content: "\f106";
}
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<a href="#" class="list-group-item panel-title" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;">
<span id="AccordionHeadings">File Storage and Sharing</span>
</a>
<div id="s0" class="sublinks collapse">
<a class="list-group-item small" href="#null">
<div class="col-md-1">
[ image ]
</div>
<div class="col-md-11">
<h5>OneDrive</h5>
<p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet.</p>
</div>
</a>
</div>
Note: If you want to use Font Awesome 5.x you may need to adjust the CSS to reference the exact font / font weight as the latest version breaks down its icons across multiple factors.
See it on: voiddevelopment.com
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Test Website</title>
<meta name="viewport" content="width=device-width,, maximum-scale=1, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menuCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><Void></a>
</div>
<div class="collapse navbar-collapse" id="menuCollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Purchase</li>
<li>Contact Us</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="search" />
</div>
<button type="submit"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container-fluid push-spaces">
</div>
</div>
<div class="supporting">
<div class="container-fluid" style="alignment: top;">
<div class="col">
<span class="glyphicon glyphicon-eye-open"></span>
<h3>Professional Design</h3>
<br />
<p>Work with us to create the website design of your dreams.</p>
</div>
<div class="col">
<span class="glyphicon glyphicon-console"></span>
<h3>Great Functionality</h3>
<br />
</div>
<div class="col">
<span class="glyphicon glyphicon-tags"></span>
<h3>Order Now</h3>
<br />
</div>
</div>
</div>
CSS:
.jumbotron{
background: url("jumbotron.jpg") no-repeat center top;
-webkit-background-size: 70%;
-moz-background-size: 70%;
-o-background-size: 70%;
background-size: 70%;
margin-top: 0 auto;
}
.push-spaces {
height: 550px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
float: left;
width: 33%;
font-family: 'Raleway', sans-serif;
text-align: center;
}
.supporting .glyphicon {
font-size: 4em;
}
.supporting .col h3 {
font-weight: bold;
}
On all mobile platforms, there is a odd whitespace showing up between the jumbotron image and the supporting content. This is odd because I did not add any. Perhaps some CSS tag to pull up the supporting content?
you have a div called .push-spaces that's 550px high , a class of container-fluid, which has a margin of 0 auto it is causing the white space.
This ended up being the solution:
<img src="jumbotron.jpg" class="img-responsive" style="margin-left: 10%; margin-right: 10%; width: 80%;">
Just changed the jumbotron to an image. Realized that I didn't need text over it anyway.