Bootstrap: Modal alignment issues and no transition effect upon click

Question

I created a simple modal, but when I click the button the modal appears at the very top of the page and there is no fade in animation when the modal appears. There is no background behind the modal that covers the entire web application as well. I set the correct classes, but still no luck.

Here is my button:

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addModal">
    Add Function
</button>

The modal itself:

<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">X</button>
            <h1>Lab 6</h1>
        </div>
        <div class="modal-body">


            <div class="row">

                <div class="col-md-12">

                    <div class="panel panel-default">
                        <div class="panel-heading" style="background-color: #e0e9f5">
                            <h2 class="panel-title">Employee Function - Add</h2>
                        </div>

                        <div class="panel-body">

                            <div class="well">
                                <div class="row">
                                    <div class="col-md-5" align="right">
                                        <h5>
                                            <span style="color: red">* </span>Code:
                                        </h5>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control">
                                    </div>
                                </div>

                                <br />

                                <div class="row">
                                    <div class="col-md-5" align="right">
                                        <h5>
                                            <span style="color: red">* </span>Description:
                                        </h5>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control">
                                    </div>
                                </div>

                                <br />

                                <div class="row">
                                    <div class="col-md-5" align="right">
                                        <h5>Legacy Function Code:</h5>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control">
                                    </div>
                                </div>

                                <br />

                                <div class="row">
                                    <div class="col-md-5" align="right">
                                        <h5>Active?</h5>
                                    </div>


                                    <div class="col-md-1">

                                        <input type="radio">
                                        <h5>Yes</h5>

                                    </div>

                                    <div class="col-md-2">

                                        <input type="radio">
                                        <h5>No</h5>

                                    </div>

                                </div>

                                <br />

                                <div class="row">
                                    <div class="col-md-6" align="right">
                                        <button type="button" class="btn btn-info btn-lg">Save</button>
                                    </div>
                                    <div class="col-md-6" align="left">
                                        <button type="button" class="btn btn-warning btn-lg"
                                            data-dismiss="modal">Cancel</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Here is an example is what I would like to achieve: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h

Any help is appreciated. Thank you.

Answer 1

I believe that you have simply forgotten to add boostrap CSS + JS or jQuery. Below is a code snippet, with your exact code, but with boostrap CSS + JS and jQuery included. Note that jQuery must be before the boostrap JS link, like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

All of that should go in the <head> tag (or at the bottom of the <body> tag)

<!-- Stuff for the <head> tag -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- end <head> tag -->
<!-- Stuff for the <body> -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addModal">
    Add Function
</button>
<div class="modal fade" id="addModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">X</button>
        <h1>Lab 6</h1>
      </div>
      <div class="modal-body">


        <div class="row">

          <div class="col-md-12">

            <div class="panel panel-default">
              <div class="panel-heading" style="background-color: #e0e9f5">
                <h2 class="panel-title">Employee Function - Add</h2>
              </div>

              <div class="panel-body">

                <div class="well">
                  <div class="row">
                    <div class="col-md-5" align="right">
                      <h5>
                        <span style="color: red">* </span>Code:
                      </h5>
                    </div>
                    <div class="col-md-4">
                      <input type="text" class="form-control">
                    </div>
                  </div>

                  <br />

                  <div class="row">
                    <div class="col-md-5" align="right">
                      <h5>
                        <span style="color: red">* </span>Description:
                      </h5>
                    </div>
                    <div class="col-md-6">
                      <input type="text" class="form-control">
                    </div>
                  </div>

                  <br />

                  <div class="row">
                    <div class="col-md-5" align="right">
                      <h5>Legacy Function Code:</h5>
                    </div>
                    <div class="col-md-4">
                      <input type="text" class="form-control">
                    </div>
                  </div>

                  <br />

                  <div class="row">
                    <div class="col-md-5" align="right">
                      <h5>Active?</h5>
                    </div>


                    <div class="col-md-1">

                      <input type="radio">
                      <h5>Yes</h5>

                    </div>

                    <div class="col-md-2">

                      <input type="radio">
                      <h5>No</h5>

                    </div>

                  </div>

                  <br />

                  <div class="row">
                    <div class="col-md-6" align="right">
                      <button type="button" class="btn btn-info btn-lg">Save</button>
                    </div>
                    <div class="col-md-6" align="left">
                      <button type="button" class="btn btn-warning btn-lg" data-dismiss="modal">Cancel</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

P.S. The result looks better when you expand the snippet before running it, because otherwise the output has a small width which messes things up (which could be an issue on small devices)