LTR VERSION RTL VERSION

Horizontal Menu

Light
Dark
Color

card styles

Card Radius
Box-shadow none

Body Skin Modes

Default
Style 01
Style 02

Body Style

Light Mode
Dark Mode
HorizontalMenu Left Menu
View Demo Buy Now Our Portfolio
loader
Dashtic logo
Projects
App Design Projects Web Design Projects App Development Projects Back-End Projects
View Projects
Message Sent.
3 hours ago
Order Placed
5 hour ago
Event Started
45 mintues ago
Your Admin lanuched
1 daya ago
View All Notifications
img
John Thomson App Developer
Profile
Settings
Messages
Sign Out

Modal

  1. Home
  2. Elements
  3. Modal
Small Modal
Notice

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

View Live Demo
Html 
<div class="p-4 bg-light border border-bottom-0">
		<div class="modal d-block pos-static">
			<div class="modal-dialog modal-sm" role="document">
				<div class="modal-content modal-content-demo">
					<div class="modal-header">
						<h6 class="modal-title">Notice</h6><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
					</div>
					<div class="modal-body">
						<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
					</div>
					<div class="modal-footer justify-content-center">
						<button class="btn btn-indigo" type="button">Save changes</button> <button class="btn btn-light" type="button">Close</button>
					</div>
				</div>
			</div>
		</div>
		</div><!-- modal-wrapper-demo -->
		<div class="text-center py-4 bg-light border">
		<a class="btn btn-primary" data-target="#modaldemo2" data-toggle="modal" href="">View Live Demo</a>
		</div><!-- pd-y-30 -->
Large Modal
Message Preview
Why We Use Electoral College, Not Popular Vote

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

View Live Demo
Html 
<div class="p-4 bg-light border border-bottom-0">
		<div class="modal d-block pos-static">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content modal-content-demo">
					<div class="modal-header">
						<h6 class="modal-title">Message Preview</h6><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
					</div>
					<div class="modal-body">
						<h6>Why We Use Electoral College, Not Popular Vote</h6>
						<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
					</div>
					<div class="modal-footer">
						<button class="btn btn-indigo" type="button">Save changes</button> <button class="btn btn-light" type="button">Close</button>
					</div>
				</div>
			</div>
		</div>
		</div><!-- modal-wrapper-demo -->
		<div class="text-center py-4 bg-light border">
		<a class="btn btn-primary" data-target="#modaldemo3" data-toggle="modal" href="">View Live Demo</a>
		</div><!-- pd-y-30 -->
Success Alert Messages

Congratulations!

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.

View Live Demo
Html 
<div class="p-4 bg-light border border-bottom-0">
		<div class="modal d-block pos-static">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-body text-center p-4">
						<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button> <i class="fe fe-check-circle fs-100 text-success lh-1 mg-t-20 d-inline-block"></i>
						<h4 class="text-success">Congratulations!</h4>
						<p class="mg-b-20 mg-x-20">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.</p><button class="btn btn-success pd-x-25" type="button">Continue</button>
					</div>
				</div>
			</div>
		</div>
		</div><!-- modal-wrapper-demo -->
		<div class="text-center py-4 bg-light border">
		<a class="btn btn-primary" data-target="#modaldemo4" data-toggle="modal" href="">View Live Demo</a>
		</div><!-- modal-footer-demo -->
Warning Alert Messages

Error: Cannot process your entry!

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.

View Live Demo
Html 
<div class="p-4 bg-light border border-bottom-0 mg-t-20">
		<div class="modal d-block pos-static">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-body text-center p-4">
						<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button> <i class="fe fe-x-circle fs-100 text-danger lh-1 mg-t-20 d-inline-block"></i>
						<h4 class="text-danger">Error: Cannot process your entry!</h4>
						<p class="mg-b-20 mg-x-20">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.</p><button aria-label="Close" class="btn btn-danger pd-x-25" type="button">Continue</button>
					</div>
				</div>
			</div>
		</div>
		</div><!-- modal-wrapper-demo -->
		<div class="text-center py-4 bg-light border">
		<a class="btn btn-primary" data-target="#modaldemo5" data-toggle="modal" href="">View Live Demo</a>
		</div><!-- modal-footer-demo -->
