{"id":21350,"date":"2020-08-17T23:18:14","date_gmt":"2020-08-18T06:18:14","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=21350"},"modified":"2020-12-29T11:02:07","modified_gmt":"2020-12-29T19:02:07","slug":"bootstrap-modal","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/bootstrap-modal\/","title":{"rendered":"Using the Bootstrap Framework to Create a Modal"},"content":{"rendered":"\n

A modal is a window that is separate from the main window of a web page. It\u2019s main purpose is to disable the main window from user interaction and to share information or confirm something with the user. Modal windows are popular to use as log-in components, confirmation of user input, or a myriad of other uses. 
<\/p>\n\n\n\n

Bootstrap is a framework that can help us create components super quickly. In this article, we review how to get Bootstrap set up, learn why we might need a modal, and take a look at some examples of modals in action using the Bootstrap framework.<\/p>\n\n\n\n

Getting Started<\/h2>\n\n\n\n

To make sure we can view a modal in our web page, make sure we have the proper dependencies. For this project, we need Bootstrap, Popper.JS and jQuery. Navigate to Bootstrap\u2019s Quick Start<\/a> page for assistance with getting all your dependencies. <\/p>\n\n\n\n

It\u2019s up to you how to link the packages we need, but the easiest, most beginner-friendly way is to use the content delivery network \u2013 the CDN \u2013 for jQuery, Popper.js, and Bootstrap. Be careful of the order of your <script> tags \u2013 order matters here. <\/p>\n\n\n\n

When to Use a Modal<\/h2>\n\n\n\n

Modals are great to use for web-based applications that need to get a user\u2019s attention once in a while.
<\/p>\n\n\n\n

When logging in to your bank\u2019s website, for instance, then navigate to another tab, and then go back to the first website you might see a modal that has popped up, indicating you are to be logged out due to inactivity. Detecting inactivity is a prime example of when a modal is needed. The bank\u2019s setup doesn\u2019t allow further interaction on the site until the user has made the decision to continue to stay logged in or log out.
<\/p>\n\n\n\n

From a development perspective, modals help to keep the website from refreshing to a new page when it\u2019s not necessarily needed. Any number of shopping retailers use this as a way to provide a \u201cQuick View\u201d for their users so the user can not only navigate their site faster, but complete their shopping faster. Quick Views don\u2019t require an entire page reload to get an item\u2019s information. 
<\/p>\n\n\n\n

If a user needs to access main screen content while interacting with a modal, reach for another UI element to use instead. The point of a modal is to take the interaction with the main window away, giving control to the modal.<\/p>\n\n\n\n

Use Bootstrap to Create a Modal<\/h2>\n\n\n\n

Modals are traditionally built with HTML, CSS and JavaScript. All of these languages are important to the creation of the modal, but JavaScript is imperative to get modals to work. JavaScript the switch that will turn the modal on or off. 
<\/p>\n\n\n\n

When using Bootstrap, it\u2019s good to have the documentation at hand so you can properly copy and paste the modal code. As you are learning to use Bootstrap, and how these components work, I recommend copying\/pasting and then commenting the code so you can know or figure out what each line of code is doing. 
<\/p>\n\n\n\n

Since we are not reinventing the wheel here by using Bootstrap\u2019s modal code, it\u2019s crucial to know how it works so you can explain it to another person. It\u2019s not worth it to copy and paste something if you\u2019re not able to explain why it works. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Launching the Modal With a Button<\/h2>\n\n\n\n
<button\n    type="button"\n    class="btn btn-primary"\n    data-toggle="modal"\n    data-target="#exampleModal"\n>Launch demo modal\n<\/button><\/pre><\/div>\n\n\n\n
This code comes directly from Bootstrap\u2019s documentation on how to create a modal using their framework. The rest of the article is spent on going through the code so we can be sure of what the markup means. We cover mainly attributes in this section. 
<\/p>\n\n\n\n
    class="btn btn-primary"<\/pre><\/div>\n\n\n\n
We know what class means as it relates to CSS. Here it is no different. The classes listed correspond to the Bootstrap stylesheet that we referenced in the head of the HTML document. 
<\/p>\n\n\n\n
The \u201cbtn\u201d class controls most of the styling of the button; the color is controlled by the second class name. Try changing \u201cbtn-primary\u201d to another common button color (i.e. btn-secondary or btn-danger) to see what happens. 
<\/p>\n\n\n\n
    data-toggle="modal"<\/pre><\/div>\n\n\n\n
This attribute corresponds to the data-dismiss attribute that\u2019s part of the button inside the modal.
<\/p>\n\n\n\n
    data-target="#exampleModal"<\/pre><\/div>\n\n\n\n
The data-target attribute targets the code block that has an id of exampleModal. The exampleModal is our actual modal content. It grabs the information from the identified block. 
<\/p>\n\n\n\n
This is especially crucial if we have multiple modals on the same page. You want to change the data-target attribute and the id so that only one modal will open at a time.
<\/p>\n\n\n\n
Event handlers are all managed by Bootstrap using jQuery and Popper.js. No need to worry about what to do when a user clicks as it\u2019s already handled! To make sure it continues to work, do not change any of the original class names as this is how they are selected in our CSS.<\/p>\n\n\n\n
Main Modal Element<\/h2>\n\n\n\n
<div\n    class="modal fade"\n    id="exampleModal"\n    tabindex="-1"\n    aria-labelledby="exampleModalLabel"\n    aria-hidden="true"\n>\n   ...  Modal stuff here ...\n<\/div><\/pre><\/div>\n\n\n\n
As with above, this code comes directly from Bootstrap\u2019s documentation. The purpose of this section is to go over the markup to be certain what it means. 
<\/p>\n\n\n\n
    class="modal fade"<\/pre><\/div>\n\n\n\n
The main modal element is launched by using a button on the main web page. The class names here indicate we have two separate selectors for our modal. The first indicates the styles for the modal itself. The second indicates that this element transitions using a fade-in and fade-out technique.
<\/p>\n\n\n\n
    id="exampleModal"<\/pre><\/div>\n\n\n\n
We have seen the id attribute before. It is how we target an element for changing the style. In this instance, it is also the target of the launch button on the main page. It matches the \u201cdata-target\u201d attribute.
<\/p>\n\n\n\n
    tabindex="-1"<\/pre><\/div>\n\n\n\n
The tabindex usually indicates that the element is reachable by keyboard. This is not the case when the number is negative. It\u2019ll be focused by using JavaScript and\/or a click event.
<\/p>\n\n\n\n
 aria-labelledby="exampleModalLabel"\n aria-hidden="true"<\/pre><\/div>\n\n\n\n
The aria attributes are straightforward and refers to accessibility. The labelledby aria attribute is usually associated with that modal-title id. The hidden attribute\u2019s true value indicates it is not seen by screen readers.
<\/p>\n\n\n\n
Creating Your Own Modal Element With Bootstrap Starter<\/h2>\n\n\n\n
You can put your own spin on Bootstrap\u2019s modal by changing up the styles. The cascading nature of CSS still reigns supreme so overwriting the CSS can be done with creating a new class and attaching it to the class name separated by a space, or by overwriting a class name using the important keyword. The latter should only be used in extreme cases. Most often, we will see changes done with a custom class name. 
<\/p>\n\n\n\n
<!DOCTYPE html>\n<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->\n<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->\n<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->\n<!--[if gt IE 8]><!-->\n<html class="no-js">\n   <!--<![endif]-->\n   <head>\n       <meta charset="utf-8" \/>\n       <meta http-equiv="X-UA-Compatible" content="IE=edge" \/>\n       <title>Bootstrap Modal<\/title>\n       <meta name="description" content="" \/>\n       <meta name="viewport" content="width=device-width, initial-scale=1" \/>\n       <!-- Link to Bootstrap Stylesheet -->\n       <link\n           rel="stylesheet"\n           href="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.0\/css\/bootstrap.min.css"\n       \/>\n       <style>\n           body {\n               max-width: 1400px;\n               width: 100%;\n               padding: 20px;\n               margin: 20px;\n           }\n           .btn-ck {\n               background-color: goldenrod;\n               border: 1px solid black;\n               color: black;\n           }\n           .btn-ck:hover {\n               background-color: rgb(231, 203, 131);\n               border: 1px solid lightgray;\n           }\n           .custom-modal {\n               background: rgb(250, 249, 243);\n               height: 400px;\n               width: 500px;\n               position: fixed;\n               top: center;\n               left: center;\n           }\n       <\/style>\n   <\/head>\n   <body>\n       <!--[if lt IE 7]>\n           <p class="browsehappy">\n               You are using an <strong>outdated<\/strong> browser. Please\n               <a href="#">upgrade your browser<\/a> to improve your experience.\n           <\/p>\n       <![endif]-->\n \n       <!-- Button triggers modal -->\n       <h1>Modal Example<\/h1>\n      \n     \n      \n       <button\n           type="button"\n           class="btn btn-primary btn-ck"\n           data-toggle="modal"\n           data-target="#exampleModal"\n       >\n     \n           Launch demo modal\n       <\/button>\n \n       <!-- Modal -->\n       <div\n           class="modal fade"\n           id="exampleModal"\n           tabindex="-1"\n           aria-labelledby="exampleModalLabel"\n           aria-hidden="true"\n       >\n           <div class="modal-dialog">\n               <div class="modal-content custom-modal">\n                   <div class="modal-header">\n                       <h5 class="modal-title" id="exampleModalLabel">\n                           CareerKarma Demo Modal\n                       <\/h5>\n                       <button\n                           type="button"\n                           class="close"\n                           data-dismiss="modal"\n                           aria-label="Close"\n                       >\n                           <span aria-hidden="true">&times;<\/span>\n                       <\/button>\n                   <\/div>\n                   <div class="modal-body">\n                       You are reading a modal with a bit of custom styling...\n                   <\/div>\n                   <div class="modal-footer">\n                       <button\n                           type="button"\n                           class="btn btn-secondary"\n                           data-dismiss="modal"\n                       >\n                           Close\n                       <\/button>\n                       <button type="button" class="btn btn-primary btn-ck">\n                           Save changes\n                       <\/button>\n                   <\/div>\n               <\/div>\n           <\/div>\n       <\/div>\n \n       <!-- The following CDN's go right before the closing body tag. -->\n       <!-- jquery CDN first -->\n       <script\n           src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js"\n           async\n           defer\n       ><\/script>\n       <!-- popper.js CDN second -->\n       <script\n           src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/2.4.4\/umd\/popper.min.js"\n           async\n           defer\n       ><\/script>\n       <!-- bootstrap CDN third -->\n       <script\n           src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.2\/js\/bootstrap.min.js"\n           async\n           defer\n       ><\/script>\n   <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
In the code editor above, we\u2019ve used CSS to change the style of the buttons and the background of the modal. In this example, I\u2019ve added a custom class name instead of trying to overwrite any of the CSS that Bootstrap already provides using the !important keyword. <\/p>\n\n\n\n
Conclusion<\/h2>\n\n\n\n
The main hurdle when creating a modal using Bootstrap is making sure documentation is ready correctly. Quite often if there is an error, it\u2019s most likely due to a copy\/paste error, an error in position of the CDN or stylesheet in the head\/body of your HTML or that your CSS is not targeting the correct element. <\/p>\n\n\n\n
Some of this custom styling will come with trial and error. What\u2019s great is that Bootstrap\u2019s documentation is very thorough \u2013 if you\u2019ve not learned another framework or package prior to this one, you\u2019re lucky in that the documentation is pretty great and fairly simple to understand. <\/p>\n","protected":false},"excerpt":{"rendered":"A modal is a window that is separate from the main window of a web page. It\u2019s main purpose is to disable the main window from user interaction and to share information or confirm something with the user. Modal windows are popular to use as log-in components, confirmation of user input, or a myriad of…","protected":false},"author":77,"featured_media":20302,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-21350","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"HTML","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nUsing the Bootstrap Framework to Create a Modal | Career Karma<\/title>\n<meta name=\"description\" content=\"Use Bootstrap to create a modal for your website quickly. Learn how at Career Karma.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/bootstrap-modal\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using the Bootstrap Framework to Create a Modal\" \/>\n<meta property=\"og:description\" content=\"Use Bootstrap to create a modal for your website quickly. Learn how at Career Karma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/bootstrap-modal\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-18T06:18:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T19:02:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-modal\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-modal\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"Using the Bootstrap Framework to Create a Modal\",\"datePublished\":\"2020-08-18T06:18:14+00:00\",\"dateModified\":\"2020-12-29T19:02:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-modal\\\/\"},\"wordCount\":1277,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-modal\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-modal\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-modal\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-modal\\\/\",\"name\":\"Using the Bootstrap Framework to Create a Modal | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-modal\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-modal\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg\",\"datePublished\":\"2020-08-18T06:18:14+00:00\",\"dateModified\":\"2020-12-29T19:02:07+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Use Bootstrap to create a modal for your website quickly. Learn how at Career Karma.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-modal\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-modal\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-modal\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg\",\"width\":1200,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/bootstrap-modal\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Using the Bootstrap Framework to Create a Modal\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using the Bootstrap Framework to Create a Modal | Career Karma","description":"Use Bootstrap to create a modal for your website quickly. Learn how at Career Karma.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/bootstrap-modal\/","og_locale":"en_US","og_type":"article","og_title":"Using the Bootstrap Framework to Create a Modal","og_description":"Use Bootstrap to create a modal for your website quickly. Learn how at Career Karma.","og_url":"https:\/\/careerkarma.com\/blog\/bootstrap-modal\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-08-18T06:18:14+00:00","article_modified_time":"2020-12-29T19:02:07+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-modal\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-modal\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"Using the Bootstrap Framework to Create a Modal","datePublished":"2020-08-18T06:18:14+00:00","dateModified":"2020-12-29T19:02:07+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-modal\/"},"wordCount":1277,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-modal\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/bootstrap-modal\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-modal\/","url":"https:\/\/careerkarma.com\/blog\/bootstrap-modal\/","name":"Using the Bootstrap Framework to Create a Modal | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-modal\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-modal\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg","datePublished":"2020-08-18T06:18:14+00:00","dateModified":"2020-12-29T19:02:07+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Use Bootstrap to create a modal for your website quickly. Learn how at Career Karma.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/bootstrap-modal\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/bootstrap-modal\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-modal\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/pankaj-patel-u2Ru4QBXA5Q-unsplash.jpg","width":1200,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/bootstrap-modal\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/careerkarma.com\/blog\/html\/"},{"@type":"ListItem","position":3,"name":"Using the Bootstrap Framework to Create a Modal"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/21350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=21350"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/21350\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/20302"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=21350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=21350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=21350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}