Bootstrap - Modal demo


What is a modal?

A modal in bootstrap is a dialog box/popup window that is displayed on top of the current page. It is used to display important information or ask the user for confirmation before taking a specific action.

Modal is a core UI component of bootstrap and can be easily customized using built-in CSS classes and JavaScript methods.

class description
.modal This is used to define the basic structure of the modal
.modal-header This is used to define the header section of the modal
.modal-body This is used to define the body section of the modal
.modal-footer This is used to define the footer section of the modal
.fade This is used to add a fade effect to the modal
.modal-dialog This is used to customize the size and position of the modal
.modal-content This is used to customize the background color and border of the modal
.modal-title This is used to customize the title of the modal
.close This is used to add a close button to the modal

Some of the examples of the modals are as follows:

Example Description Download link
Basic static modal This example shows a static modal. Download
Scrollable modal This example shows a scrollable modal. Download
Modal with static backdrop This example shows a modal with static backdrop. Download
Modal with tooltip This example shows a modal with a tooltip. Download
Modal with popover This example shows a modal with a popover. Download
Modal with grid This example shows a modal with grid. Download
Animated modal This example shows a modal with animation. Download
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements