Web Development Framework Bootstrap
Early web developers didn't have to worry about screen sizes because most monitors had 640x480, 800x600, or 1024x764 pixel resolutions.
Screen sizes were dealt with using either fixed-width or liquid-width layouts.
In the former, the width of a webpage was set to a fixed value that matched the screen size. Liquid layout flexed to fit the viewer's browser. However, unlike fixed-layouts, liquid layouts were not perfect. On smaller screens, their contents may overflow or break, leaving large white spaces. As screen sizes increased, more solutions to the drawbacks of fixed and liquid layouts emerged.
Responsive web design allows web pages to automatically adjust layout and appearance based on screen properties like width and resolution.
- Bootstrap is a front-end development framework made up of HTML, CSS, and JavaScript.
- The tool saves you time by not requiring you to code your website or web application from scratch.
- Open-source tool hosted on Github, available precompiled or as source code.
- In a web product, the precompiled version is the simplest form.
- The source code version includes CSS, JavaScript, and documentation.
- Designers and developers use it to create custom Bootstrap versions for their projects.
Use of Bootstrap
To use Bootstrap in any project, you must have a basic understanding of HTML, CSS, and JavaScript.
There are multiple ways to quickly add Bootstrap to your project:
With an Open Source CDN
A content delivery network is a collection of servers that deliver content quickly. It serves bootstrap files quickly. A CDN that serves files directly from GitHub repositories and the npm registry is recommended by Bootstrap.
Using a CDN has many benefits, including:
- The bootstrap files are loaded from a nearby server based on the user's location.
- Improved website security as content delivery via CDN protects against DDoS attacks.
- Many websites use a free open-source CDN like jsDeliver, which means some traffic caches bootstrap files locally. This saves bandwidth and speeds up a website.
Regardless, the JavaScript files are placed after the body tag.
The CSS and JS in the previous section should be combined into an HTML template as shown below.
If you decide to use other free or paid Bootstrap templates for your project, make sure they meet the latest design guidelines.
Note that new themes like the one below using Bootstrap 5 no longer require jQuery.
Locally downloading Bootstrap files
Alternatively, you can download Bootstrap from the official website and use it locally.
After downloading the compressed source file, unzip the CSS and JavaScript folders and place them in the project folder with the index.html file.
Similarly to the CDN option, you can load CSS and JS files by replacing the link's ahref with the correct file paths on your local hard drive.
