![Trending Articles on Technical and Non Technical topics](/images/trending_categories.jpeg)
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Define the style for the body of the modal with Bootstrap
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>
Advertisements