How to swiper slider mousewhell actions - html

I have a question.
I want to continue down the page after the slider with the mouse wheel.
So 3 go down after going right. When I go up again, it should go to the left.
Codopen https://codepen.io/xlonely/pen/mdXPdxO
I think I found the solution. Thx.
mousewheel:{
releaseOnEdges:true
},


You can add this code if you want to disable the mousewheel for the swiper after the last slide is shown.
swiper.on('slideChange', function (e) {
if (e.isEnd) {
e.mousewheel.disable();
}
});
Demo
var swiper = new Swiper(".mySwiper", {
direction: "horizontal",
slidesPerView: 1,
speed: 1000,
spaceBetween: 0,
roundLengths: true,
centeredSlides: true,
mousewheel: true,
pagination: {
el: ".swiper-pagination",
clickable: false,
},
});
swiper.on('slideChange', function (e) {
if (e.isEnd) {
e.mousewheel.disable();
}
});
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 600px;
border: solid 1px black;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.1.4/swiper-bundle.css" integrity="sha512-KBVE5XtR1mD+xG5KJdK4mNAvbqLXeD6fbzeSNGLWRQcOdD6sStIZJIUUIN+ng8glwOzQ2x2uRCWkYkqSQSbGvg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<main>
<div class="container mb-5">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row">
<div class="col-lg-4">
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
<h2>Heading</h2>
<p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
<p><a class="btn btn-secondary" href="#">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
<h2>Heading</h2>
<p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
<p><a class="btn btn-secondary" href="#">View details »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
<h2>Heading</h2>
<p>And lastly this, the third column of representative placeholder content.</p>
<p><a class="btn btn-secondary" href="#">View details »</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
<p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
</div>
<div class="col-md-5">
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
</div>
<div class="col-md-5 order-md-1">
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
</div>
</div>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
</div>
<div class="col-md-5">
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
</div>
</div>
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
</div><!-- /.container -->
<footer class="container">
<p class="float-end">Back to top</p>
<p>© 2017–2021 Company, Inc. · Privacy · Terms</p>
</footer>
</main>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.1.4/swiper-bundle.min.js" integrity="sha512-hNnjFWCqifslGhuZJVHjXdBund00oDV71mBacLyZYVwmuf+Lx+MGgoG04wehsvhp6FvLYfycrES+b1yh24yvhg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

Related

Overlay a Bootstrap Row completely

