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 ... https://www.youtube.com/watch?v=JvcaG91f9LM