#### Modal

Our Bootstrap modals are lightweight and multi-purpose popups that are built with HTML, CSS, and JavaScript. The three primary sections of a Bootstrap modal are header, body, and footer. Modals are positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead. Use Bootstrap’s JavaScript modal plugin to add dialogues to your site for lightboxes, user notifications, or completely custom content.

Table of Content

- Examples
- Variatons

#### Examples

##### Modal title

...

                          <!-- Button trigger modal -->
                        <button
                          type="button"
                          class="btn btn-primary mb-3"
                          data-bs-toggle="modal"
                          data-bs-target="#exampleModal"
                        >
                          Launch demo modal
                        </button>

                        <!-- Modal -->
                        <div
                          class="modal fade"
                          id="exampleModal"
                          tabindex="-1"
                          role="dialog"
                          aria-labelledby="exampleModalLabel"
                          aria-hidden="true"
                        >
                          <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                              <div class="modal-header">
                                <h5 class="modal-title fw-bold" id="exampleModalLabel">Modal title</h5>
                                <button
                                  type="button"
                                  class="btn-close"
                                  data-bs-dismiss="modal"
                                  aria-label="Close"
                                >
                                  <span aria-hidden="true">&times;</span>
                                </button>
                              </div>
                              <div class="modal-body">...</div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                  Close
                                </button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                              </div>
                            </div>
                          </div>
                        </div>

#### Variations

###### Type your modal title

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

###### Your attention is required

#### You should read this!

A small river named Duden flows by their place and supplies it with the necessary regelialia.

### Welcome back

Enter your email and password to sign in

Email
Password
Remember me

Don't have an account? Sign up

##### Modal title

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.
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.
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.
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.
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.
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?

##### New message to @CT

Recipient:
Message:

### Join us today

Enter your email and password to register

Name
Email
Password
I agree the Terms and Conditions

