Creating a Responsive Website with Bootstrap
Bootstrap is a free and open-source web development framework. It’s designed to ease the web development process of responsiveness by providing a collection of syntax for template designs.
In other words, Bootstrap helps web developers to build websites faster as they don’t need to worry about basic commands and functions.
It consists of HTML, CSS, and JS-based scripts for various web design-related functions and components.
Functions:
Bootstrap’s primary objective is to create responsive, mobile-first websites.
It ensures all interface elements of a website work optimally on all screen sizes.
Bootstrap is available in two variants. They are precompiled and based on a source code version.
Source code version:
This means it creates a custom stylesheet that imports Bootstrap, allowing you to modify and extend the tool as needed.
Why Bootstrap?
It is elementary to learn.
It has a simple file structure.
It is easy to access.
It only requires a basic knowledge of HTML, CSS, and JS.
Disadvantages:
While Bootstrap is compatible with the latest version of popular browsers, this isn’t the case with older versions.
Even though it is easy, it takes time to learn all the classes available.
Example:
Output:
We have created 3 div with respective properties without event declaring the style.
Instead, we have used a link tag in the head to link the bootstrap file.
col-sm-:
Here in the above code, the sm stands for Small classes.
col-sm- is used for small devices with more than 576 pixels in width.
Most of cases sm will be used for cell phone screens.
col-md-:
Similarly, we have col-md- for devices with a medium screen of over 768 pixels.
Here, md stands for medium screen devices.
col-xs-:
And col-xs- is used for devices with tiny screens with not more than 576 pixels in width.
Here xs stands for different small devices.
This xs is for simple small phones.