Modal Animation Effects
Scale
Slide In Right
Slide In Bottom
Newspaper
Fall
Flip Horizontal
Flip Vertical
Super Scaled
Sign
Rotate Bottom
Rotate Left
Just Me
Html 
<div class="row ">
		<div class="col-sm-6 col-md-4 col-xl-3">
			<a class="modal-effect btn btn-primary btn-block" data-effect="effect-scale" data-toggle="modal" href="#modaldemo8">Scale</a>
		</div>
		<div class="col-sm-6 col-md-4 col-xl-3 mg-t-20 mg-sm-t-0">
			<a class="modal-effect btn btn-primary btn-block" data-effect="effect-slide-in-right" data-toggle="modal" href="#modaldemo8">Slide In Right</a>
		</div>
		<div class="col-sm-6 col-md-4 col-xl-3 mg-t-20 mg-md-t-0">
			<a class="modal-effect btn btn-primary btn-block" data-effect="effect-slide-in-bottom" data-toggle="modal" href="#modaldemo8">Slide In Bottom</a>
		</div>
		<div class="col-sm-6 col-md-4 col-xl-3 mg-t-20 mg-xl-t-0">
			<a class="modal-effect btn btn-primary btn-block" data-effect="effect-newspaper" data-toggle="modal" href="#modaldemo8">Newspaper</a>
		</div>
		<div class="col-sm-6 col-md-4 col-xl-3 mg-t-20">
			<a class="modal-effect btn btn-primary btn-block" data-effect="effect-fall" data-toggle="modal" href="#modaldemo8">Fall</a>
		</div>
		<div class="col-sm-6 col-md-4 col-xl-3 mg-t-20">
			<a class="modal-effect btn btn-primary btn-block" data-effect="effect-flip-horizontal" data-toggle="modal" href="#modaldemo8">Flip Horizontal</a>
		</div>
		<div class="col-sm-6 col-md-4 col-xl-3 mg-t-20">
			<a class="modal-effect btn btn-primary btn-block" data-effect="effect-flip-vertical" data-toggle="modal" href="#modaldemo8">Flip Vertical</a>
		</div>
		<div class="col-sm-6 col-md-4 col-xl-3 mg-t-20">
			<a class="modal-effect btn btn-primary btn-block" data-effect="effect-super-scaled" data-toggle="modal" href="#modaldemo8">Super Scaled</a>
		</div>
		<div class="col-sm-6 col-md-4 col-xl-3 mg-t-20">
			<a class="modal-effect btn btn-primary btn-block" data-effect="effect-sign" data-toggle="modal" href="#modaldemo8">Sign</a>
		</div>
		<div class="col-sm-6 col-md-4 col-xl-3 mg-t-20">
			<a class="modal-effect btn btn-primary btn-block" data-effect="effect-rotate-bottom" data-toggle="modal" href="#modaldemo8">Rotate Bottom</a>
		</div>
		<div class="col-sm-6 col-md-4 col-xl-3 mg-t-20">
			<a class="modal-effect btn btn-primary btn-block" data-effect="effect-rotate-left" data-toggle="modal" href="#modaldemo8">Rotate Left</a>
		</div>
		<div class="col-sm-6 col-md-4 col-xl-3 mg-t-20">
			<a class="modal-effect btn btn-primary btn-block" data-effect="effect-just-me" data-toggle="modal" href="#modaldemo8">Just Me</a>
		</div>
		</div>

Modal Sizes

Add .modal-sm or .modal-lg to modal-dialog to increase and decrease the modal box sizes.

Html 
<p>Add <code class="highlighter-rouge">.modal-sm </code> or <code class="highlighter-rouge">.modal-lg </code> to modal-dialog to increase and decrease the modal box sizes.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#smallmodal">Small Modal</button>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#normalmodal">Default Modal</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#largemodal">large Modal</button>