What is Bootstrap?
In today’s era, we need responsive websites and web applications. Bootstrap does a great job in this field. Bootstrap is an open-source and free front-end framework for faster and easier web development. It includes the CSS (Cascading Style Sheets), and an optional JavaScript supported design template (plug-ins) that deals with typography, implementation of buttons, forms and various other components for the user interface. It is known as “One framework, every device” as the websites automatically scale between devices like mobile phones, tablets, desktop screens, laptop screen etc.
Ways to get it
The following two ways to start Bootstrap on your own web site:
You can:
- Download it from https://getbootstrap.com/
- Include it from a CDN
Why one should use Bootstrap?
-
Mobile-first approach:
In the Bootstrap 3 and above framework, there is a preexisting mobile-first style through all the library and not as separate files.
-
Very Simple and easy to learn:
If you know HTML and CSS, you can quickly start working with Bootstrap, and its documentation is provided on the official site.
-
Responsive look:
The web pages that are designed by using the Bootstrap framework has responsive CSS that can adjust to the screen according to the size of desktops, tablets, notebooks, and mobiles.
-
Customization:
It provides some built-in components and functionalities that are helpful for customizing.
-
Clean UI for Developers:
Bootstrap framework provides a new and consistent result for building user interfaces in web pages.
Example of code
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</head>
<body>
<div class="container">
<h1>h1 BS heading (36px)
<h2>h2 BS heading (30px)
<h3>h3 BS heading (24px)
<h4>h4 BS heading (18px)
<h5>h5 BS heading (14px)
<h6>h6 BS heading (12px)
</div>
</body>
</html>
Output:
h1 BS heading (36px)
h2 BS heading (30px)
h3 BS heading (24px)
h4 BS heading (18px)
h5 BS heading (14px)
h6 BS heading (12px)
Advantages
- It produces a few cross-browser bugs.
- It is a consistent framework supported by all browsers (like IE,) plus CSS based compatibility fixes.
- It is a lightweight and widely used framework for creating responsive sites.
- Looks, structure, and styles can be customized as per work requirements.
- A simple and effective grid system.
Disadvantages
- Since a framework has an inbuilt standard set of grids and selectors and other codes, it restricts your design. So for any new kind of design idea that you want to implement, you would have to learn a new framework.
- The extra code comes up from the list of predefined codes that come with the framework. You can choose not to use them through the frameworks you use.
- While we can build a responsive website with Bootstrap, the end results can be quite a bit heavy for the users in terms of slower loading times, as well as battery drain issues.
StudySection provides a Windows 10 certification exam to help those with skills in Microsoft Windows 10 operating system. This exam is available for two different levels namely “Foundation” and “Advanced”. This Windows 10 certification can help you land in a good job position when attached to your resume.
