● Bootstrap is an open source front-end framework developed for faster and easier web development.
● Bootstrap comprises HTML and CSS based web design templates for forms, buttons, tables, navigation, modals, image carousels etc.
● It also enables you to easily create responsive designs i.e. the designs which fit in different devices smartly automatically.
Mark Otto and Jacob Thornton developed bootstrap in June 2014.
● Bootstrap is very easy to use.
● It is responsive in nature that is it can easly fits in multiple devices like mobile, web, tab etc.
● Its compatibility with multiple browsers and devices.
● Bootstrap is open source and has big community for its support.
● It can be easily customizable.
● It provides lots of helper classes which makes it easy to develop the responsive site.
Bootstrap CDN is Content Delivery Network, that is if you don't want to download the bootstrap files or don't want to keep them locally, you can use this CDN to include the in your project.
MaxCDN can be used for this support.
CDN CSS file can be included as mentioned below:
Mobile first is the part of bootstrap core framework. For proper rendering and touch zooming across different mobile device following meta tag can be included in HTML.
Container class gives fixed width container whereas container-fluid provides full width container.
While working on the designing part of your responsive website or project, bootstrap grid allows upto 12 columns in the screen where these can be adjusted according to the screen size of different devices like desktop, laptop, mobile, tablets etc.
In bootstrap grid there are four different classes for different devices:
● xs - This class can be use for mobiles with screen less than 768px width
● sm - This class can be use for tablets with screen more than 768px width
● md - This class can be use for small laptops with screen greater than 992px width
● lg - This class can be use for laptops and desktops with screen greater than 1200px width
Below are the sample code of two equal columns using bootstrap grid. This will automatically gets adjusted according to the devices.
It signifies spans 4 columns, similarly .col-sm-6 signifies spans 6 columns. While choosing the classes you need to make sure that there sum always ends up to 12.
The default font size is 14px, which is applicable to all the body and paragraph tags.
Contextual classes are the classes that we can use color the table rows and columns based on the action that we need to perform. Suppose for negative scenario we can use danger class which will put the background color of the row to light red.
Following are the different contextual classes:
Responsive images are the images which can be adjusted automatically according to the screen size. We can use the same by adding img-responsive class to the img HTML tag.
This helps scaling up the images in smoother and nicely manner. One thing that we need to take care is the width and height of the image. Make sure to set the following:
We have different classes in bootstrap that can be applied to different HTML elements like iframe, video, embed etc. embed-responsive-item class of bootstrap framework can be used to make responsive videos.
Bootstrap Jumbotron is a big box which can be used to highlight the content. This box will have round corners and grey text. It also enlarge the text mentioned inside this box.
Wells is the class in bootstrap which adds the rounded border, gray background and padding to the element to which it is applied.
We can have different well sizes as well. Following classes can be used to apply different sizes:
well-sm - For small wells
well-lg - For large wells
By default the size of wells is medium.
In bootstrap we have all together different classes which can be use to include predefined alerts. Following are the alert classes which can be use as per the need of the project: alert-success, alert-info, alert-warning, alert-danger.
Bootstrap allows to group the series of buttons in a group. This can be aligned vertically or horizontally.
Following are the some of the classes: btn-group, btn btn-primary, btn-group btn-group-lg, btn-group-vertical, btn-group btn-group-justified, btn-group btn-group-justified etc. For dropdown we can use class btn btn-primary dropdown-toggle.
Bootstrap provides 260 glyphicons which can be used in buttons, forms, toolbars, navigation, text etc.
Badges in bootstrap are the numeric value associated with the items or links.Badge class can be use to create badge for the element.
Label class are used to provide the information. Following are the additional contextual label class: label-default, label-primary, label-success, label-info, label-warning and label-danger.
Bootstrap provides the cool progress bars classes which can be easily used to depict the progress of the activity.
Different contextual classes are: progress-bar progress-bar-success, progress-bar progress-bar-info, progress-bar progress-bar-warning, progress-bar progress-bar-danger, progress-bar progress-bar-info progress-bar-striped, progress-bar progress-bar-striped active etc.
Bootstrap Progress bars are not supported in IE 9 and earlier browsers.
Breadcrumb class indicates the location of the current page. That is it shows the navigational path from the home page something like this.
Bootstrap Carousel Plugin is a component which is used to cycle through the elements of the carousel. carousel slide class is used to set the carousel effect for the images.
This is pop up window which will fade the background and display on top of the window. Following things to be used to create this effect in bootstrap: class="btn btn-info btn-lg" data-toggle="modal"
Tool tip can be created by using data-toggle="tooltip" attribute. Below is the sample code to create tooltip in bootstrap:
data-placement attribute can be used to position the data. Example:
When user clicks on the link a pop up box will appear.data-toggle="popover" attribute can be used for this affect.
It is used to update the links automatically based on scroll positions. In order to create scrollspy we need to include data-spy="scroll" attribute to the element which we need to include as scrollable area.
This allows the elements to be locked to the area in the page. This is used in navigation menus.