![\"\"](\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/04\/bootstrap3modal800.png\")
<\/p>\nIn this article I will show how to set up a modal using Bootstrap 3. This example looks like this at 800px width:<\/p>\n
<\/p>\n
To set up a Bootstrap 3 modal, we will need these three resources:<\/p>\n
These can be called via CDN at the top of our HTML file. For example:<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\">\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"><\/script>\r\n<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\"><\/script><\/pre>\nHere 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:<\/p>\n
<div class=\"modal fade\" id=\"myModal\" role=\"dialog\">\r\n <div class=\"modal-dialog modal-lg\">\r\n\t<!-- Modal content-->\r\n\t<div class=\"modal-content\">\r\n\t <div class=\"modal-header\">\r\n <!-- modal header -->\r\n\t\t <button type=\"button\" class=\"close\" data-dismiss=\"modal\">×<\/button>\r\n\t\t <h4 class=\"modal-title\">Bootstrap 3 Modal Header<\/h4>\r\n\t <\/div>\r\n\t <div class=\"modal-body\">\r\n\t <!-- begin modal body content -->\r\n\t\t <section class=\"stage\">\r\n\t\t <figure class=\"ball\"><span class=\"shadow\"><\/span><\/figure>\r\n\t\t <\/section>\r\n\t <!-- end modal body content -->\r\n\t <\/div>\r\n\t <div class=\"modal-footer\">\r\n <!-- modal footer -->\r\n\t\t <center>Bootstrap 3 Modal Footer<\/center>\r\n\t\t <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close<\/button>\r\n\t <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div><\/pre>\nHere is the CSS that allows you to set the width of the modal, specifically
min-width: 500px; <\/code><\/p>\n\/* modal details *\/\r\n.modal-dialog{\r\n position: relative;\r\n display: table; \/* This is important *\/\r\n width: auto;\r\n min-width: 500px; \r\n \/* overflow-y: scroll; *\/\r\n overflow-x: auto;\r\n}<\/pre>\nIf you want to add a vertical scrollbar, this can be done by adding the following CSS:<\/p>\n
\/* Vertical scroll bar part 1 *\/\r\n.modal-dialog{\r\n overflow-y: initial !important;\r\n}\r\n\r\n\/* Vertical scroll bar part 2 *\/\r\n.modal-body{\r\n max-height: 800px;\r\n overflow-y: auto;\r\n}\r\n<\/pre>\nHere is a demo of this modal on codepen which shows how to launch the modal via an HREF link and a button.<\/p>\n
\nSee the Pen Bootstrap 3 modal demo by Chris Nielsen (@Chris_Nielsen) on CodePen.<\/p>\n\n
<\/p>\n
For more information about setting up a Bootstrap 3 modal, see:
\nhttps:\/\/www.w3schools.com\/bootstrap\/bootstrap_modal.asp<\/a><\/p>\nBootstrap 4 modal instructions:
\nhttps:\/\/getbootstrap.com\/docs\/4.0\/components\/modal\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"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: bootstrap.min.css bootstrap.min.js jquery.min.js These can be called via CDN at the top of our HTML file. For example: <link … Continue reading HTML & CSS: How to set up a Bootstrap 3 modal<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[104],"tags":[134,10,105],"class_list":["post-1898","post","type-post","status-publish","format-standard","hentry","category-html-css","tag-bootstrap-3","tag-css","tag-html"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1898"}],"version-history":[{"count":15,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1898\/revisions"}],"predecessor-version":[{"id":1918,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1898\/revisions\/1918"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}