In many web environments with some degree of interaction among Users, if the platform allows, one can block another and effectively not even see the blocked person' posts.
Thinking about it, I decided to implement such a feature in a commenting system I made. Here's a fragment of it.
Through a class .blocked added to the wrapper of two Bootstrap 5 .row, I managed to style the pseudo-selector ::before to cover the whole content as desired, but in order to add some text in a non-hard-coded way, I ended up having to use a data-attribute.
It works, yes, but even though the visual background extends to the whole width, this added content does not, it gets limited by the width of these two rows within.
Also, it's not very much flexible as it limits my customization options, especially through Javascript, since I don't have other tags within to manipulate.
So, how could I accomplish my goal in a flexible way?
html,
body {
height: 100%;
width: 75%;
margin-top: 5%;
}
.wrapper {
min-height: 100vh;
height: 100vh;
}
main {
flex: 1;
}
/** This is not really hard-coded like, but... */
#comment_851030477 {
border: 1px solid black;
padding: 1rem;
}
.blocked {
background-color: #000;
display: flex;
bottom: 0;
left: 0;
position: relative;
top: 0;
}
.blocked>* {
visibility: hidden;
}
.blocked::before {
align-self: center;
color: #FFF;
content: attr(data-blocked);
display: flex;
margin: -1rem;
visibility: visible;
width: 100%;
}
.picture {
border: 1px solid blue;
}
/** Icons */
.icon {
-ms-flex-item-align: center;
align-self: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.icon.edit,
.icon.delete {
fill: rgba( var(--darker-gray));
height: 1.25rem;
width: 1.25rem;
}
.icon.block,
.icon.unblock {
fill: rgba( var(--darker-gray));
height: 1.25rem;
width: 1.25rem;
}
.icon.follow,
.icon.unfollow {
fill: rgba( var(--darker-gray));
height: 1.25rem;
width: 1.25rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<main class="container-fluid">
<div class="row w-100 px-3">
<div class="col">
<section>
<div class="container blocked" id="comment_851030477" data-blocked="THIS USER IS BLOCKED">
<div class="row gx-3">
<div class="d-flex col-5 col-sm-3 col-md-2 col-lg-2 col-xl-2 col-xxl-1 align-items-center picture"></div>
<div class="col align-self-center">
<div class="row">
<div class="col">
<div class="row flex-column author">
<div class="col display">Username</div>
<div class="col username">
<small class="text-muted">(#username)</small>
</div>
<div class="col date">
<small>Sunday, 30th May 2021</small>
</div>
</div>
</div>
<div class="col-2 d-flex flex-row justify-content-end tools">
<a href="javascript:void(0)" class="d-none block">
<svg viewBox="0 0 32 28" class="icon block mx-2">
<title>Block</title>
<use xlink:href="#block"></use>
</svg>
</a>
<a href="javascript:void(0)" class="unblock">
<svg viewBox="0 0 32 28" class="icon unblock mx-2">
<title>Unblock</title>
<use xlink:href="#unblock"></use>
</svg>
</a>
<a href="javascript:void(0)" class="follow d-none">
<svg viewBox="0 0 24 28" class="icon follow mx-2">
<title>Follow</title>
<use xlink:href="#follow"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none unfollow">
<svg viewBox="0 0 24 28" class="icon unfollow mx-2">
<title>Unfollow</title>
<use xlink:href="#unfollow"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none edit">
<svg viewBox="0 0 24 24" class="icon edit mx-2">
<title>Edit</title>
<use xlink:href="#edit"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none delete">
<svg viewBox="0 0 24 24" class="icon delete mx-2">
<title>Delete</title>
<use xlink:href="#delete"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="row message">
<div class="col">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="d-none blocked2">BLOCKED</div>
</div>
<div class="container mt-3" id="comment_851030477">
<div class="row gx-3">
<div class="d-flex col-5 col-sm-3 col-md-2 col-lg-2 col-xl-2 col-xxl-1 align-items-center picture foil"></div>
<div class="col align-self-center">
<div class="row">
<div class="col">
<div class="row flex-column author">
<div class="col display">Username</div>
<div class="col username">
<small class="text-muted">(#username)</small>
</div>
<div class="col date">
<small>Sunday, 30th May 2021</small>
</div>
</div>
</div>
<div class="col-2 d-flex flex-row justify-content-end tools">
<a href="javascript:void(0)" class="block">
<svg viewBox="0 0 32 28" class="icon block mx-2">
<title>Block</title>
<use xlink:href="#block"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none unblock">
<svg viewBox="0 0 32 28" class="icon unblock mx-2">
<title>Unblock</title>
<use xlink:href="#unblock"></use>
</svg>
</a>
<a href="javascript:void(0)" class="follow d-none">
<svg viewBox="0 0 24 28" class="icon follow mx-2">
<title>Follow</title>
<use xlink:href="#follow"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none unfollow">
<svg viewBox="0 0 24 28" class="icon unfollow mx-2">
<title>Unfollow</title>
<use xlink:href="#unfollow"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none edit">
<svg viewBox="0 0 24 24" class="icon edit mx-2">
<title>Edit</title>
<use xlink:href="#edit"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none delete">
<svg viewBox="0 0 24 24" class="icon delete mx-2">
<title>Delete</title>
<use xlink:href="#delete"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="row message">
<div class="col">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="d-none blocked2">BLOCKED</div>
</div>
</section>
</div>
</div>
</main>

After cooling down a bit, I decided to have all of the necessary markup ready with control-classes to be manipulated with Javascript.
This is the final result, despite the positioning awkwardness and the fact SVG icons remain visible here.
$( '#comments' ).on( 'click', '.blocked a.reveal', function() {
$( this ).closest( '.container' )
.removeClass( 'blocked' )
.find( '.blocked-overlay' )
.addClass( 'd-none' );
})
html, body {
height: 100%;
width: 75%;
margin-top: 5%;
}
.wrapper {
min-height: 100vh;
height: 100vh;
}
main {
flex: 1;
}
/** This is not really hard-coded like this, but... */
#comment_851030477 {
border: 1px solid black;
padding: 1rem;
position: relative;
}
.blocked .blocked-overlay {
background-color: #FFF;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.blocked .blocked-overlay .reveal {
margin-left: .3rem;
}
.picture {
border: 1px solid blue;
}
/** Icons */
.icon {
-ms-flex-item-align: center;
align-self: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.icon.edit, .icon.delete {
fill: rgba( var(--darker-gray) );
height: 1.25rem;
width: 1.25rem;
}
.icon.block, .icon.unblock {
fill: rgba( var(--darker-gray) );
height: 1.25rem;
width: 1.25rem;
}
.icon.follow, .icon.unfollow {
fill: rgba( var(--darker-gray) );
height: 1.25rem;
width: 1.25rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="d-flex flex-column" data-loaded="true">
<main class="container-fluid">
<div class="row w-100 px-3">
<div class="col">
<section id="comments">
<div class="container blocked" id="comment_851030477">
<div class="blocked-overlay">
<p class="d-inline-flex justify-content-center">
You have blocked the author of this comment
</p>
<p class="d-inline-flex justify-content-center">
If you still want to see it,
<a href="javascript:void(0)" class="reveal">
<span>click here</span>
</a>
</p>
</div>
<div class="row gx-3">
<div class="d-flex col-5 col-sm-3 col-md-2 col-lg-2 col-xl-2 col-xxl-1 align-items-center picture"></div>
<div class="col align-self-center">
<div class="row">
<div class="col">
<div class="row flex-column author">
<div class="col display">Username</div>
<div class="col username">
<small class="text-muted">(#username)</small>
</div>
<div class="col date">
<small>Sunday, 30th May 2021</small>
</div>
</div>
</div>
<div class="col-2 d-flex flex-row justify-content-end tools">
<a href="javascript:void(0)" class="d-none block">
<svg viewBox="0 0 32 28" class="icon block mx-2">
<title>Block</title>
<use xlink:href="#block"></use>
</svg>
</a>
<a href="javascript:void(0)" class="unblock">
<svg viewBox="0 0 32 28" class="icon unblock mx-2">
<title>Unblock</title>
<use xlink:href="#unblock"></use>
</svg>
</a>
<a href="javascript:void(0)" class="follow d-none">
<svg viewBox="0 0 24 28" class="icon follow mx-2">
<title>Follow</title>
<use xlink:href="#follow"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none unfollow">
<svg viewBox="0 0 24 28" class="icon unfollow mx-2">
<title>Unfollow</title>
<use xlink:href="#unfollow"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none edit">
<svg viewBox="0 0 24 24" class="icon edit mx-2">
<title>Edit</title>
<use xlink:href="#edit"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none delete">
<svg viewBox="0 0 24 24" class="icon delete mx-2">
<title>Delete</title>
<use xlink:href="#delete"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="row message">
<div class="col">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="d-none blocked2">BLOCKED</div>
</div>
<div class="container mt-3" id="comment_851030477">
<div class="row gx-3">
<div class="d-flex col-5 col-sm-3 col-md-2 col-lg-2 col-xl-2 col-xxl-1 align-items-center picture foil"></div>
<div class="col align-self-center">
<div class="row">
<div class="col">
<div class="row flex-column author">
<div class="col display">Username</div>
<div class="col username">
<small class="text-muted">(#username)</small>
</div>
<div class="col date">
<small>Sunday, 30th May 2021</small>
</div>
</div>
</div>
<div class="col-2 d-flex flex-row justify-content-end tools">
<a href="javascript:void(0)" class="block">
<svg viewBox="0 0 32 28" class="icon block mx-2">
<title>Block</title>
<use xlink:href="#block"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none unblock">
<svg viewBox="0 0 32 28" class="icon unblock mx-2">
<title>Unblock</title>
<use xlink:href="#unblock"></use>
</svg>
</a>
<a href="javascript:void(0)" class="follow d-none">
<svg viewBox="0 0 24 28" class="icon follow mx-2">
<title>Follow</title>
<use xlink:href="#follow"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none unfollow">
<svg viewBox="0 0 24 28" class="icon unfollow mx-2">
<title>Unfollow</title>
<use xlink:href="#unfollow"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none edit">
<svg viewBox="0 0 24 24" class="icon edit mx-2">
<title>Edit</title>
<use xlink:href="#edit"></use>
</svg>
</a>
<a href="javascript:void(0)" class="d-none delete">
<svg viewBox="0 0 24 24" class="icon delete mx-2">
<title>Delete</title>
<use xlink:href="#delete"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="row message">
<div class="col">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="d-none blocked2">BLOCKED</div>
</div>
</section>
</div>
</div>
</main>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="edit-symbol" viewBox="0 0 24 24">
<path d="M20.719 7.031l-1.828 1.828-3.75-3.75 1.828-1.828q0.281-0.281 0.703-0.281t0.703 0.281l2.344 2.344q0.281 0.281 0.281 0.703t-0.281 0.703zM3 17.25l11.063-11.063 3.75 3.75-11.063 11.063h-3.75v-3.75z" />
</symbol>
<symbol id="delete-symbol" viewBox="0 0 24 24">
<path d="M18.984 3.984v2.016h-13.969v-2.016h3.469l1.031-0.984h4.969l1.031 0.984h3.469zM6 18.984v-12h12v12q0 0.797-0.609 1.406t-1.406 0.609h-7.969q-0.797 0-1.406-0.609t-0.609-1.406z" />
</symbol>
<symbol id="block-symbol" viewBox="0 0 24 28">
<path d="M20.5 13.953c0-1.703-0.5-3.281-1.359-4.609l-11.781 11.766c1.344 0.875 2.938 1.391 4.641 1.391 4.688 0 8.5-3.828 8.5-8.547zM4.891 18.625l11.797-11.781c-1.344-0.906-2.953-1.422-4.688-1.422-4.688 0-8.5 3.828-8.5 8.531 0 1.734 0.516 3.328 1.391 4.672zM24 13.953c0 6.656-5.375 12.047-12 12.047s-12-5.391-12-12.047c0-6.641 5.375-12.031 12-12.031s12 5.391 12 12.031z"/>
</symbol>
<symbol id="unblock-symbol" viewBox="0 0 24 24">
<path d="M11.859 9h0.141q1.219 0 2.109 0.891t0.891 2.109v0.188zM7.547 9.797q-0.563 1.125-0.563 2.203 0 2.063 1.477 3.539t3.539 1.477q1.078 0 2.203-0.563l-1.547-1.547q-0.375 0.094-0.656 0.094-1.219 0-2.109-0.891t-0.891-2.109q0-0.281 0.094-0.656zM2.016 4.266l1.266-1.266 17.719 17.719-1.266 1.266q-0.234-0.234-1.477-1.453t-1.898-1.875q-2.016 0.844-4.359 0.844-3.703 0-6.703-2.063t-4.313-5.438q0.516-1.219 1.617-2.695t2.133-2.273q-0.563-0.563-1.57-1.594t-1.148-1.172zM12 6.984q-0.938 0-1.828 0.375l-2.156-2.156q1.828-0.703 3.984-0.703 3.703 0 6.68 2.063t4.289 5.438q-1.125 2.766-3.422 4.734l-2.906-2.906q0.375-0.891 0.375-1.828 0-2.063-1.477-3.539t-3.539-1.477z"></path>
</symbol>
<symbol id="follow-symbol" viewBox="0 0 32 28">
<path d="M11 14c-3.313 0-6-2.688-6-6s2.688-6 6-6 6 2.688 6 6-2.688 6-6 6zM26 16h5.5c0.266 0 0.5 0.234 0.5 0.5v3c0 0.266-0.234 0.5-0.5 0.5h-5.5v5.5c0 0.266-0.234 0.5-0.5 0.5h-3c-0.266 0-0.5-0.234-0.5-0.5v-5.5h-5.5c-0.266 0-0.5-0.234-0.5-0.5v-3c0-0.266 0.234-0.5 0.5-0.5h5.5v-5.5c0-0.266 0.234-0.5 0.5-0.5h3c0.266 0 0.5 0.234 0.5 0.5v5.5zM14.5 19.5c0 1.094 0.906 2 2 2h4v3.719c-0.766 0.562-1.734 0.781-2.672 0.781h-13.656c-2.5 0-4.172-1.5-4.172-4.047 0-3.531 0.828-8.953 5.406-8.953 0.25 0 0.422 0.109 0.609 0.266 1.531 1.172 3.016 1.906 4.984 1.906s3.453-0.734 4.984-1.906c0.187-0.156 0.359-0.266 0.609-0.266 1.328 0 2.5 0.5 3.391 1.5h-3.484c-1.094 0-2 0.906-2 2v3z"/>
</symbol>
<symbol id="unfollow-symbol" viewBox="0 0 32 28">
<path d="M11 14c-3.313 0-6-2.688-6-6s2.688-6 6-6 6 2.688 6 6-2.688 6-6 6zM27.828 19l3.891 3.891c0.094 0.094 0.141 0.219 0.141 0.359 0 0.125-0.047 0.25-0.141 0.344l-2.125 2.125c-0.094 0.094-0.219 0.141-0.344 0.141-0.141 0-0.266-0.047-0.359-0.141l-3.891-3.891-3.891 3.891c-0.094 0.094-0.219 0.141-0.359 0.141-0.125 0-0.25-0.047-0.344-0.141l-2.125-2.125c-0.094-0.094-0.141-0.219-0.141-0.344 0-0.141 0.047-0.266 0.141-0.359l3.891-3.891-3.891-3.891c-0.094-0.094-0.141-0.219-0.141-0.359 0-0.125 0.047-0.25 0.141-0.344l2.125-2.125c0.094-0.094 0.219-0.141 0.344-0.141 0.141 0 0.266 0.047 0.359 0.141l3.891 3.891 3.891-3.891c0.094-0.094 0.219-0.141 0.359-0.141 0.125 0 0.25 0.047 0.344 0.141l2.125 2.125c0.094 0.094 0.141 0.219 0.141 0.344 0 0.141-0.047 0.266-0.141 0.359zM20.047 19l-2.828 2.828c-0.375 0.375-0.578 0.891-0.578 1.422 0 0.516 0.203 1.031 0.578 1.406l1.297 1.297c-0.219 0.031-0.453 0.047-0.688 0.047h-13.656c-2.5 0-4.172-1.5-4.172-4.047 0-3.531 0.828-8.953 5.406-8.953 0.25 0 0.422 0.109 0.609 0.266 1.5 1.188 3.031 1.906 4.984 1.906s3.484-0.719 4.984-1.906c0.187-0.156 0.359-0.266 0.609-0.266 0.297 0 0.594 0.031 0.891 0.094-0.516 0.5-0.844 0.906-0.844 1.656 0 0.531 0.203 1.047 0.578 1.422z"/>
</symbol>
</defs>
<g id="edit">
<use xlink:href="#edit-symbol"/>
</g>
<g id="delete">
<use xlink:href="#delete-symbol"/>
</g>
<g id="block">
<use xlink:href="#block-symbol"/>
</g>
<g id="unblock">
<use xlink:href="#unblock-symbol"/>
</g>
<g id="follow">
<use xlink:href="#follow-symbol"/>
</g>
<g id="unfollow">
<use xlink:href="#unfollow-symbol"/>
</g>
</svg>
</body>
</html>
During the loop where I render each entry, if I receive the Response indicating a User is blocked I add the class .blocked to the parent container and flip the displayability of the inner .blocked-overlay by removing Bootstrap's d-none
Then, separately, I attach a simple Event Handler to temporarily reveal the hidden content.

How to align svg icon and text content in same line towards right side (Right aligned) in bootstrap

I have tried to align icon and text towards right side. But its not happening. am attaching the design herewith.
I tried code below - please let me know if there is any options available.
<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">
<div class="col-1 icon1">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="#2DB757" class="bi bi-circle-fill float-right" style="margin: 18px;">
<circle cx="8" cy="8" r="8"/>
</svg>
<div class="p-2" id="numOfStatus">Completed</div>
</div>

You can use flexbox to move the element to right
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12 icon1">
<div class="d-flex justify-content-end align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="orange" class="bi bi-circle-fill">
<circle cx="8" cy="8" r="8"/>
</svg>
<div class="p-2" id="numOfStatus">Not Started</div>
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="red" class="bi bi-circle-fill">
<circle cx="8" cy="8" r="8"/>
</svg>
<div class="p-2" id="numOfStatus">Progress</div>
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="#2DB757" class="bi bi-circle-fill">
<circle cx="8" cy="8" r="8"/>
</svg>
<div class="p-2" id="numOfStatus">Completed</div>
</div>
</div>
</div>
</div>

While you work on improving the question, I'll take a guess at what you might need. By putting a flexbox class on the row and adding an empty flex column we push the small fixed-width column to the right.
Note that the correct column class for Bootstrap 4 is col-xs-1. Be sure you're following the correct version documentation.
.col {
background: pink;
}
.col-xs-1 {
background: #ddd;
}
<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">
<div class="container">
<div class="row d-flex">
<div class="col"></div>
<div class="col-xs-1 icon1">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="#2DB757" class="bi bi-circle-fill float-right" style="margin: 18px;">
<circle cx="8" cy="8" r="8"/>
</svg>
<div class="p-2" id="numOfStatus">Completed</div>
</div>
</div>
</div>
To give the layout a more modern, fully-flexible fit, use only flex classes (including on the icon container):
.d-flex > div {
background: pink;
}
.d-flex > div:last-child {
background: #ddd;
}
<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">
<div class="container">
<div class="d-flex">
<div class="flex-grow-1"></div>
<div class="icon1 d-flex">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="#2DB757" class="bi bi-circle-fill float-right" style="margin: 18px;">
<circle cx="8" cy="8" r="8"/>
</svg>
<div class="p-2" id="numOfStatus">Completed</div>
</div>
</div>
</div>

Place SVG divider under video background header

I am creating a hero background, and would like to position my svg divider underneath the video so that it blends into the background below.
At the moment it appears right next to the buttons which is incorrect.
I'd like it to look like this:
How can I fix this?
<header>
<div class="overlay"></div>
<video onloadedmetadata="this.muted = true" playsinline autoplay muted loop preload="auto">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4" />
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-3 text-white">Launch on time,<br />look on-trend.</h1>
<div class="mb-4">
<p class="lead px-xl-5">
Save countless hours of design and development and ship performant sites with killer
looks.
</p>
</div>
<button class="btn btn-lg btn-white mx-1">Button 1</button>
<button class="btn btn-lg btn-primary-3 mx-1">Button 2</button>
</div>
<div class="divider flip-x">
<svg
width="100%"
height="96px"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="none"
>
<path d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
</svg>
</div>
</div>
</div>
</header>
I've also posted a fiddle here: https://jsfiddle.net/vtb4zep5/.

<header>
<div class="overlay"></div>
<video onloadedmetadata="this.muted = true" playsinline autoplay muted loop preload="auto">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4" />
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-3 text-white">Launch on time,<br />look on-trend.</h1>
<div class="mb-4">
<p class="lead px-xl-5">
Save countless hours of design and development and ship performant sites with killer looks.
</p>
</div>
<button class="btn btn-lg btn-white mx-1">Button 1</button>
<button class="btn btn-lg btn-primary-3 mx-1">Button 2</button>
</div>
</div>
</div>
</header>
<div style="position: relative">
<div class="divider flip-x" style="position: fixed; bottom: 0px; width: 100%">
<svg width="100%" height="96px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path d="M0,0 C40,33 66,52 75,52 C83,52 92,33 100,0 L100,100 L0,100 L0,0 Z"></path>
</svg>
</div>
</div>
jsfiddle

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 .

can I overlap a svg rect shape on line svg shape

I am creating a structure by svg shapes. I have overlapped a "rect" shape on "line" shape. What should I do for this?
See attached image
.parking-area {
background: #4c4c4c;
padding: 30px;
}
.circle-green {
height: 40px;
width: 40px;
background: #72ce79;
border: 2px solid white;
border-radius: 100px;
}
.circle-yellow {
height: 40px;
width: 40px;
background: #f9e972;
border: 2px solid white;
border-radius: 100px;
}
.circle-red {
height: 40px;
width: 40px;
background: #da5649;
border: 2px solid white;
border-radius: 100px;
}
.triangle-pink {
height: 0px;
width: 0px;
border-left: 15px solid #4c4c4c;
border-right: 15px solid #4c4c4c;
border-bottom: 40px solid #d400f9;
}
.element-description {
color: white;
font-weight: 500;
}
.parking-area hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 2px solid #909090;
}
.full-width {
width: 100%;
}
.dashed-line-h {
fill: none;
stroke: #7F7D60 !important;
stroke-width: 5;
stroke-miterlimit: 8;
stroke-dasharray: 12, 10;
}
.text-bg {
fill: green;
height: 30px;
width: 20%;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- jQuery library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="container">
<div class="parking-area">
<div class="alement-info">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-2">
<div class="circle-green"></div>
</div>
<div class="col-md-10">
<div class="element-description">Option-1
<p>Lorem ipsum dolor sumit
<p>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-2">
<div class="circle-yellow"></div>
</div>
<div class="col-md-10">
<div class="element-description">Option-2
<p>Lorem ipsum dolor sumit
<p>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-2">
<div class="circle-red">
</div>
</div>
<div class="col-md-10">
<div class="element-description">Option-3
<p>Lorem ipsum dolor sumit
<p>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-2">
<div class="triangle-pink"></div>
</div>
<div class="col-md-10">
<div class="element-description">Option-4
<p>Lorem ipsum dolor sumit
<p>
</div>
<line style=""></line>
</div>
</div>
</div>
</div>
<hr>
<svg height="60px" width="100%">
<rect x="40%" y="20" class="text-bg"/>
<svg height="60px" width="100%" >
<text x="50%" y="40" alignment-baseline="middle" text-anchor="middle" style="fill:#939393; height: 30px; ">My text</text>
</svg>
</svg>
<svg class="full-width" height="2px">
<line class="dashed-line-h" x1="100%" y1="0%" x2="0%" y2="00%" />
</svg>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Related Projects Row -->
<!-- /.row -->
<!-- Footer -->
</div>
</body>
</html>

I created my own object because I can't see your svgs in your code. Basically, create a relative container and put the rectangle and hr inside that, then the rectangle is an absolutely positioned element:
.relative {
position: relative;
}
.absolute {
position: absolute;
right: 1em;
top: -1.5em;
background: green;
width: 200px;
height: 50px;
}
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Website</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="container">
<div class="parking-area">
<div class="alement-info">
<div class="relative">
<div class="absolute"></div>
<hr>
</div>
<svg height="60px" width="100%">
<rect x="40%" y="20" style="fill:green; height: 30px; width:20%; " />
</svg>
<svg class="full-width" height="2px">
<line class="dashed-line-h" x1="100%" y1="0%" x2="0%" y2="00%" />
</svg>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Related Projects Row -->
<!-- /.row -->
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © my website 2017</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->