Dreams Technologies

Bootstrap Modals

A rendered modal with header, body, and set of actions in the footer.

Modal with Pages

Examples of custom modals.

Modal Position

Specify the position for the modal. You can display modal at top, bottom, center or right of page by specifying classes modal-top, modal-bottom, modal-dialog-centered and modal-right respectively.

Modal based Alerts

Show different contexual alert messages using modal component

Multiple Modal

Display a series of modals one by one to guide your users on multiple aspects or take step wise input.

Open first modal

Custom Modals

Examples of custom modals.

Static backdrop

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

Optional Sizes

Example of Modal sizes

Fullscreen Modal

Example of Fullscreen Modal

Modal Animation Effects

Example of Animation Effects

Varying Modal Content

Example of Animation Effects

Vertically Centered Modal

Example of Vertically Centered Modal

Vertical Centered Scrollable

Scrollbale content in modal

Tooltips and popovers

Tooltips and popovers in modal

Layout
Choose your layout
Vertical
Horizontal
Two Column
Color Scheme
Choose Light or Dark Scheme.
Orange
Light
Dark
Blue
Maroon
Purple
Layout Width
Choose Fluid or Boxed layout.
Fluid
Boxed
Layout Position
Choose Fixed or Scrollable Layout Position.
Topbar Color
Choose Light or Dark Topbar Color.
Light
Dark