What is bootstrap?
Overview
Bootstrap is a free, open-source front-end framework used to develop responsive and mobile-friendly websites. It is incorporated with HTML and CSS-based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, and JavaScript plugins.
Bootstrap, which is free to download and use, was developed by Mark Otto and Jacob Thornton at Twitter. It was, however, released as an open source product in August 2011 on GitHub.
What a bootstrap package contains
-
Components: Bootstrap provides several reusable components built to provide iconography, dropdowns, navigation, alerts, pop-overs, and more.
-
CSS: Bootstrap provides basic style definitions for all HTML elements.
-
Javascript components: Bootstrap comes with Javascript components in the form of JQuery plugins that provide supplementary user interface elements such as dialog boxes, tooltips, and carousels.
-
Layout components: These components affect the entire structure of the web page. They are responsible for the alignment and positioning of contents on the webpage. Contents that are positioned using the layout components can be fixed or be in a fluid form.
Advantages of using Bootstrap in web development
- It is very easy to use and implement in projects since it builds on the basic knowledge from HTML and CSS.
- It supports the development of responsive websites.
- Bootstrap is compatible with most browsers like Chrome, Firefox, Safari, and so on.
- It is easy to integrate. Pre-existing pages, websites, applications, and operating software can all be integrated into designs.
Set up a Bootstrap project
To use Bootstrap in our web development project, we need to load Bootstrap in the head of our HTML file:
Explanation
From the code sample above, it can be seen that there exist some special code lines which can not be found in an ordinary HTML file. These codes provide the bootstrap effect in the web page created.
- Line 7–10: We load all the necessary plugins needed to include Bootstrap in our project. These plugins include jQuery, CSS, Popper js, and Javascript files.
- Line 14, 19, 26, and 31: The code below differs from usual HTML files where names are given to classes of div components to be referenced in our CSS file. The classes used in our pre-defined classes are provided by Bootstrap, which provides a specific style to our webpage. This is because loading the plugins in the head section of a file helps us include the compiled CSS provided by Bootstrap. Therefore, this explains why our project is styled even though we have no external CSS file.
