+91 90691 39140 | +1 253 214 3115 | info@hub4tech.com | hub4tech

Bootstrap Modal Plug-in Video

The Modal Plug-in

The Modal plug-in is a dialog box/popup window that is displayed on top of the current page:
The Modal Plug-in

How To Create a Modal

The following example shows how to create a basic modal:
How To Create a Modal

Example Explained

The "Trigger" part
To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes:

  • data-toggle="modal" opens the modal window
  • data-target="#myModal" points to the id of the modal
The "Modal" part
The parent < div > of the modal must have an ID that is the same as the value of the data-target attribute used to trigger the modal ("myModal"). The .modal class identifies the content of
as a modal and brings focus to it. The .fade class adds a transition effect which fades the modal in and out. Remove this class if you do not want this effect. The attribute role="dialog" improves accessibility for people using screen readers. The .modal-dialog class sets the proper width and margin of the modal.

The "Modal content" part
The < div > with class=" modal-content" styles the modal (border, background-color, etc.). Inside this < div >, add the modal's header, body, and footer. The .modal-header class is used to define the style for the header of the modal. The < button > inside the header has a data-dismiss="modal" attribute which closes the modal if you click on it. The .close class styles the close button, and the .modal-title class styles the header with a proper line-height. The .modal-body class is used to define the style for the body of the modal. Add any HTML markup here; paragraphs, images, videos, etc. The .modal-footer class is used to define the style for the footer of the modal. Note that this area is right aligned by default.

Modal Size
Change the size of the modal by adding the .modal-sm class for small modals or .modal-lg class for large modals. Add the size class to the
element with class .modal-dialog:

Small Modal
< div class="modal-dialog modal-sm" >

Large Modal
< div class="modal-dialog modal-lg" > By default, modals are medium in size.

Is it Helpful?
Copyright ©2015 Hub4Tech.com, All Rights Reserved. Hub4Tech™ is registered trademark of Hub4tech Portal Services Pvt. Ltd.
All trademarks and logos appearing on this website are the property of their respective owners.