Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Define the style for the body of the modal with Bootstrap

Bootstrap Web Development CSS Framework

Use the .modal class to define the style for the body of the modal.

You can try to run the following code to implement the .modal class ?

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <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>
   </head>
   <body>
      <div class = "container">
         <h2>Website Information</h2>
         <button type = "button" class="btn btn-lg" data-toggle = "modal" data-target = "#new">Info</button>
         <div class = "modal fade" id = "new" role = "dialog">
            <div class = "modal-dialog">
               <div class = "modal-content">
                  <div class = "modal-header">
                     <button type = "button" class = "close" data-dismiss = "modal">×</button>
                     <h4 class = "modal-title">Warning</h4>
                  </div>
                  <div class = "modal-body">
                     <p>If JavaScript isn't enabled in your web browser, then you may not be able to see this information correcty.</p>
                  </div>
                  <div class = "modal-footer">
                     <button type = "button" class = "btn btn-default" data-dismiss="modal">Close</button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>
Updated on: 2026-03-11T22:50:42+05:30

300 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements