#### Modals

#### Reminder!

Instructions for how to use modals are available on the Bootstrap documentation

#### Bootstrap Modals

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

#### Modal Heading

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

###### Overflowing text to show scroll behavior

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

#### Large modal

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

###### Overflowing text to show scroll behavior

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

#### Small modal

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

#### Modal Heading

###### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

###### Overflowing text to show scroll behavior

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

##### Modal title

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

    <!-- Standard modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#standard-modal">Standard Modal</button>
    <div id="standard-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="standard-modalLabel" aria-hidden="true">
    	<div class="modal-dialog">
    		<div class="modal-content">
    			<div class="modal-header">
    				<h4 class="modal-title" id="standard-modalLabel">Modal Heading</h4>
    				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
    			</div>
    			<div class="modal-body">
    				...
    			</div>
    			<div class="modal-footer">
    				<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
    				<button type="button" class="btn btn-primary">Save changes</button>
    			</div>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Large modal -->
    <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#bs-example-modal-lg">Large Modal</button>
    <div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    	<div class="modal-dialog modal-lg">
    		<div class="modal-content">
    			<div class="modal-header">
    				<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
    				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
    			</div>
    			<div class="modal-body">
    				...
    			</div>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Small modal -->
    <button  type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#bs-example-modal-sm">Small Modal</button>
    <div class="modal fade" id="bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    	<div class="modal-dialog modal-sm">
    		<div class="modal-content">
    			<div class="modal-header">
    				<h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
    				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
    			</div>
    			<div class="modal-body">
    				...
    			</div>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Full width modal -->
    <button  type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#full-width-modal">Full width Modal</button>
    <div id="full-width-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="fullWidthModalLabel" aria-hidden="true">
    	<div class="modal-dialog modal-full-width">
    		<div class="modal-content">
    			<div class="modal-header">
    				<h4 class="modal-title" id="fullWidthModalLabel">Modal Heading</h4>
    				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
    			</div>
    			<div class="modal-body">
    				...
    			</div>
    			<div class="modal-footer">
    				<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
    				<button type="button" class="btn btn-primary">Save changes</button>
    			</div>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Scrollable modal -->
    <button  type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#scrollable-modal">Scrollable Modal</button>
    <div class="modal fade" id="scrollable-modal" tabindex="-1" role="dialog" aria-labelledby="scrollableModalTitle" aria-hidden="true">
    	<div class="modal-dialog modal-dialog-scrollable" role="document">
    		<div class="modal-content">
    			<div class="modal-header">
    				<h5 class="modal-title" id="scrollableModalTitle">Modal title</h5>
    				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
    			</div>
    			<div class="modal-body">
    				...
    			</div>
    			<div class="modal-footer">
    				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    				<button type="button" class="btn btn-primary">Save changes</button>
    			</div>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

#### Modal with Pages

Examples of custom modals.

Name
Email address
Password
I accept Terms and Conditions
Email address
Password
Remember me

    <!-- Signup modal-->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#signup-modal">Sign Up Modal</button>
    <div id="signup-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    	<div class="modal-dialog">
    		<div class="modal-content">

    			<div class="modal-body">
    				<div class="text-center mt-2 mb-4">
    					<a href="index.html" class="text-success">
    						<span><img src="assets/images/logo-dark.png" alt="" height="18"></span>
    					</a>
    				</div>

    				<form class="ps-3 pe-3" action="#">

    					<div class="mb-3">
    						<label for="username" class="form-label">Name</label>
    						<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
    					</div>

    					<div class="mb-3">
    						<label for="emailaddress" class="form-label">Email address</label>
    						<input class="form-control" type="email" id="emailaddress" required="" placeholder="john@deo.com">
    					</div>

    					<div class="mb-3">
    						<label for="password" class="form-label">Password</label>
    						<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
    					</div>

    					<div class="mb-3">
    						<div class="form-check">
    							<input type="checkbox" class="form-check-input" id="customCheck1">
    							<label class="form-check-label" for="customCheck1">I accept <a href="#">Terms and Conditions</a></label>
    						</div>
    					</div>

    					<div class="mb-3 text-center">
    						<button class="btn btn-primary" type="submit">Sign Up Free</button>
    					</div>

    				</form>

    			</div>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Login modal -->
    <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#login-modal">Log In Modal</button>
    <div id="login-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    	<div class="modal-dialog">
    		<div class="modal-content">
    			<div class="modal-body">
    				<div class="text-center mt-2 mb-4">
    					<a href="index.html" class="text-success">
    						<span><img src="assets/images/logo-dark.png" alt="" height="18"></span>
    					</a>
    				</div>

    				<form action="#" class="ps-3 pe-3">

    					<div class="mb-3">
    						<label for="emailaddress1" class="form-label">Email address</label>
    						<input class="form-control" type="email" id="emailaddress1" required="" placeholder="john@deo.com">
    					</div>

    					<div class="mb-3">
    						<label for="password1" class="form-label">Password</label>
    						<input class="form-control" type="password" required="" id="password1" placeholder="Enter your password">
    					</div>

    					<div class="mb-3">
    						<div class="form-check">
    							<input type="checkbox" class="form-check-input" id="customCheck2">
    							<label class="form-check-label" for="customCheck2">Remember me</label>
    						</div>
    					</div>

    					<div class="mb-3 text-center">
    						<button class="btn rounded-pill btn-primary" type="submit">Sign In</button>
    					</div>

    				</form>

    			</div>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

#### Modal based Alerts

Show different contexual alert messages using modal component

#### Well Done!

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

#### Heads up!

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

