Basic Modals

Default Modal

Toggle a modal via JavaScript by clicking the button above.

Basic Modal

Check First Paragraph

Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Cupcake sugar plum dessert tart powder chocolate fruitcake jelly. Tootsie roll bonbon toffee danish. Biscuit sweet cake gummies danish. Tootsie roll cotton candy tiramisu lollipop candy cookie biscuit pie.

Modal With Icons

With some icons and success alert to give success message.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Well done! You successfully read this important alert message.

Disable Keyboard

By Default, closes the modal when escape key is pressed. Disable keyboard interaction using data-backdrop="false".

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Disable Backdrop

Disable backdrop element using data-backdrop="false", it includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on outsidedata-backdrop="false" click.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Modal Show

Manually opens a modal. Returns to the caller before the modal has actually been shown.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Disable Animation

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Well done! You successfully read this important alert message.

Modal Themes

Primary Modal Template

To use primary modal theme, add .bg-primary class to the .modal-header container

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Success Modal Template

To use success modal theme, add .bg-success class to the .modal-header container

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Well done! You successfully read this important alert message.

Danger Modal Template

To use danger modal theme, add .bg-danger class to the .modal-header container

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Info Modal Template

To use info modal theme, add .bg-info class to the .modal-header container

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Warning Modal Template

To use warning modal theme, add .bg-warning class to the .modal-header container

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Well done! You successfully read this important alert message.

Border Modal Template

To use Border color modal theme, add .border-COLORNAME class to the .modal-content container

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Well done! You successfully read this important alert message.

Modal Sizes

Extra Small Modal Size

Add class .modal-xs with .modal-dialog to use Extra Small size of modal.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Small Modal Size

Add class .modal-sm with .modal-dialog to use small size of modal.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Default Modal Size

For default size, modal markup doesn't require any additional sizing class.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Well done! You successfully read this important alert message.

Large Modal

Add class .modal-lg with .modal-dialog to use large size of modal.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Extra Large Modal

Add class .modal-xl with .modal-dialog to use extra large size of modal.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Modal Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself

OnShow Modal Event

This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

OnShown Modal Event

This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

OnHide Modal Event

This event is fired immediately when the hide instance method has been called.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Well done! You successfully read this important alert message.

OnHidden Modal Event

This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Different Heading Options

Default heading Modal

Use .modal-title class for basic modal title.

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Modal with subtitle

Add span after Modal title for subtitle.

Main Modal Title

This is modal subtitle

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

H1 heading Modal

Use H1 for Modal title

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

H2 heading Modal

Use H2 for Modal title

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

H3 heading Modal

Use H3 for Modal title

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

H4 heading Modal

Use H4 for Modal title

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

H5 heading Modal

Use H5 for Modal title

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

H6 heading Modal

Use H6 for Modal title

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Form Components

Login Form

Created Simple Login Form.

Inline Login Form

Email:

Password:

Form with Icons

Modal Title

Email:

Password:

Bootstrap Input Style Form

Bootstrap Form using Floating Label fields.

Modal Title

Email Address

Password

Description

Modal Animations

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. Add the class .animated to the element you want to animate.

Bounce Animation

Bounce Animation using .bounce class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Flash Animation

Flash Animation using .flash class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Pulse Animation

Pulse Animation using .pulse class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

RubberBand Animation

RubberBand Animation using .rubberBand class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Shake Animation

Shake Animation using .shake class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Roll In Animation

Roll In Animation using .rollIn class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Swing Animation

Swing Animation using .swing class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Tada Animation

Tada Animation using .tada class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Wobble Animation

Wobble Animation using .wobble class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Jello Animation

Jello Animation using .jello class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Bounce In Animation

Bounce In Animation using .bounceIn class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Bounce In Down Animation

Bounce In Down Animation using .bounceInDown class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Bounce In Left Animation

Bounce In Left Animation using .bounceInLeft class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Bounce In Right Animation

Bounce In Right Animation using .bounceInRight class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Bounce In Up Animation

Bounce In Up Animation using .bounceInUp class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Fade In Animation

Use .fadeIn class for fade in animation to modal

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Fade In Down Animation

Fade In Down Animation using .fadeInDown class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Fade In Down Big Animation

Fade In Down Big Animation using .fadeInDownBig class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Fade In Left Animation

Fade In Left Animation using .fadeInLeft class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Fade In Left Big Animation

Fade In Left Big Animation using .fadeInLeftBig class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Fade In Right Animation

Fade In Right Animation using .fadeInRight class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Fade In Right Big Animation

Fade In Right Big Animation using .fadeInRightBig class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Fade In Up Animation

Fade In Up Animation using .fadeInUp class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Fade In Up Big Animation

Fade In Up Big Animation using .fadeInUpBig class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

FlipInX Animation

FlipInX Animation using .flipInX class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

FlipInY Animation

FlipInY Animation using .flipInY class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Light Speed In Animation

Light Speed In Animation using .lightSpeedIn class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Rotate In Animation

Use .rotateIn class for Rotate In Animation to modal

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Rotate In Down Left Animation

Rotate In Down Left Animation using .fadeInUp class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Rotate In Down Right Animation

Rotate In Down Right Animation using .rotateInDownRight class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Rotate In Up Left Animation

Rotate In Up Left Animation using .rotateInUpLeft class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Rotate In Up Right Animation

Rotate In Up Right Animation using .rotateInUpRight class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Zoom In Animation

Use .zoomIn class for Zoom In Animation to modal

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Zoom In Down Animation

Zoom In Down Animation using .zoomInDown class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Zoom In Left Animation

Zoom In Left Animation using .zoomInLeft class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Zoom In Right Animation

Zoom In Right Animation using .zoomInRight class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Zoom In Up Animation

Zoom In Up Animation using .zoomInUp class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Slide In Up Animation

Slide In Up Animation using .slideInUp class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Slide In Left Animation

Slide In Left Animation using .slideInLeft class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Slide In Right Animation

Slide In Right Animation using .slideInRight class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

Some More Text

Slide In Down Animation

Slide In Down Animation using .slideInDown class

Basic Modal

Check First Paragraph

Sweet roll biscuit donut cake gingerbread. Chocolate cupcake chocolate bar ice cream. Danish candy cake.

You have new order!

99% Server load

Warning notifixation

Complete the task

Generate monthly report

Margaret Govan

Bret Lezama

Carie Berra

Eric Alsobrook

Modal

Basic Modals

Default Modal

Modal With Icons

Disable Keyboard

Disable Backdrop

Modal Show

Disable Animation

Modal Themes

Primary Modal Template

Success Modal Template

Danger Modal Template

Info Modal Template

Warning Modal Template

Border Modal Template

Modal Sizes

Extra Small Modal Size

Small Modal Size

Default Modal Size

Large Modal

Extra Large Modal

Modal Events

OnShow Modal Event

OnShown Modal Event

OnHide Modal Event

OnHidden Modal Event

Different Heading Options

Default heading Modal

Modal with subtitle

H1 heading Modal

H2 heading Modal

H3 heading Modal

H4 heading Modal

H5 heading Modal

H6 heading Modal

Form Components

Login Form

Form with Icons

Bootstrap Input Style Form

Modal Animations

Bounce Animation

Flash Animation