In this article I will show how to set up a modal using Bootstrap 3. This example looks like this at 800px width:

To set up a Bootstrap 3 modal, we will need these three resources:

1. bootstrap.min.css
2. bootstrap.min.js
3. jquery.min.js

These can be called via CDN at the top of our HTML file. For example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Here is the HTML for the modal. This block is not displayed unless the modal is triggered via click of an HREF link or button. All of the class names in this block are specific to Bootstrap 3 modal, except for any divs placed inside the modal body content in the middle of this block:

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
	<!-- Modal content-->
	<div class="modal-content">
	  <div class="modal-header">
          <!-- modal header  -->
		  <button type="button" class="close" data-dismiss="modal">&times;</button>
		  <h4 class="modal-title">Bootstrap 3 Modal Header</h4>
	  </div>
	  <div class="modal-body">
	  <!-- begin modal body content  -->
		  <section class="stage">
		  <figure class="ball"><span class="shadow"></span></figure>
		  </section>
	  <!-- end modal body content  -->
	  </div>
	  <div class="modal-footer">
          <!-- modal footer  -->
		  <center>Bootstrap 3 Modal Footer</center>
		  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	  </div>
       </div>
   </div>
</div>

Here is the CSS that allows you to set the width of the modal, specifically min-width: 500px;

/* modal details */
.modal-dialog{
  position: relative;
  display: table; /* This is important */
  width: auto;
  min-width: 500px; 
  /* overflow-y: scroll; */
  overflow-x: auto;
}

If you want to add a vertical scrollbar, this can be done by adding the following CSS:

/* Vertical scroll bar part 1 */
.modal-dialog{
  overflow-y: initial !important;
}

/* Vertical scroll bar part 2 */
.modal-body{
  max-height: 800px;
  overflow-y: auto;
}

Here is a demo of this modal on codepen which shows how to launch the modal via an HREF link and a button.

See the Pen Bootstrap 3 modal demo by Chris Nielsen (@Chris_Nielsen) on CodePen.0

 

For more information about setting up a Bootstrap 3 modal, see:
https://www.w3schools.com/bootstrap/bootstrap_modal.asp

Bootstrap 4 modal instructions:
https://getbootstrap.com/docs/4.0/components/modal/