Already have an account? Sign in

                          <div class="row">
                          <div class="col-md-4">
                            <!-- Button modal default -->
                            <button
                              type="button"
                              class="btn btn-secondary w-100 mb-3"
                              data-bs-toggle="modal"
                              data-bs-target="#modal-default"
                            >
                              Default
                            </button>

                            <!-- Modal default -->
                            <div
                              class="modal fade"
                              id="modal-default"
                              tabindex="-1"
                              role="dialog"
                              aria-labelledby="modal-default"
                              aria-hidden="true"
                            >
                              <div
                                class="modal-dialog modal- modal-dialog-centered modal-"
                                role="document"
                              >
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h6 class="modal-title fw-bold" id="modal-title-default">
                                      Type your modal title
                                    </h6>
                                    <button
                                      type="button"
                                      class="btn-close"
                                      data-bs-dismiss="modal"
                                      aria-label="Close"
                                    >
                                      <span aria-hidden="true">×</span>
                                    </button>
                                  </div>
                                  <div class="modal-body">
                                    <p>
                                      Far far away, behind the word mountains, far from the countries
                                      Vokalia and Consonantia, there live the blind texts. Separated
                                      they live in Bookmarksgrove right at the coast of the Semantics, a
                                      large language ocean.
                                    </p>
                                    <p>
                                      A small river named Duden flows by their place and supplies it
                                      with the necessary regelialia. It is a paradisematic country, in
                                      which roasted parts of sentences fly into your mouth.
                                    </p>
                                  </div>
                                  <div class="modal-footer">
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                    <button
                                      type="button"
                                      class="btn btn-link btn-danger text-decoration-none"
                                      data-bs-dismiss="modal"
                                    >
                                      Close
                                    </button>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="col-md-4">
                            <!-- Button modal notification -->
                            <button
                              type="button"
                              class="btn btn-warning w-100"
                              data-bs-toggle="modal"
                              data-bs-target="#modal-notification"
                            >
                              Notification
                            </button>

                            <!-- Modal notification -->
                            <div
                              class="modal fade"
                              id="modal-notification"
                              tabindex="-1"
                              role="dialog"
                              aria-labelledby="modal-notification"
                              aria-hidden="true"
                            >
                              <div
                                class="modal-dialog modal-danger modal-dialog-centered modal-"
                                role="document"
                              >
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h6 class="modal-title fw-bold" id="modal-title-notification">
                                      Your attention is required
                                    </h6>
                                    <button
                                      type="button"
                                      class="btn-close"
                                      data-bs-dismiss="modal"
                                      aria-label="Close"
                                    >
                                      <span aria-hidden="true">×</span>
                                    </button>
                                  </div>
                                  <div class="modal-body">
                                    <div class="py-3 text-center">
                                      <i class="fas fa-bell" style="font-size: 24px"></i>
                                      <h4 class="text-danger mt-4">You should read this!</h4>
                                      <p>
                                        A small river named Duden flows by their place and supplies it
                                        with the necessary regelialia.
                                      </p>
                                    </div>
                                  </div>
                                  <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary">Ok, Got it</button>
                                    <button
                                      type="button"
                                      class="btn btn-link text-primary text-decoration-none"
                                      data-bs-dismiss="modal"
                                    >
                                      Close
                                    </button>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="col-md-4">
                            <!-- Button modal form -->
                            <button
                              type="button"
                              class="btn btn-primary w-100 mb-3"
                              data-bs-toggle="modal"
                              data-bs-target="#modal-form"
                            >
                              Form
                            </button>

                            <!-- Modal form -->
                            <div
                              class="modal fade"
                              id="modal-form"
                              tabindex="-1"
                              role="dialog"
                              aria-labelledby="modal-form"
                              aria-hidden="true"
                            >
                              <div class="modal-dialog modal-dialog-centered modal-md" role="document">
                                <div class="modal-content">
                                  <div class="modal-body p-0">
                                    <div class="card mb-0">
                                      <div class="card-header text-left">
                                        <h3 class="fw-bolder text-info">Welcome back</h3>
                                        <p class="mb-0">Enter your email and password to sign in</p>
                                      </div>
                                      <div class="card-body">
                                        <form role="form text-left">
                                          <label>Email</label>
                                          <div class="input-group mb-3">
                                            <input
                                              type="email"
                                              class="form-control"
                                              placeholder="Email"
                                              aria-label="Email"
                                              aria-describedby="email-addon"
                                            />
                                          </div>
                                          <label>Password</label>
                                          <div class="input-group mb-3">
                                            <input
                                              type="email"
                                              class="form-control"
                                              placeholder="Password"
                                              aria-label="Password"
                                              aria-describedby="password-addon"
                                            />
                                          </div>
                                          <div class="form-check form-switch">
                                            <input
                                              class="form-check-input"
                                              type="checkbox"
                                              id="rememberMe"
                                              checked=""
                                            />
                                            <label class="form-check-label" for="rememberMe"
                                              >Remember me</label
                                            >
                                          </div>
                                          <div class="text-center">
                                            <button
                                              type="button"
                                              class="btn btn-round btn-info btn-lg w-100 mt-4 mb-0"
                                            >
                                              Sign in
                                            </button>
                                          </div>
                                          <div class="text-center px-lg-2 px-1">
                                            <p class="mt-3 mb-4 text-sm mx-auto">
                                              Don't have an account?
                                              <a href="javascript:;" class="text-info fw-bolder"
                                                >Sign up</a
                                              >
                                            </p>
                                          </div>
                                        </form>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div class="row">
                          <div class="col-md-4">
                            <!-- Button modal long -->
                            <button
                              type="button"
                              class="btn btn-danger w-100 mb-3"
                              data-bs-toggle="modal"
                              data-bs-target="#exampleModalLong"
                            >
                              Long Modal
                            </button>

                            <!-- Modal long -->
                            <div
                              class="modal fade"
                              id="exampleModalLong"
                              tabindex="-1"
                              role="dialog"
                              aria-labelledby="exampleModalLongTitle"
                              aria-hidden="true"
                            >
                              <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h5 class="modal-title fw-bold" id="exampleModalLongTitle">
                                      Modal title
                                    </h5>
                                    <button
                                      type="button"
                                      class="btn-close"
                                      data-bs-dismiss="modal"
                                      aria-label="Close"
                                    >
                                      <span aria-hidden="true">&times;</span>
                                    </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 btn-secondary"
                                      data-bs-dismiss="modal"
                                    >
                                      Close
                                    </button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="col-md-4">
                            <!-- Button modal message -->
                            <button
                              type="button"
                              class="btn btn-success w-100 mb-3"
                              data-bs-toggle="modal"
                              data-bs-target="#exampleModalMessage"
                            >
                              Message Modal
                            </button>

                            <!-- Modal message -->
                            <div
                              class="modal fade"
                              id="exampleModalMessage"
                              tabindex="-1"
                              role="dialog"
                              aria-labelledby="exampleModalMessageTitle"
                              aria-hidden="true"
                            >
                              <div class="modal-dialog modal-dialog-centered" role="document">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h5 class="modal-title fw-bold" id="exampleModalLabel">
                                      New message to @CT
                                    </h5>
                                    <button
                                      type="button"
                                      class="btn-close"
                                      data-bs-dismiss="modal"
                                      aria-label="Close"
                                    >
                                      <span aria-hidden="true">×</span>
                                    </button>
                                  </div>
                                  <div class="modal-body">
                                    <form>
                                      <div class="form-group">
                                        <label for="recipient-name" class="col-form-label"
                                          >Recipient:</label
                                        >
                                        <input
                                          type="text"
                                          class="form-control"
                                          value="Creative Tim"
                                          id="recipient-name"
                                        />
                                      </div>
                                      <div class="form-group">
                                        <label for="message-text" class="col-form-label"
                                          >Message:</label
                                        >
                                        <textarea class="form-control" id="message-text"></textarea>
                                      </div>
                                    </form>
                                  </div>
                                  <div class="modal-footer">
                                    <button
                                      type="button"
                                      class="btn btn-secondary"
                                      data-bs-dismiss="modal"
                                    >
                                      Close
                                    </button>
                                    <button type="button" class="btn btn-primary">Send message</button>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

                          <div class="col-md-4">
                            <!-- Button modal signup -->
                            <button
                              type="button"
                              class="btn btn-info w-100"
                              data-bs-toggle="modal"
                              data-bs-target="#exampleModalSignUp"
                            >
                              SignUp Modal
                            </button>

                            <!-- Modal signup -->
                            <div
                              class="modal fade"
                              id="exampleModalSignUp"
                              tabindex="-1"
                              role="dialog"
                              aria-labelledby="exampleModalSignTitle"
                              aria-hidden="true"
                            >
                              <div class="modal-dialog modal-dialog-centered modal-md" role="document">
                                <div class="modal-content">
                                  <div class="modal-body p-0">
                                    <div class="card mb-0">
                                      <div class="card-header pb-0 text-left">
                                        <h3 class="fw-bolder text-primary">Join us today</h3>
                                        <p class="mb-0">Enter your email and password to register</p>
                                      </div>
                                      <div class="card-body pb-3">
                                        <form role="form text-left">
                                          <label>Name</label>
                                          <div class="input-group mb-3">
                                            <input
                                              type="text"
                                              class="form-control"
                                              placeholder="Name"
                                              aria-label="Name"
                                              aria-describedby="name-addon"
                                            />
                                          </div>
                                          <label>Email</label>
                                          <div class="input-group mb-3">
                                            <input
                                              type="email"
                                              class="form-control"
                                              placeholder="Email"
                                              aria-label="Email"
                                              aria-describedby="email-addon"
                                            />
                                          </div>
                                          <label>Password</label>
                                          <div class="input-group mb-3">
                                            <input
                                              type="password"
                                              class="form-control"
                                              placeholder="Password"
                                              aria-label="Password"
                                              aria-describedby="password-addon"
                                            />
                                          </div>
                                          <div class="form-check form-check-info text-left">
                                            <input
                                              class="form-check-input"
                                              type="checkbox"
                                              value=""
                                              id="flexCheckDefault"
                                              checked=""
                                            />
                                            <label class="form-check-label" for="flexCheckDefault">
                                              I agree the
                                              <a href="javascrpt:;" class="text-dark fw-bolder"
                                                >Terms and Conditions</a
                                              >
                                            </label>
                                          </div>
                                          <div class="text-center">
                                            <button
                                              type="button"
                                              class="btn btn-primary btn-lg btn-rounded w-100 mt-4 mb-0"
                                            >
                                              Sign up
                                            </button>
                                          </div>
                                          <div class="text-center pt-0 px-sm-4 px-1">
                                            <p class="mt-3 mb-4 mx-auto">
                                              Already have an account?
                                              <a href="javascrpt:;" class="text-primary fw-bolder"
                                                >Sign in</a
                                              >
                                            </p>
                                          </div>
                                        </form>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>