Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton at Twitter, is free and open source front end Javascript web framework for designing the rich, sleek, intuitive web applications with minimal effort. This framework is more useful for building mobile based web applications. It uses HTML, Javascript and CSS based design templates and other interface components. It also has optional JavaScript extensions.
The major benefits of using Bootstrap are-
Main components of Bootstrap are-
Two layouts are available in Bootstrap-
1. Fluid Layout-Its design automatic adjusts to the browser size.
2. Fixed Layout-Its design doesn't adjust automatically to different browsers but it can be responsive.
Responsive layout's design automatic adjusts to the browser size but when resizing, the number of columns changes according to the space available.
Yes, sure. The main difference is that Fluid Layout are built using widths percentages and they are based on proportionally laying out the website so elements take up the same percent of space on different screen sizes. Responsive Layout is built on a fluid grid and here CSS Media Queries are used to present different layouts based on different screen sizes.
In order to make the images responsive, we need to add a class .img-responsive to the tag. This class sets maximum width equal to 100%, and height to auto adjustable to the image.
Bootstrap Media Queries are CSS techniques which are introduced in CSS3 that allow the designer to show, hide and move contents according to the size of viewport. @media is used to include a bunch of CSS properties if a certain condition is true.
Bootstrap Grid System is used for creation of page layout in rows & columns to store the contents. It can adjust up to 12 columns according to increase in the size of the device or viewport. Predefined grid classes have been included in Bootstrap 3 for designing different grid layouts for different devices like mobiles, tablets, desktops and laptops.
Modal Plugin is used to create modal window to add more functionalities for the user. A modal is a child window that is layered over its parent window. We can create Bootstrap Modal using a custom jQuery Plugin.