Bootstrap 5 Alpha - Introduction & Installation

Bootstrap 5 Alpha - Introduction & Installation

What is Bootstrap ?
Free and open-source CSS framework
Build responsive websites and web applications
Written in HTML/CSS/Javascript
Created by Twitter (Mark Otto, Jacob Thornton) in August 19, 2011
18 Millions websites in the world
Bootstrap V.5 Alpha is the latest version, release on 16 June 2020

Why use Bootstrap ?
Speed - Simplify the development of web pages
Compatibility - Uniform appearance for tables, forms across web browsers
Responsiveness
Consistency
Support - Large community
Customizable

What are the main differences between Bootstrap V.4 and Bootstrap V.5 ?
Dropping jQuery in favor of vanilla JavaScript
Rewriting the grid to support columns placed outside of rows and responsive gutters
Migrating the documentation from Jekyll to Hugo
Dropping support for IE10 and IE11
Moving testing infrastructure from QUnit to Jasmine
Adding custom set of SVG icons
Adding CSS custom properties
Improved API
Enhanced grid system
Improved customizing docs
Updated forms
No major changes concerning the components
Way to implement has changed drastically
Much better organized
It is modular and easily customizable
Easy to learn and use for web developers

How to install Bootstrap ?
There are multiple ways to install Bootstrap
Npm
RubyGems
Composer
NuGet

But in this video, I will show you how to install it the classical way

Start by downloading the Bootstrap V.5 zip file
Once downloaded, unzip it and rename it if you wish
Next, open the folder in your Visual Studio Code editor by right-clicking and click on Open with VS Code
Once your Visual Studio code is open create an index.html file
Click on the New File button and type in index.html
Open the index.html file
Type the exclamation mark! then hit the Tab key
Change the title of the web page to Web Project - Bootstrap V.5

Now, we have to link our web page to the Bootstrap CSS

Next in the body of the web page, we need to add the newest version of popper.js
Go to google and type Newest version of popper.js
Click on the link Popper (v2.x)
Copy and paste the CDN link
And we are also going to link the JavaScript part of bootstrap bootstrap.js

Now, let’s try to see if everything is working properly
I will first add a tag in the body
Save the file and then open your index.html file in the browser
There it is, the default bootstrap font is picking
To verify that, right-click and Inspect the page
Or, I can add a predefined bootstrap class the will change the background color of the text

Refresh
There it is, our bootstrap installation is working

#codingriver
#bootstrap5
#css