#### Incorrect Information

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

#### Oh snap!

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

    <!-- Success Alert Modal -->
    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#success-alert-modal">Success Alert</button>
    <div id="success-alert-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    	<div class="modal-dialog modal-sm">
    		<div class="modal-content modal-filled bg-success">
    			<div class="modal-body p-4">
    				<div class="text-center">
    					<i class="dripicons-checkmark h1"></i>
    					<h4 class="mt-2">Well Done!</h4>
    					<p class="mt-3">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
    					<button type="button" class="btn btn-light my-2" data-bs-dismiss="modal">Continue</button>
    				</div>
    			</div>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Info Alert Modal -->
    <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#info-alert-modal">Info Alert</button>
    <div id="info-alert-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    	<div class="modal-dialog modal-sm">
    		<div class="modal-content">
    			<div class="modal-body p-4">
    				<div class="text-center">
    					<i class="dripicons-information h1 text-info"></i>
    					<h4 class="mt-2">Heads up!</h4>
    					<p class="mt-3">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
    					<button type="button" class="btn btn-info my-2" data-bs-dismiss="modal">Continue</button>
    				</div>
    			</div>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Warning Alert Modal -->
    <button  type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#warning-alert-modal">Warning Alert</button>
    <div id="warning-alert-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    	<div class="modal-dialog modal-sm">
    		<div class="modal-content">
    			<div class="modal-body p-4">
    				<div class="text-center">
    					<i class="dripicons-warning h1 text-warning"></i>
    					<h4 class="mt-2">Incorrect Information</h4>
    					<p class="mt-3">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
    					<button type="button" class="btn btn-warning my-2" data-bs-dismiss="modal">Continue</button>
    				</div>
    			</div>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Danger Alert Modal -->
    <button  type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#danger-alert-modal">Danger Alert</button>
    <div id="danger-alert-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    	<div class="modal-dialog modal-sm">
    		<div class="modal-content modal-filled bg-danger">
    			<div class="modal-body p-4">
    				<div class="text-center">
    					<i class="dripicons-wrong h1"></i>
    					<h4 class="mt-2">Oh snap!</h4>
    					<p class="mt-3">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
    					<button type="button" class="btn btn-light my-2" data-bs-dismiss="modal">Continue</button>
    				</div>
    			</div>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

#### 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 Heading

##### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

#### Modal Heading

#### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

#### Modal Heading

##### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

#### Center modal

##### Overflowing text to show scroll behavior

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

    <!-- Top modal -->
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#top-modal">Top Modal</button>
    <div id="top-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    	<div class="modal-dialog modal-top">
    		<div class="modal-content">
    			<div class="modal-header">
    				<h4 class="modal-title" id="topModalLabel">Modal Heading</h4>
    				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
    			</div>
    			<div class="modal-body">
    				...
    			</div>
    			<div class="modal-footer">
    				<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
    				<button type="button" class="btn btn-primary">Save changes</button>
    			</div>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Right modal -->
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#right-modal">Rightbar Modal</button>
    <div id="right-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    	<div class="modal-dialog modal-sm modal-right">
    		<div class="modal-content">
    			<div class="modal-header border-0">
    				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
    			</div>
    			<div class="modal-body">
    				<div class="text-center">
    					...
    				</div>
    			</div>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Bottom modal -->
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#bottom-modal">Bottom Modal</button>
    <div id="bottom-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    	<div class="modal-dialog modal-sm modal-bottom">
    		<div class="modal-content">
    			<div class="modal-header">
    				<h4 class="modal-title" id="bottomModalLabel">Modal Heading</h4>
    				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
    			</div>
    			<div class="modal-body">
    				...
    			</div>
    			<div class="modal-footer">
    				<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
    				<button type="button" class="btn btn-primary">Save changes</button>
    			</div>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Center modal -->
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#centermodal">Center modal</button>
    <div class="modal fade" id="centermodal" tabindex="-1" role="dialog" aria-hidden="true">
    	<div class="modal-dialog modal-dialog-centered">
    		<div class="modal-content">
    			<div class="modal-header">
    				<h4 class="modal-title" id="myCenterModalLabel">Center modal</h4>
    				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
    			</div>
    			<div class="modal-body">
    				...
    			</div>
    		</div><!-- /.modal-content -->
    	</div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

#### User Profile 12 messages

##### Nil Yeager

Manager

dummy@gmail.com
My Profile Account settings and more
My Messages Inbox and tasks
Settings Accout Settings
Project latest tasks and projects

#### 10:10

Morbi quis ex eu arcu auctor sagittis.

by Johne

#### 08:40

Proin iaculis eros non odio ornare efficitur.

by Amla

#### 07:10

In mattis mi ut posuere consectetur.

by Josef

#### 01:15

Morbi quis ex eu arcu auctor sagittis.

by Rima

#### 23:12

Morbi quis ex eu arcu auctor sagittis.

by Alaxa

#### 10:10

Morbi quis ex eu arcu auctor sagittis.

by Johne

#### 08:40

Proin iaculis eros non odio ornare efficitur.

by Amla

#### 07:10

In mattis mi ut posuere consectetur.

by Josef

#### 01:15

Morbi quis ex eu arcu auctor sagittis.

by Rima

#### 23:12

Morbi quis ex eu arcu auctor sagittis.

by Alaxa
Mayra Sibley
Active
Mayra Sibley

2 Hours

Hi there, I'm Jesse and you?
You

3 minutes

My name is Anne Clarc.
Mayra Sibley

40 seconds

Nice to meet you Anne.
How can i help you?