Bootstrap Accordion Items are Spaced Weird

Bootstrap Accordion Items are Spaced Weird - html

I am working on this project and playing with the Bootstrap Accordion. It seems that my accordion items are overlapping on top of each other, sometimes within the container, and sometimes on top of the other containers.
Does anyone know how to fix this? Thank you.
I have tried adding containers, but it seems to mess up the accordion.
I would also like to add space under the accordion, but am not sure if adding margins or spacers underneath of it would make it less responsive.
Screenshots:
Accordion 1 `[
*{margin:0;padding:0;}
html {
min-height: 100%;
min-width: 100%;
background-size: cover;
}
body {
background-image: linear-gradient(rgba(143,25,154,1), rgba(200, 5, 158, 0.8));
opacity: 1;
position: relative;
overflow: scroll;
background-size: cover;
}
.sectionOne {
background-image: url(imageFolder/background.png);
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
background-attachment: fixed;
}
.display-1 {
margin-top: 200px;
}
.accordion-title {
font-variant-caps: titling-caps;
position: absoulte;
}
.accordion-button {
font-size: 20px;
font-family: Red Rose;
color: #FEB7EE !important;
border: none !important;
}
.accordion-button:after {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
margin-right:0;
color: rgb(224, 16, 176) !important;
}
.accordion-button:before {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E010B0'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
.accordion-button collapse {
color: rgb(224, 16, 176);
}
.accordion-button:not(.collapsed) {
color: rgb(224, 16, 176) !important;
background-color: rgb(254, 183,238, .8);
}
h2 {
font-family: Red Rose;
color: #FEB7EE;
margin-bottom: 50px;
}
h4 {
font-family: Raleway;
color: #FEB7EE;
}
p {
font-family: Raleway;
}
}
a {
color: #73C3E8;
}
img {
position: absolute;
}
.backgroundElipse {
position:center;
margin-top: 200px;
margin-left: 50px !important;
}
.btn{
margin-top: 50px !important;
margin-left: 25px !important;
color: #FEB7EE !important;
background-color: #49276D !important;
border: none !important;
font-family: Raleway;
max-width: 200px !important;
position: center;
}
<!--html-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!--javascript-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!DOCTYPE html>
<html lang="eng">
<head>
<link href="https://fonts.googleapis.com/css?family=Red+Rose&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.rtl.min.css"
integrity="sha384-4dNpRvNX0c/TdYEbYup8qbjvjaMrgUPh+g4I03CnNtANuv+VAvPL6LqdwzZKV38G" crossorigin="anonymous">
<!--title and favicon-->
</head>
<body>
<div class="container">
<div class="col-12">
<!--section1-->
<div class="sectionOne">
<div class="row">
<div class="col-sm-6">
<!--intro-->
<div class="row">
<h2 class="display-1">Raspberry Pi for Designers</h2>
</div>
<div class="row">
<h4 class="display-7">The Raspberry Pi may be a computer smaller than a deck of cards, but you’ll be
surprised what it can do!</h4>
<button type="button" class="btn btn-secondary btn-lg" href="#learnMore">Learn More</button>
</div>
</div>
<div class="col-sm-6">
<div class="row-sm-6">
<img class="backgroundElipse" src="imageFolder/raspElipse.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--accordion-->
<div class="accordion accordion-flush" id="accordionFlushExample">
<!--about-->
<a id="learnMore">
<div class="accordion-item"></a>
<h2 class="accordion-header" id="flushAbout">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne" onclick="about"
()>
About
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body about">
<p><strong>Raspberry Pi is a</strong> fully featured, low cost, tiny Linux computer that is an easy
way to learn programming and computing.</p>
</div>
</div>
</div>
<!--ingredients-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushIngredients">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
What You'll Need
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div class="container">
<div class="col-md-12">
<div class="col"><img src="" class="img-fluid" alt="raspberry pi icon" width="100" height="100">
</div>
</div>
</h2>
<div class="col">
<h3>Raspberry Pi</h3>
</div>
</div>
<p>Go with models 3 and higher.</p>
</div>
<img src="" class="img-fluid" alt="hdmi monitor icon" width="100" height="100">
<h3>HDMI Monitor</h3>
<p>An HDMI TV works too!</p>
<img src="" alt="SD card icon" class="img-fluid" width="100" height="100">
<h3>SD Card</h3>
<p>Aim for at least 8GB.</p>
<img src="" class="img-fluid" alt="USB Mouse" width="100" height="100">
<h3>USB Mouse</h3>
<p>You can switch to a wireless mouse later.</p>
<img src="" class="img-fluid" alt="USB Keyboard icon" width="100" height="100">
<h3>USB Keyboard</h3>
<p>You can switch to a wireless keyboard later.</p>
<img src="" class="img-fluid" alt="power supply icon" width="100" height="100">
<h3>Power Supply</h3>
<p>Standard 5V USB C or Micro depending on the model.</p>
</div>
</div>
</div>
<!--SetUp-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSetUp">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Set Up
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<h4>Set up your SD card.</h4>
<p>Install the operating system onto the SD card. </p>
<a href="https://www.raspberrypi.org/documentation/installation/noobs.md"> Link to download the NOOBS
Operating
System </a>
<h4>Plug everything in.</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">
<p>Make sure everything is plugged in before turning it on.</p>
</div>
</div>
</div>
<!--options-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushOptions">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
What Can You Do?
</button>
</h2>
<div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="random_number1" class="carousel slide youtube-carousel" data-ride="carousel"
data-interval="false">
<div class="carousel-inner">
<div class="video-container item active">
<div class="youtube-video" id='AO89eXKO0c4'></div>
<div class="carousel-caption">Video 1</div>
</div>
<div class="video-container item">
<div class="youtube-video" id='6MjRVkm9CF0'></div>
<div class="carousel-caption">Video 2</div>
</div>
<div class="video-container item ">
<div class="youtube-video" id='R8poo-zCK9g'></div>
<div class="carousel-caption">Video 3</div>
</div>
</div>
<div class="controls">
<a class="left carousel-control" href="#random_number1" data-slide="prev">
<div class="left-button">
<div class="glyphicon glyphicon-chevron-left"></div>
</div>
</a>
<a class="right carousel-control" href="#random_number1" data-slide="next">
<div class="right-button">
<div class="glyphicon glyphicon-chevron-right"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--python-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushPython">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
Code with Python
</button>
</h2>
<div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<h4>Open Thonny</h4>
<p>Use Thonny to create new programs and systems on your Raspberry Pi </p>
Link to see what you can do with Python
<h4>Learn Python</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">
</div>
</div>
</div>
<!--accessories-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushAccessories">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">
Add Ons & Accessories
</button>
</h2>
<div id="flush-collapseSix" class="accordion-collapse collapse" aria-labelledby="flush-headingSix"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Camera</h5>
<p>Take some photos with your raspberry pi.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Touch Screen</h5>
<p>Have a fully handheld experience with this screen addition.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.adafruit.com/product/2707" class="d-block w-100"
alt="Pimironi Picade Game Controller">
<div class="carousel-caption d-none d-md-block">
<h5>Pimoroni Picade Console Controller</h5>
<p>For a retro gaming experience.</p>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"
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="#carouselExampleDark"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<!--sensehat-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSenseHat">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">
SenseHat
</button>
</h2>
<div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven"
data-bs-parent="#accordionFlushExample">
<img src="" class="img-fluid" alt="SenseHat Kiss" width="200" height="250">
<pre>
<code>
from sense_hat import SenseHat
sense = SenseHat()
# Define some colours
r = (255, 0, 0)
p = (230, 0, 255)
b = (0, 255, 247)
O = (0, 0, 0)
X = (255, 255, 0)
# Get your SenseHat to give you a kiss
kiss = [
O, X, X, X, X, X, X, O,
X, O, O, O, O, O, O, X,
X, O, O, O, O, O, O, X,
X, b, b, O, O, b, b, X,
X, O, O, p, p, O, O, X,
X, O, r, r, r, r, O, X,
X, O, O, O, O, O, O, X,
O, X, X, X, X, X, X, O
]
# Display these colours on the LED matrix
sense.set_pixels(kiss)
</code>
</pre>
</div>
</div>
<!--projects-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSenseHat">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">
SenseHat Projects
</button>
</h2>
<div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight"
data-bs-parent="#accordionFlushEight">
<div class="accordion-body">
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p class="card-text">This will be a cool project idea.</p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 2</h5>
<p class="card-text">Another cool project. </p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 3</h5>
<p class="card-text">Last cool project goes here.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--resources-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushResources">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseNine" aria-expanded="false" aria-controls="flush-collapseNine">
Raspberry Pi Resources
</button>
</h2>
<div id="flush-collapseNine" class="accordion-collapse collapse" aria-labelledby="flush-headingNine"
data-bs-parent="#accordionFlushNine">
<div class="accordion-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">Link</li>
<li class="list-group-item">Another Link</li>
<li class="list-group-item">Another another link</li>
<li class="list-group-item">Fourth link</li>
<li class="list-group-item">Last link</li>
</ul>
</div>
</div>
</div>
<!--end tag-->
</div>
</div>
</body>
<link href="./stylesheet.css" rel="stylesheet" />
<script src="script.js"></script>
</html>
]2`

