Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. Read Bootstrap documentation

button.btn.btn-primary(type='button', data-toggle='modal', data-target='#modal_demo_docs')
	| Launch demo modal
#modal_demo_docs.modal.fade(tabindex='-1', role='dialog', aria-labelledby='modal_demo_docs', aria-hidden='true')
	.modal-dialog.modal-dialog-centered(role='document')
		.modal-content
			.modal-header.p-4
				h5#modal_demo_docs.modal-title Modal title
				button.close.text-muted(type='button', data-dismiss='modal', aria-label='Close')
					i.fas.fa-times-circle(aria-hidden='true')
			.modal-body.px-4
				p.mb-0.lead
					| Replacer has not reviewed all of the sites linked to its website and is not responsible for the contents of any such linked site. The inclusion of any link does not imply endorsement by Replacer of the site. Use of any such linked website is at the user's own risk.
			.modal-footer.p-4
				button.btn.btn-sm.btn-link.px-3(type='button', data-dismiss='modal') Close
				button.btn.btn-sm.btn-primary.px-3.rounded-pill(type='button') Save changes

<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#modal_demo_docs">
	Launch demo modal
</button>
<div class="modal fade" id="modal_demo_docs" tabindex="-1" role="dialog" aria-labelledby="modal_demo_docs" style="display: none;" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header p-4">
				<h5 class="modal-title">Modal title</h5>
				<button class="close text-muted" type="button" data-dismiss="modal" aria-label="Close">
					<i class="fas fa-times-circle" aria-hidden="true"></i>
				</button>
			</div>
			<div class="modal-body px-4">
				<p class="mb-0 lead">
					Replacer has not reviewed all of the sites linked to its website and is not responsible for the contents of any such linked site. The inclusion of any link does not imply endorsement by Replacer of the site. Use of any such linked website is at the user's own risk.
				</p>
			</div>
			<div class="modal-footer p-4">
				<button class="btn btn-sm btn-link px-3" type="button" data-dismiss="modal">Close</button>
				<button class="btn btn-sm btn-primary px-3 rounded-pill" type="button">Save changes</button>
			</div>
		</div>
	</div>
</div>

Visit Bootstrap documentation to learn more about this component

Version 2.0.0, [email protected]