Bootstrap Tutorial

BS4 HomeBS4 Container

BS4 Borders

BS4 Border AdditiveBS4 Border SubtractiveBS4 Border ColorBS4 Border Radius

BS4 Float

BS4 floatBS4 clearfix

BS4 Close icon

BS4 Close Icon

BS4 Colors

BS4 ColorBS4 Background color

BS4 Display

BS4 Display NotationBS4 Display in Print

BS4 Embed

BS4 embed

BS4 Flex

BS4 FlexBS4 Flex DirectionBS4 justify-contentBS4 align-itemsBS4 align-selfBS4 align-contentBS4 Flex GrowBS4 Flex ShrinkBS4 Flex FillBS4 Flex WrapBS4 OrderBS4 Auto Margins

BS4 Sizing

BS4 WidthBS4 Height

BS4 Spacing

BS4 MarginBS4 PaddingBS4 Horizontal centering

BS4 Text

BS4 Text alignmentBS4 Text wrappingBS4 Text transformBS4 Font weight and italicsBS4 Text decorationBS4 Text resetBS4 Text monospace

BS4 Alignment

BS4 Vertical alignment

BS4 Visibility

BS4 Visibility

BS4 Overflow

BS4 Overflow

BS4 Link

BS4 Stretched Link

BS4 Shadow

BS4 Shadow

BS4 Position

BS4 Position

BS4 Typography

BS4 Typography HeadingsBS4 Typography Custom HeadingsBS4 Typography Display HeadingsBS4 Typography LeadBS4 Typography Inline textBS4 Typography AbbreviationsBS4 Typography BlockquotesBS4 Typography List UnstyledBS4 Typography List Inline

BS4 Code

BS4 Code InlineBS4 Code BlocksBS4 Code VariablesBS4 Sample OutputBS4 User input

BS4 Image

BS4 Image ResponsiveBS4 Image Thumbnails

BS4 Figures

BS4 Figure

BS4 Grid

BS4 Grid

BS4 Media Object

BS4 Media Object

BS4 Table

BS4 TableBS4 Table HeadBS4 Table CaptionsBS4 Table Responsive

BS4 Components

BS4 AlertBS4 BadgeBS4 BreadcrumbBS4 ButtonBS4 Button GroupBS4 CardBS4 CarouselBS4 CollapseBS4 DropdownBS4 FormBS4 Input GroupBS4 JumbotronBS4 List GroupBS4 ModalBS4 NavsBS4 NavbarBS4 PaginationBS4 PopoversBS4 ProgressBS4 SpinnersBS4 TooltipsBS4 ToastsBS4 Scrollspy

Bootstrap4 Modal

Last Updated:

Basic Modal

Check out the example to create a basic modal.

Example

Modal Scrolling Long Content

Check out the example to create a modal scrolling long content.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <h1>Modal Scrolling Long Content</h1> <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModalLong">Launch demo modal</button> <!-- Modal --> <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </body> </html>

Modal Scrollable

Check out the example to create a scrollable modal.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <h1>Modal Scrollable</h1> <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModalLong">Launch demo modal</button> <!-- Modal --> <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" 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="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </body> </html>

Modal Vertically centered

Check out the example to create a modal whose position is vertically centered.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <h1>Modal Vertically centered</h1> <!-- Button trigger modal --> <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModalCenter"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </body> </html>

Modal Sizing

Check out the example to create a modal of different sizing.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <h1>Modal Sizing</h1> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button> <div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Extra Large Modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- Large modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> <div class="modal fade bd-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"> <h5 class="modal-title" id="exampleModalLongTitle">Large Modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- Small modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button> <div class="modal fade bd-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"> <h5 class="modal-title" id="exampleModalLongTitle">Small Modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </body> </html>

Classes

The following table provides a list of all classes to create a modal.

Class Explanation
.modal Identifies the content as a modal and brings focus to it.
.modal-dialog Create a dialog box to display the modal.
.modal-dialog-scrollable Adds a scrollbar inside the modal.
.modal-dialog-centered Centers the modal vertically and horizontally within the page.
.modal-content Styles the modal (border, background-color, etc). It contains .modal-header, .modal-title, .modal-body, .modal-footer, if needed.
.modal-header The header of the modal (often contains a title and a close button).
.modal-title Defines the title of the modal.
.modal-body Defines the style for the body of the modal. Add any HTML markup here (h2, p, div, etc).
.modal-footer The footer of the modal.
.modal-xl Extra large modal.
.modal-lg Larger modal.
.modal-sm Smaller modal.

Share this Page

Meet the Author