You have a mix of Bootstrap 3, 4, and 5 files. You should have just one set of Bootstrap files. Since you have code from bootstrap-5, I’m assuming that’s what you want to use (no support for IE11). You have files before the DOCTYPE and after the body closing tag. Some of your components are overlapping other components as you’re using position absolute for all images and a large top margin for at least one (backgroundElipse).
I cleaned up your file a little bit (deleted your img style and hid the backgroundElipse).
<!DOCTYPE html>
<html lang="eng">
<head>
<link href="https://fonts.googleapis.com/css?family=Red+Rose&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet" />
<!-- Required meta tags -->
<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.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!--title and favicon-->
<style>
* {
margin: 0;
padding: 0;
}
html {
min-height: 100%;
min-width: 100%;
background-size: cover;
}
body {
background-image: linear-gradient(rgba(143, 25, 154, 1), rgba(200, 5, 158, 0.8));
opacity: 1;
position: relative;
overflow: scroll;
background-size: cover;
}
.sectionOne {
background-image: url(imageFolder/background.png);
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
background-attachment: fixed;
}
.display-1 {
margin-top: 200px;
}
.accordion-title {
font-variant-caps: titling-caps;
position: absoulte;
}
.accordion-button {
font-size: 20px;
font-family: Red Rose;
color: #FEB7EE !important;
border: none !important;
}
.accordion-button:after {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
margin-right: 0;
color: rgb(224, 16, 176) !important;
}
.accordion-button:before {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E010B0'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
.accordion-button collapse {
color: rgb(224, 16, 176);
}
.accordion-button:not(.collapsed) {
color: rgb(224, 16, 176) !important;
background-color: rgb(254, 183, 238, .8);
}
h2 {
font-family: Red Rose;
color: #FEB7EE;
margin-bottom: 50px;
}
h4 {
font-family: Raleway;
color: #FEB7EE;
}
p {
font-family: Raleway;
}
a {
color: #73C3E8;
}
.backgroundElipse {
display: none;
position: center;
margin-top: 200px;
margin-left: 50px !important;
}
.btn {
margin-top: 50px !important;
margin-left: 25px !important;
color: #FEB7EE !important;
background-color: #49276D !important;
border: none !important;
font-family: Raleway;
max-width: 200px !important;
position: center;
}
</style>
</head>
<body>
<div class="container">
<div class="col-12">
<!--section1-->
<div class="sectionOne">
<div class="row">
<div class="col-sm-6">
<!--intro-->
<div class="row">
<h2 class="display-1">Raspberry Pi for Designers</h2>
</div>
<div class="row">
<h4 class="display-7">The Raspberry Pi may be a computer smaller than a deck of cards, but you’ll be
surprised what it can do!</h4>
<button type="button" class="btn btn-secondary btn-lg" href="#learnMore">Learn More</button>
</div>
</div>
<div class="col-sm-6">
<div class="row-sm-6">
<img class="backgroundElipse" src="imageFolder/raspElipse.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--accordion-->
<div class="accordion accordion-flush" id="accordionFlushExample">
<!--about-->
<a id="learnMore">
<div class="accordion-item">
</a>
<h2 class="accordion-header" id="flushAbout">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne" onclick="about" ()>
About
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body about">
<p><strong>Raspberry Pi is a</strong> fully featured, low cost, tiny Linux computer that is an easy
way to learn programming and computing.</p>
</div>
</div>
</div>
<!--ingredients-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushIngredients">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
What You'll Need
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div class="container">
<div class="col-md-12">
<div class="col"><img src="" class="img-fluid" alt="raspberry pi icon" width="100" height="100">
</div>
</div>
</h2>
<div class="col">
<h3>Raspberry Pi</h3>
</div>
</div>
<p>Go with models 3 and higher.</p>
</div>
<img src="" class="img-fluid" alt="hdmi monitor icon" width="100" height="100">
<h3>HDMI Monitor</h3>
<p>An HDMI TV works too!</p>
<img src="" alt="SD card icon" class="img-fluid" width="100" height="100">
<h3>SD Card</h3>
<p>Aim for at least 8GB.</p>
<img src="" class="img-fluid" alt="USB Mouse" width="100" height="100">
<h3>USB Mouse</h3>
<p>You can switch to a wireless mouse later.</p>
<img src="" class="img-fluid" alt="USB Keyboard icon" width="100" height="100">
<h3>USB Keyboard</h3>
<p>You can switch to a wireless keyboard later.</p>
<img src="" class="img-fluid" alt="power supply icon" width="100" height="100">
<h3>Power Supply</h3>
<p>Standard 5V USB C or Micro depending on the model.</p>
</div>
</div>
</div>
<!--SetUp-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSetUp">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Set Up
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<h4>Set up your SD card.</h4>
<p>Install the operating system onto the SD card. </p>
<a href="https://www.raspberrypi.org/documentation/installation/noobs.md"> Link to download the NOOBS
Operating
System </a>
<h4>Plug everything in.</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">
<p>Make sure everything is plugged in before turning it on.</p>
</div>
</div>
</div>
<!--options-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushOptions">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
What Can You Do?
</button>
</h2>
<div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="random_number1" class="carousel slide youtube-carousel" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="video-container item active">
<div class="youtube-video" id='AO89eXKO0c4'></div>
<div class="carousel-caption">Video 1</div>
</div>
<div class="video-container item">
<div class="youtube-video" id='6MjRVkm9CF0'></div>
<div class="carousel-caption">Video 2</div>
</div>
<div class="video-container item ">
<div class="youtube-video" id='R8poo-zCK9g'></div>
<div class="carousel-caption">Video 3</div>
</div>
</div>
<div class="controls">
<a class="left carousel-control" href="#random_number1" data-slide="prev">
<div class="left-button">
<div class="glyphicon glyphicon-chevron-left"></div>
</div>
</a>
<a class="right carousel-control" href="#random_number1" data-slide="next">
<div class="right-button">
<div class="glyphicon glyphicon-chevron-right"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--python-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushPython">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
Code with Python
</button>
</h2>
<div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<h4>Open Thonny</h4>
<p>Use Thonny to create new programs and systems on your Raspberry Pi </p>
Link to see what you can do with Python
<h4>Learn Python</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">
</div>
</div>
</div>
<!--accessories-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushAccessories">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">
Add Ons & Accessories
</button>
</h2>
<div id="flush-collapseSix" class="accordion-collapse collapse" aria-labelledby="flush-headingSix" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Camera</h5>
<p>Take some photos with your raspberry pi.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Touch Screen</h5>
<p>Have a fully handheld experience with this screen addition.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.adafruit.com/product/2707" class="d-block w-100" alt="Pimironi Picade Game Controller">
<div class="carousel-caption d-none d-md-block">
<h5>Pimoroni Picade Console Controller</h5>
<p>For a retro gaming experience.</p>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" 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="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<!--sensehat-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSenseHat">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">
SenseHat
</button>
</h2>
<div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven" data-bs-parent="#accordionFlushExample">
<img src="" class="img-fluid" alt="SenseHat Kiss" width="200" height="250">
<pre>
<code>
from sense_hat import SenseHat
sense = SenseHat()
# Define some colours
r = (255, 0, 0)
p = (230, 0, 255)
b = (0, 255, 247)
O = (0, 0, 0)
X = (255, 255, 0)
# Get your SenseHat to give you a kiss
kiss = [
O, X, X, X, X, X, X, O,
X, O, O, O, O, O, O, X,
X, O, O, O, O, O, O, X,
X, b, b, O, O, b, b, X,
X, O, O, p, p, O, O, X,
X, O, r, r, r, r, O, X,
X, O, O, O, O, O, O, X,
O, X, X, X, X, X, X, O
]
# Display these colours on the LED matrix
sense.set_pixels(kiss)
</code>
</pre>
</div>
</div>
<!--projects-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSenseHat">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">
SenseHat Projects
</button>
</h2>
<div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight" data-bs-parent="#accordionFlushEight">
<div class="accordion-body">
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p class="card-text">This will be a cool project idea.</p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 2</h5>
<p class="card-text">Another cool project. </p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 3</h5>
<p class="card-text">Last cool project goes here.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--resources-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushResources">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseNine" aria-expanded="false" aria-controls="flush-collapseNine">
Raspberry Pi Resources
</button>
</h2>
<div id="flush-collapseNine" class="accordion-collapse collapse" aria-labelledby="flush-headingNine" data-bs-parent="#accordionFlushNine">
<div class="accordion-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">Link</li>
<li class="list-group-item">Another Link</li>
<li class="list-group-item">Another another link</li>
<li class="list-group-item">Fourth link</li>
<li class="list-group-item">Last link</li>
</ul>
</div>
</div>
</div>
<!--end tag-->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>

Related

Setting Carousel (Images) Height Equal to Window Height

I have this page that loads a carousel but I want the carousel to fit in the window without having the vertical scrollbar as shown in the picture. How can I achieve that please?
Page:
<div id="carouselIndicators" class="carousel slide" data-bs-ride="carousel" style="margin-bottom:40px;">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner rounded-corners">
<div class="carousel-item active">
<img src="/images/carousel/carosel1.jpg" class="d-block w-100" alt="carosel1">
<div class="carousel-caption d-none d-md-block">
<h1 class="text-success fw-bold fst-italic font-monospace">Seamless Allocation of Subjects</h1>
<p class="text-warning fst-italic">
****************Some Text****************
</p>
</div>
</div>
<div class="carousel-item">
<img src="images/carousel/carosel2.jpg" class="d-block w-100" alt="carosel2">
<div class="carousel-caption d-none d-md-block">
<h1 class="text-success fw-bold fst-italic font-monospace">Even Distribution of Classes</h1>
<p class="text-warning fst-italic">
****************Some Text****************
</p>
</div>
</div>
<div class="carousel-item">
<img src="images/carousel/carosel3.jpg" class="d-block w-100" alt="carosel3">
<div class="carousel-caption d-none d-md-block">
<h1 class="text-success fw-bold fst-italic font-monospace">Class Management</h1>
<p class="text-warning fst-italic">
****************Some Text****************
</p>
</div>
</div>
</div>
<button class="carousel-control-prev" id="#carouselIndicators-prev" type="button" data-bs-target="#carouselIndicators" 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" id="#carouselIndicators-next" type="button" data-bs-target="#carouselIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Current View:
click to view the rendered view

You need to use slider height as calc attribute For example
height: calc(100vh - 0px); //Increase/decrease the value in pixel as needed
Then increase/decrease the value in pixels so that for every screen your slider will take windows height.
Let me know if this will work for you.

Bootstrap 5 responsive carousel text problems

I'm building a new website, I'm using bootstrap 5. i have added a responsive carousel to the header field, but the text and button in the carousel are not compatible. I am adding a few images and source code to better understand the problem.
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="3"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/slider/5.png" alt="Los Angeles" class="d-block img-fluid" style="width:100%">
<div class="carousel-caption">
<h3>BİZİ ARAMAKTAN ÇEKİNMEYİN</h3>
<p>Teknik Destek Hizmetleri</p>
<p>+90 850 111 11 11</p>
<button type="button" class="btn btn-outline-danger">Detaylı Bilgi</button>
</div>
</div>
<div class="carousel-item">
<img src="images/slider/1.png" alt="" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Yakınınızda bir <span style="color:#0597d4;">3CX</span> Distribütörü arıyorsanız, doğru
yerdesiniz.</h3><br />
<button type="button" class="btn btn-outline-info">Detaylı Bilgi</button>
</div>
</div>
<div class="carousel-item">
<img src="images/slider/7.png" alt="" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Fortinet BİLİŞİM</h3>
<p><span style="color: red; ">FORTİNET TÜRKİYENİN</span> SELECT PARTNERİ</p>
</div>
</div>
<div id="special" class="carousel-item">
<img src="images/slider/12.png" alt="" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Sektör tecrübemizi yeni neslin çalışma koşulları ile
birleştirerek,</h3>
<p>kurumların iç dinamiklerine özel avantajlı
çözüm üretme vizyonundan yola çıktık.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/slider/15.png" alt="" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Fortinet olarak, yerel alan ağı, uzak ağ, kablosuz ağ, ağ güvenliği ve güvenli uzaktan erişim gibi
</h3>
<p>ağ teknolojilerinin kurulumu ve devreye alınması gibi ağ çözümlerini sunuyoruz.</p>
</div>
</div>
</div>
</div>
<!-- Carousel -->
CSS code
.carousel-caption{
transform: translateY(-50%) ;
bottom: initial;
top: 50%;
}
enter image description here
enter image description here

try to add d-flex class to the carousel-caption, also add align-items-center
<div class="carousel-caption align-items-center d-flex">
<h3>BİZİ ARAMAKTAN ÇEKİNMEYİN</h3>
<p>Teknik Destek Hizmetleri</p>
<p>+90 850 111 11 11</p>
<button type="button" class="btn btn-outline-danger">Detaylı Bilgi</button>
</div>

Align 2 different elements inside an accordion button - Bootstrap 5

I'm using Bootstrap 5 and am trying to align a <p> tag and a <span> to the left and right, respectively.
I've tried a bunch of different things and I can't make them go to opposite directions if they're inside the button tag. Maybe this is by design but I thought I'd try it here.
Here's my code:
<div class="accordion" id="accordion2">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2"
aria-expanded="true" aria-controls="collapse2">
<p class="h5 float-start">Grade 2</p>
<span class="h5 float-end">1 <i class="fas fa-book"></i></span>
</button>
</h2>
<div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordion2">
<div class="accordion-body" style="padding-bottom:0px;">
Unit 1 <p>Some text goes here.</p>
</div>
</div>
</div>
</div>
I get the following result (everything is aligned to the left).
As simple as it may sound, I couldn't make it work after browsing the web for solutions. Any pointers would be appreciated.

For aligning the child element at both ends you can use bootstarp d-Flex class
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2"
aria-expanded="true" aria-controls="collapse2">
<p class="h5 mb-0 flex-grow-1">Grade 2</p>
<span class="h5 mb-0 pr-3">1 <i class="fas fa-book"></i></span>
</button>
</h2>
<div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordion2">
<div class="accordion-body" style="padding-bottom:0px;">
Unit 1 <p>Some text goes here.</p>
</div>
</div>
</div>
</div>```

It is because your button has display:flex try setting that to display:block and there you go.
.accordion-item .accordion-button {
display: block;
}
.accordion-button:not(.collapsed)::after {
background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
transform: rotate(
-180deg);
position: absolute;
right: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="accordion" id="accordion2">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2"
aria-expanded="true" aria-controls="collapse2">
<p class="h5 float-start">Grade 2</p>
<span class="h5 float-end">1 <i class="fas fa-book"></i></span>
</button>
</h2>
<div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordion2">
<div class="accordion-body" style="padding-bottom:0px;">
Unit 1 <p>Some text goes here.</p>
</div>
</div>
</div>
</div>
However, you have to re-position your background (::after) for the button

Bootstrap button OnClick() Navigate to Different Part of Same Page

I have a button CTA that I'd like to have it jump to the second part of the webpage. I have tried both onclick and the <a href:"# method but neither of them are doing anything. I have tried linking it to both the class and the id of the About section as well as the accordionFlushExample id. The button has yet to respond to anything.
Any advice?
* {
margin: 0;
padding: 0;
}
html {
min-height: 100%;
min-width: 100%;
background-size: cover;
}
body {
background-image: linear-gradient(rgba(143, 25, 154, 1), rgba(200, 5, 158, 0.8));
opacity: 1;
position: relative;
overflow: scroll;
background-size: cover;
}
.sectionOne {
background-image: url(imageFolder/background.png);
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
background-attachment: fixed;
}
.display-1 {
margin-top: 200px;
}
.accordion-title {
font-variant-caps: titling-caps;
position: absoulte;
}
.accordion-button {
font-size: 20px;
font-family: Red Rose;
color: #FEB7EE !important;
border: none !important;
}
.accordion-button:after {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FEB7EE'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
margin-right: 0;
color: rgb(224, 16, 176) !important;
}
.accordion-button:before {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E010B0'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
.accordion-button collapse {
color: rgb(224, 16, 176);
}
.accordion-button:not(.collapsed) {
color: rgb(224, 16, 176) !important;
background-color: rgb(254, 183, 238, .8);
}
h2 {
font-family: Red Rose;
color: #FEB7EE;
margin-bottom: 50px;
}
h4 {
font-family: Raleway;
color: #FEB7EE;
}
p {
font-family: Raleway;
}
a {
color: #73C3E8;
}
.backgroundElipse {
position: center;
margin-top: 200px;
margin-left: 50px !important;
}
.btn {
margin-top: 50px !important;
margin-left: 25px !important;
color: #FEB7EE !important;
background-color: #49276D !important;
border: none !important;
font-family: Raleway;
max-width: 200px !important;
position: center;
}
<!--html-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!--javascript-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!DOCTYPE html>
<html lang="eng">
<head>
<link href="https://fonts.googleapis.com/css?family=Red+Rose&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.rtl.min.css"
integrity="sha384-4dNpRvNX0c/TdYEbYup8qbjvjaMrgUPh+g4I03CnNtANuv+VAvPL6LqdwzZKV38G" crossorigin="anonymous">
<!--title and favicon-->
</head>
<body>
<div class="sectionOne">
<div class="container">
<div class="col-12">
<!--section1-->
<div class="row">
<div class="col-sm-6">
<!--intro-->
<div class="row">
<h2 class="display-1">Raspberry Pi for Designers</h2>
</div>
<div class="row">
<h4 class="display-7">The Raspberry Pi may be a computer smaller than a deck of cards, but you’ll be
surprised what it can do!</h4>
<button type="button" class="btn btn-secondary btn-lg" href="#learnMore">Learn More</button>
</div>
</div>
<div class="col-sm-6">
<div class="row-sm-6">
<img class="backgroundElipse" src="imageFolder/raspElipse.png" />
</div>
</div>
</div>
</div>
</div>
</div>
<!--accordion-->
<div class="accordion accordion-flush" id="accordionFlushExample">
<!--about-->
<a id="learnMore">
<div class="accordion-item"></a>
<h2 class="accordion-header" id="flushAbout">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne" onclick="about"
()>
About
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body about">
<p><strong>Raspberry Pi is a</strong> fully featured, low cost, tiny Linux computer that is an easy
way to learn programming and computing.</p>
</div>
</div>
</div>
<!--ingredients-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushIngredients">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
What You'll Need
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div class="container">
<div class="col-md-12">
<div class="col"><img src="" class="img-fluid" alt="raspberry pi icon" width="100" height="100">
</div>
</div>
</h2>
<div class="col">
<h3>Raspberry Pi</h3>
</div>
</div>
<p>Go with models 3 and higher.</p>
</div>
<img src="" class="img-fluid" alt="hdmi monitor icon" width="100" height="100">
<h3>HDMI Monitor</h3>
<p>An HDMI TV works too!</p>
<img src="" alt="SD card icon" class="img-fluid" width="100" height="100">
<h3>SD Card</h3>
<p>Aim for at least 8GB.</p>
<img src="" class="img-fluid" alt="USB Mouse" width="100" height="100">
<h3>USB Mouse</h3>
<p>You can switch to a wireless mouse later.</p>
<img src="" class="img-fluid" alt="USB Keyboard icon" width="100" height="100">
<h3>USB Keyboard</h3>
<p>You can switch to a wireless keyboard later.</p>
<img src="" class="img-fluid" alt="power supply icon" width="100" height="100">
<h3>Power Supply</h3>
<p>Standard 5V USB C or Micro depending on the model.</p>
</div>
</div>
</div>
<!--SetUp-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSetUp">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Set Up
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<h4>Set up your SD card.</h4>
<p>Install the operating system onto the SD card. </p>
<a href="https://www.raspberrypi.org/documentation/installation/noobs.md"> Link to download the NOOBS
Operating
System </a>
<h4>Plug everything in.</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">
<p>Make sure everything is plugged in before turning it on.</p>
</div>
</div>
</div>
<!--options-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushOptions">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
What Can You Do?
</button>
</h2>
<div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="random_number1" class="carousel slide youtube-carousel" data-ride="carousel"
data-interval="false">
<div class="carousel-inner">
<div class="video-container item active">
<div class="youtube-video" id='AO89eXKO0c4'></div>
<div class="carousel-caption">Video 1</div>
</div>
<div class="video-container item">
<div class="youtube-video" id='6MjRVkm9CF0'></div>
<div class="carousel-caption">Video 2</div>
</div>
<div class="video-container item ">
<div class="youtube-video" id='R8poo-zCK9g'></div>
<div class="carousel-caption">Video 3</div>
</div>
</div>
<div class="controls">
<a class="left carousel-control" href="#random_number1" data-slide="prev">
<div class="left-button">
<div class="glyphicon glyphicon-chevron-left"></div>
</div>
</a>
<a class="right carousel-control" href="#random_number1" data-slide="next">
<div class="right-button">
<div class="glyphicon glyphicon-chevron-right"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--python-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushPython">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseFive" aria-expanded="false" aria-controls="flush-collapseFive">
Code with Python
</button>
</h2>
<div id="flush-collapseFive" class="accordion-collapse collapse" aria-labelledby="flush-headingFive"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<h4>Open Thonny</h4>
<p>Use Thonny to create new programs and systems on your Raspberry Pi </p>
Link to see what you can do with Python
<h4>Learn Python</h4>
<img src="programming.gif" class="img-fluid" alt="Computer Man" style="width:100px;height:100px;">
</div>
</div>
</div>
<!--accessories-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushAccessories">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseSix" aria-expanded="false" aria-controls="flush-collapseSix">
Add Ons & Accessories
</button>
</h2>
<div id="flush-collapseSix" class="accordion-collapse collapse" aria-labelledby="flush-headingSix"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Camera</h5>
<p>Take some photos with your raspberry pi.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100 img-fluid" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Touch Screen</h5>
<p>Have a fully handheld experience with this screen addition.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://www.adafruit.com/product/2707" class="d-block w-100"
alt="Pimironi Picade Game Controller">
<div class="carousel-caption d-none d-md-block">
<h5>Pimoroni Picade Console Controller</h5>
<p>For a retro gaming experience.</p>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"
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="#carouselExampleDark"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<!--sensehat-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSenseHat">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseSeven" aria-expanded="false" aria-controls="flush-collapseSeven">
SenseHat
</button>
</h2>
<div id="flush-collapseSeven" class="accordion-collapse collapse" aria-labelledby="flush-headingSeven"
data-bs-parent="#accordionFlushExample">
<img src="" class="img-fluid" alt="SenseHat Kiss" width="200" height="250">
<pre>
<code>
from sense_hat import SenseHat
sense = SenseHat()
# Define some colours
r = (255, 0, 0)
p = (230, 0, 255)
b = (0, 255, 247)
O = (0, 0, 0)
X = (255, 255, 0)
# Get your SenseHat to give you a kiss
kiss = [
O, X, X, X, X, X, X, O,
X, O, O, O, O, O, O, X,
X, O, O, O, O, O, O, X,
X, b, b, O, O, b, b, X,
X, O, O, p, p, O, O, X,
X, O, r, r, r, r, O, X,
X, O, O, O, O, O, O, X,
O, X, X, X, X, X, X, O
]
# Display these colours on the LED matrix
sense.set_pixels(kiss)
</code>
</pre>
</div>
</div>
<!--projects-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushSenseHat">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseEight" aria-expanded="false" aria-controls="flush-collapseEight">
SenseHat Projects
</button>
</h2>
<div id="flush-collapseEight" class="accordion-collapse collapse" aria-labelledby="flush-headingEight"
data-bs-parent="#accordionFlushEight">
<div class="accordion-body">
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p class="card-text">This will be a cool project idea.</p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 2</h5>
<p class="card-text">Another cool project. </p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Project 3</h5>
<p class="card-text">Last cool project goes here.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--resources-->
<div class="accordion-item">
<h2 class="accordion-header" id="flushResources">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flush-collapseNine" aria-expanded="false" aria-controls="flush-collapseNine">
Raspberry Pi Resources
</button>
</h2>
<div id="flush-collapseNine" class="accordion-collapse collapse" aria-labelledby="flush-headingNine"
data-bs-parent="#accordionFlushNine">
<div class="accordion-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">Link</li>
<li class="list-group-item">Another Link</li>
<li class="list-group-item">Another another link</li>
<li class="list-group-item">Fourth link</li>
<li class="list-group-item">Last link</li>
</ul>
</div>
</div>
</div>
<!--end tag-->
</div>
</div>
</body>
<link href="./stylesheet.css" rel="stylesheet" />
<script src="script.js"></script>
</html>

Try using the href="#ID_OF_TARGET" method again but place all of your css/js just before the bottom of the page but before
<link href="./stylesheet.css" rel="stylesheet" />
<script src="script.js"></script>

How do I vertically center these buttons in the middle of the container in bootstrap?

This is going to be a stupid question, but for some reason, I'm having trouble center aligning these buttons in the middle of the page.
I want to them to stack on top of each other in the middle of the overlay, but right not they are stuck at the top of the overlay. Can you guys help me out?
Here is my sample HTML:
<h1 class="text-center">Portfolio</h1>
<div class="row p-5">
<div class=" col-sm-6 col-xl-4 mb-3">
<div class="card">
<img src="img/image-1.jpg" class="card-img-top" alt="image-1">
<div class="card-body">
<h5 class="card-title text-center">Project 1</h5>
</div>
<div id="overlay">
<div class="d-flex flex-column align-content-center">
<button type="button" class="btn btn-primary">Demo</button>
<button type="button" class="btn btn-secondary">Github Repo</button>
</div>
</div>
</div>
</div>
Here is a link to my JS fiddle:
https://jsfiddle.net/apasric4/wvaepsyk/1/

You need to add display: flexto #overlay, and both flex: 1 and justify-content: center to the children (which you can taret with #overlay > div):
#overlay {
display: flex;
}
#overlay > div {
flex: 1;
justify-content: center;
}
This can be seen here.
typewriterContainer = document.querySelector('#typewriter');
const typewriter = new Typewriter(typewriterContainer, {
loop: false,
delay: 75
});
typewriter
.typeString("<h1 class='display-4'>Hi, I'm Aman!</h1>")
.typeString("<p class='lead'>I am learning how to program. I love tech. I am an aspiring entrepreneur. I want to change the world. </p>")
.start();
/* particlesJS.load(#dom-id, #path-json, #callback (optional)); */
particlesJS.load('particles-js', 'particles.json', function() {
console.log('particles.json loaded');
});
* {
box-sizing: border-box;
}
img[alt="Profile Picture"] {
width: 40%;
}
/* why do this work idk */
img {
width: 200px;
height: 200px;
}
.about {
position: absolute;
z-index: 1;
height: 100vh;
width: 100vw;
}
#particles-js {
background: rgb(72, 243, 29);
height: 100vh;
width: 100vw;
}
.svg-div {
width: 50px;
height: 50px;
}
svg {
width: 100%;
}
span {
font-size: 12px;
}
.nav {
min-height: 40px;
}
.card {
box-shadow: 8px 8px 10px #080808;
transition: transform ease 0.1s;
position: relative;
}
#overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
transition: 0.02s ease-in;
display: flex;
}
#overlay>div {
flex: 1;
justify-content: center;
}
.card:hover {
transform: scale(1.1);
}
.hire {
position: absolute;
top: 100%;
left: 47%;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Capstone Project</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- navigation bar -->
<ul class="nav sticky-top justify-content-around">
<li class="nav-item">
<a class="nav-link active" href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Me</a>
</li>
</ul>
<button type="button" class="btn btn-primary hire" data-toggle="modal" data-target="#exampleModalCenter">
Hire Me
</button>
<div class="about">
<img src="img/profile-picture.jpg" class="img-fluid rounded mx-auto d-block shadow p-3 mb-5" alt="Profile Picture">
<div id="typewriter" class="container text-center">
</div>
</div>
<div id="particles-js">
</div>
<!-- portfolio -->
<h1 class="text-center">Portfolio</h1>
<div class="row p-5">
<div class=" col-sm-6 col-xl-4 mb-3">
<div class="card">
<img src="img/image-1.jpg" class="card-img-top" alt="image-1">
<div class="card-body">
<h5 class="card-title text-center">Project 1</h5>
</div>
<div id="overlay">
<div class="d-flex flex-column align-content-center">
<button type="button" class="btn btn-primary">Demo</button>
<button type="button" class="btn btn-secondary">Github Repo</button>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-4 mb-3">
<div class="card">
<img src="img/image-2.jpg" class="card-img-top" alt="image-2">
<div class="card-body">
<h5 class="card-title text-center">Project 2</h5>
</div>
<div class="overlay">
</div>
</div>
</div>
<div class="col-sm-6 col-xl-4 mb-3">
<div class="card">
<img src="img/image-3.jpg" class="card-img-top" alt="image-3">
<div class="card-body">
<h5 class="card-title text-center">Project 3</h5>
</div>
<div class="overlay">
</div>
</div>
</div>
<div class=" col-sm-6 col-xl-4 mb-3">
<div class="card">
<img src="img/image-4.JPG" class="card-img-top" alt="image-4">
<div class="card-body">
<h5 class="card-title text-center">Project 4</h5>
</div>
<div class="overlay">
</div>
</div>
</div>
<div class="col-sm-6 col-xl-4 mb-3">
<div class="card">
<img src="img/image-5.jpg" class="card-img-top" alt="image-5">
<div class="card-body">
<h5 class="card-title text-center">Project 5</h5>
</div>
<div class="overlay">
</div>
</div>
</div>
<div class=" col-sm-6 col-xl-4 mb-3">
<div class="card">
<img src="img/image-6.jpg" class="card-img-top" alt="image-6">
<div class="card-body">
<h5 class="card-title text-center">Project 6</h5>
</div>
<div class="overlay">
</div>
</div>
</div>
</div>
<!-- contact-section -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Contact Information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group row">
<label for="inputName3" class="col-sm-2 col-form-label">Name:</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="inputName3" placeholder="Name">
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputNumber3" class="col-sm-2 col-form-label">Phone Number:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputNumber3" placeholder="Number">
</div>
</div>
<div class="form-group row">
<label for="exampleFormControlTextarea1" class="col-sm-2 col-form-label">Message:</label>
<div class="col-sm-10">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="svg-div ml-3 mr-3">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 90 90" style="enable-background:new 0 0 90 90;" xml:space="preserve">
<path id="Facebook__x28_alt_x29_" d="M90,15.001C90,7.119,82.884,0,75,0H15C7.116,0,0,7.119,0,15.001v59.998
C0,82.881,7.116,90,15.001,90H45V56H34V41h11v-5.844C45,25.077,52.568,16,61.875,16H74v15H61.875C60.548,31,59,32.611,59,35.024V41
h15v15H59v34h16c7.884,0,15-7.119,15-15.001V15.001z" />
</svg>
</div>
<div class="svg-div ml-3 mr-3">
<svg class="svg-twitter" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 430.117 430.117" style="enable-background:new 0 0 430.117 430.117;" xml:space="preserve">
<path id="Twitter__x28_alt_x29_" d="M381.384,198.639c24.157-1.993,40.543-12.975,46.849-27.876
c-8.714,5.353-35.764,11.189-50.703,5.631c-0.732-3.51-1.55-6.844-2.353-9.854c-11.383-41.798-50.357-75.472-91.194-71.404
c3.304-1.334,6.655-2.576,9.996-3.691c4.495-1.61,30.868-5.901,26.715-15.21c-3.5-8.188-35.722,6.188-41.789,8.067
c8.009-3.012,21.254-8.193,22.673-17.396c-12.27,1.683-24.315,7.484-33.622,15.919c3.36-3.617,5.909-8.025,6.45-12.769
C241.68,90.963,222.563,133.113,207.092,174c-12.148-11.773-22.915-21.044-32.574-26.192
c-27.097-14.531-59.496-29.692-110.355-48.572c-1.561,16.827,8.322,39.201,36.8,54.08c-6.17-0.826-17.453,1.017-26.477,3.178
c3.675,19.277,15.677,35.159,48.169,42.839c-14.849,0.98-22.523,4.359-29.478,11.642c6.763,13.407,23.266,29.186,52.953,25.947
c-33.006,14.226-13.458,40.571,13.399,36.642C113.713,320.887,41.479,317.409,0,277.828
c108.299,147.572,343.716,87.274,378.799-54.866c26.285,0.224,41.737-9.105,51.318-19.39
C414.973,206.142,393.023,203.486,381.384,198.639z" />
</svg>
</div>
<div class="svg-div ml-3 mr-3">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 430.117 430.118" style="enable-background:new 0 0 430.117 430.118;" xml:space="preserve">
<path id="LinkedIn__x28_alt_x29_" d="M398.355,0H31.782C14.229,0,0.002,13.793,0.002,30.817v368.471
c0,17.025,14.232,30.83,31.78,30.83h366.573c17.549,0,31.76-13.814,31.76-30.83V30.817C430.115,13.798,415.904,0,398.355,0z
M130.4,360.038H65.413V165.845H130.4V360.038z M97.913,139.315h-0.437c-21.793,0-35.92-14.904-35.92-33.563
c0-19.035,14.542-33.535,36.767-33.535c22.227,0,35.899,14.496,36.331,33.535C134.654,124.415,120.555,139.315,97.913,139.315z
M364.659,360.038h-64.966V256.138c0-26.107-9.413-43.921-32.907-43.921c-17.973,0-28.642,12.018-33.327,23.621
c-1.736,4.144-2.166,9.94-2.166,15.728v108.468h-64.954c0,0,0.85-175.979,0-194.192h64.964v27.531
c8.624-13.229,24.035-32.1,58.534-32.1c42.76,0,74.822,27.739,74.822,87.414V360.038z M230.883,193.99
c0.111-0.182,0.266-0.401,0.42-0.614v0.614H230.883z" />
</svg>
</div>
</div>
<!-- footer -->
<div class="container-fluid">
<div class="d-flex justify-content-between">
<p>Copyright 2019<span>©</span></p>
<p>Back to Top</p>
</div>
</div>
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/typewriter-effect#latest/dist/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/particles.js#2.0.0/particles.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Note that if you also want them to display as 'buttons' (as opposed to taking up the full width of the overlay, you can apply align-items: center.

Your code already contains .align-content-center.Just u can add the below given properties to .align-content-center class.
.align-content-center {
position: absolute;
top: 50%;
width: 100%;
left: 50%;
transform: translate(-50%, -50%);
}
check it out:https://jsfiddle.net/hgf5m9kq/

Here's another way without display flex;
add z-index to #overlay,
add position absolute to .d-flex,
then move .d-flex outside of #overlay.
CSS Update:
#overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
transition: 0.02s ease-in;
z-index: 99999;
}
.d-flex.flex-column.align-content-center{
position:absolute;
width:100%;
}
Layout update:
<div class="card">
<img src="img/image-1.jpg" class="card-img-top" alt="image-1">
<div class="card-body">
<h5 class="card-title text-center">Project 1</h5>
</div>
<div id="overlay"></div>
<div class="d-flex flex-column align-content-center">
<button type="button" class="btn btn-primary">Demo</button>
<button type="button" class="btn btn-secondary">Github Repo</button>
</div>
</div>
Result:

You need to set the parent div "overlay" to position:relative and the child elements to position:absolute .

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Bootstrap Accordion Items are Spaced Weird - html

Related

Setting Carousel (Images) Height Equal to Window Height

Bootstrap 5 responsive carousel text problems

Align 2 different elements inside an accordion button - Bootstrap 5

Bootstrap button OnClick() Navigate to Different Part of Same Page

How do I vertically center these buttons in the middle of the container in bootstrap?

Categories

Resources