Simple Modal
<div class="container py-7">
<div class="row mt-5">
<div class="col-sm-3 col-6 mx-auto">
<!-- Button trigger modal -->
<button type="button" class="btn bg-gradient-dark" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Your modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Society has put up so many boundaries, so many limitations on what’s right and wrong that it’s almost impossible to get a pure thought out.
<br><br>
It’s like a little kid, a little boy, looking at colors, and no one told him what colors are good, before somebody tells you you shouldn’t like pink because that’s for girls, or you’d instantly become a gay two-year-old.
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn bg-gradient-dark mb-0" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn bg-gradient-dark mb-0">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Notification Modal
<div class="container py-7">
<div class="row mt-5">
<div class="col-sm-3 col-6 mx-auto">
<!-- Button trigger modal -->
<button type="button" class="btn bg-gradient-danger" data-bs-toggle="modal" data-bs-target="#exampleModalNotification">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalNotification" tabindex="-1" aria-labelledby="exampleModalNotification" aria-hidden="true">
<div class="modal-dialog modal-danger modal-dialog-centered modal-" role="document">
<div class="modal-content bg-gradient-danger">
<div class="modal-header border-0">
<h6 class="modal-title text-white" id="modal-title-notification">Your attention is required</h6>
<button type="button" class="btn btn-link text-white my-1" data-bs-dismiss="modal"><i class="fas fa-times"></i></button>
</div>
<hr class="horizontal light mt-0">
<div class="modal-body">
<div class="py-3 text-center text-white">
<i class="material-symbols-rounded text-3xl">notifications_active</i>
<h4 class="heading mt-4 text-white">You should read this!</h4>
<p class="text-white opacity-8">A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
</div>
</div>
<hr class="horizontal light mb-0">
<div class="modal-footer justify-content-between border-0">
<button type="button" class="btn btn-white my-1">Ok, Got it</button>
<button type="button" class="btn btn-link text-white my-1" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Modal Form
<div class="container py-7">
<div class="row mt-5">
<div class="col-sm-3 col-6 mx-auto">
<!-- Button trigger modal -->
<button type="button" class="btn bg-gradient-info" data-bs-toggle="modal" data-bs-target="#exampleModalForm">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalForm" tabindex="-1" aria-labelledby="exampleModalForm" aria-hidden="true">
<div class="modal-dialog modal-danger modal-dialog-centered modal-" role="document">
<div class="modal-content">
<div class="modal-body p-0">
<div class="card bg-gray-200 shadow border-0 mb-0">
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
<div class="bg-gradient-info shadow-info border-radius-lg py-3 pe-1 text-center py-4">
<h4 class="font-weight-bolder text-white mt-1 mb-0">Welcome back</h4>
<p class="mb-1 text-sm text-white">Enter your email and password to sign in</p>
</div>
</div>
<div class="card-body">
<form role="form text-start">
<div class="input-group input-group-static mb-4">
<label>Email</label>
<input type="email" class="form-control" placeholder="[email protected]">
</div>
<div class="input-group input-group-static mb-4">
<label>Password</label>
<input type="password" class="form-control" placeholder="•••••••••••••">
</div>
<div class="form-check form-switch d-flex align-items-center">
<input class="form-check-input" type="checkbox" id="rememberMe" checked="">
<label class="form-check-label mb-0 ms-3" for="rememberMe">Remember me</label>
</div>
<div class="text-center">
<button type="button" class="btn bg-gradient-info mt-4 mb-0">Sign in</button>
</div>
</form>
</div>
<div class="card-footer text-center pt-0">
<p class="mb-4 text-sm mx-auto">
Don`t have an account?
<a href="javascript:;" class="text-info text-gradient font-weight-bold">Sign up</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Modal Long Content
<div class="container py-7">
<div class="row mt-5">
<div class="col-sm-3 col-6 mx-auto">
<!-- Button trigger modal -->
<button type="button" class="btn bg-gradient-warning" data-bs-toggle="modal" data-bs-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLong" aria-hidden="true">
<div class="modal-dialog modal-danger modal-dialog-centered modal-" role="document">
<div class="modal-content">
<div class="modal-body p-0">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="btn btn-link text-dark my-1" data-bs-dismiss="modal">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
I always felt like I could do anything. That's the main thing people are controlled by! Thoughts- their perception of themselves! They're slowed down by their perception of themselves. If you're taught you can't do anything, you won't do anything. I was taught I could do everything.
<br><br>
As we live, our hearts turn colder. Cause pain is what we go through as we become older. We get insulted by others, lose trust for those others. We get back stabbed by friends. It becomes harder for us to give others a hand. We get our heart broken by people we love, even that we give them all we have. Then we lose family over time. What else could rust the heart more over time? Blackgold.
<br><br>
We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game of life you need to appreciate every moment. A lot of people don't appreciate the moment until it's passed.
<br><br>
There's nothing I really wanted to do in life that I wasn't able to get good at. That's my skill. I'm not really specifically talented at anything except for the ability to learn. That's what I do. That's what I'm here for. Don't be afraid to be wrong because you can't learn anything from a compliment.
<br><br>
It really matters and then like it really doesn't matter. What matters is the people who are sparked by it. And the people who are like offended by it, it doesn't matter. Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too.
<br><br>
The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color. For standing out. But the time is now to be okay to be the greatest you. Would you believe in what you believe in, if you were the only one who believed it?
</div>
<div class="modal-footer">
<button type="button" class="btn bg-gradient-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn bg-gradient-dark">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Modal Signup
<div class="container py-7">
<div class="row mt-5">
<div class="col-sm-3 col-6 mx-auto">
<!-- Button trigger modal -->
<button type="button" class="btn bg-gradient-dark" data-bs-toggle="modal" data-bs-target="#exampleModalSignup">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalSignup" tabindex="-1" aria-labelledby="exampleModalSignup" aria-hidden="true">
<div class="modal-dialog modal-danger modal-dialog-centered modal-" role="document">
<div class="modal-content">
<div class="modal-body p-0">
<div class="card card-plain">
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
<div class="bg-gradient-dark shadow-dark border-radius-lg py-3 pe-1 text-center py-4">
<h4 class="font-weight-bolder text-white mt-1">Join us today</h4>
<p class="mb-1 text-white text-sm">Enter your email and password to register</p>
</div>
</div>
<div class="card-body pb-3">
<form role="form text-start">
<div class="input-group input-group-outline mb-3">
<label class="form-label">Name</label>
<input type="text" class="form-control">
</div>
<div class="input-group input-group-outline mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control">
</div>
<div class="input-group input-group-outline mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control">
</div>
<div class="form-check form-check-info d-flex float-start ps-0">
<input class="form-check-input mt-0" type="checkbox" value="" id="flexCheckDefault" checked="">
<label class="form-check-label mb-0 ms-3" for="flexCheckDefault">
I agree the <a href="javascript:;" class="text-dark font-weight-bolder">Terms and Conditions</a>
</label>
</div>
<div class="text-center">
<button type="button" class="btn bg-gradient-dark w-100 mt-4 mb-0">Sign up</button>
</div>
</form>
</div>
<div class="card-footer text-center pt-0 px-sm-4 px-1">
<p class="mb-4 mx-auto">
Already have an account?
<a href="javascript:;" class="text-primary text-gradient font-weight-bold">Sign in</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>