bootstrap tutorial for beginners-bootstrap modal
- Bootstrap3 is mobile first approach because it designed for mobile to build application and targeting on extra small devices.
- Each and every bootstrap class comes with, some predefined css style to the respected HTML element .
- Never override any bootstrap classes whenever working with twitter bootstrap.
- The bootstrap modal is one of the dialog box or popup to display the content on the web browser but the action on bootstrap modal will be depend on end user.
- We open the modal popup at the time of page loading or depending on user events like click and hover
- The bootstrap modal will invoke with use of traditional JQuery ,so you need add the CDN JQuery file library at the header section
- The traditional use of Bootstrap modal as Login&signup popup modal
- We have three different type of bootstrap modal popup’s to each different type of view-ports like modal-sm, modal-lg ,modal-md and modal-xs
bootstrap Modal class names , with use of the each class :-
data-toggle=’collapse’ and data-target=’#id of the <div>’ .These attributes will be bootstrap the respective code of modal popup, to populated on web browser when user perform click event on either button [<button>]or anchor [<a>]tag action
Class name Use of class in Bootstrap modal
.modal :- we use modal class to create modal popup
.modal-dialog:- We use modal-dialog class to set specific width and height to the modal
.modal-content:- we use modal-content class to decorate the modal popup with colors ,padding .This is the parent tag for modal body ,header &footer
.modal-header:- we use modal-header class to create the Header for the bootstrap modal popup
.modal-body:- we use the modal-body class to define the content of the bootstrap modal popup
.modal-footer:- we use modal-footer class to create the modal footer ,by default assign to right side
.modal-sm:- pointed for small devices
.modal-md:- pointed for medium devices
.modal-lg:- pointed on large devices
.modal-xs:- pointed on extra-small devices
.fade:- fade class will add the animation at the time of modal popup open and close
- To use modal popup ,you need to add two more attributes to the <button> tag OR <a> tag
- No need to push data-target=”#id” attribute to <a> tag. Instead of that we using the standard href=”# id of the <div>”
- We have a chance to add all contextual class to bootstrap modal for more good look and feel
- To dismiss the bootstrap modal ,we using ‘data-dismiss’ attribute as like data-dismiss=”modal”
Let’s work with Bootstrap popup:-
<button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#jsmodal”>Hit me!</button>
<div id=”jsmodal” class=”modal fade”>
<div class=”modal-dialog modal-lg”> <div class=”modal-content”>
<button type=”button” class=”close” data-dismiss=”modal”>×</button>
<h4> tutorialplanet will provide huge amount of articles </h4>
<button type=”button” class=”btn btn-danger” data-dismiss=”modal”>close</button>
</div></div> </div> </div>
Sample code with all CDN files
Sample output of the above markup
Thanks for reading this article on tutorialplanet. Later we discuss about the Modal-popup methods, options and events. Like my FB page to get more updates on Bootstrap.