Introduction to Bootstrap
Goal
- ⚡ Understand what is Bootstrap
What is Bootstrap ?
From wikipedia...
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation and other interface components.
https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)
So, Bootstrap is a CSS framework which contains CSS and Javascript.
In this section, we are going to focus on CSS part of Bootstrap.
Check official website
Visit: https://getbootstrap.com/
You see you need to add CSS and Javascript.
Check Bootstrap CSS file
In Bootstrap page, it is written that you need to import below CSS file.
Let's check this file.
Open: https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
It is difficult to read this file because this file is compressed .
So, use chrome extension to decompress this file for easy reading. https://chrome.google.com/webstore/detail/javascript-and-css-code-b/iiglodndmmefofehaibmaignglbpdald?hl=en
important 🔥
Bootstrap CSS is a huge external CSS file.
Remember the step in CSS section.
From the next step, let's play with this bootstrap CSS!