1. What is Bootstrap JS?
Bootstrap JS in one of the revolutionary tools that came to rescue when the responsiveness was becoming a major concern. It is an open source front-end framework for faster and easier web development, which gives us the ability to create responsive web pages easily. It includes HTML and CSS based design templates to create UI components. Bootstrap also contains over a dozen custom jQuery plugins.
2. What is Responsive Web Design?
Responsive web design is about creating web pages that automatically adjust themselves to look good on all sort of devices, ranging from small phones to large desktops, and Bootstrap gracefully helps us do that.
3. Setting up Bootstrap
There are two ways in which we can setup Bootstrap.
- Download Bootstrap from getbootstrap.com
- Include Bootstrap from a CDN – faster load time (which we will be using for our demos)
4. Basic Bootstrap etiquettes
Before we actually start creating a simple web page with Bootstrap, its important that we keep in mind the following Bootstrap etiquettes.
- The HTML5 doctype must always be at the beginning of the page, along with the lang attribute and the correct character set.
- To ensure proper rendering and touch zooming, we need to add the following inside the <head> element.
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width sets the width of the page to follow the screen-width of the device.
initial-scale=1 sets the initial zoom level when the page is first loaded.
- There must always be a containing element to wrap the page contents. It can be a .container (responsive fixed width container) class or .container-fluid class (full width container).
5. Create your first web page with Bootstrap