BOOTSTRAP 5 GET STARTED
Bootstrap is one of the world’s most popular front-end development component libraries, open-Source, it was originally developed by Mark Otto and Jacob Thornton at Twitter. Mobile-First: allows us to develop responsive websites, which automatically adapt to the device used. Bootstrap is a free front-end framework for easier and faster web development, includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many more, as well as plug-ins Optional JavaScript. Bootstrap also gives you the ability to easily create responsive designs.
NOTE: When we talk about Bootstrap components, I will treat the most important ones as posts. Some such as Alerts, Cards, DropDown buttons and Forms will be downloadable as code examples directly from GITHUB.
WHAT IS RESPONSIVE WEB DESIGN
Responsive web design is all about creating websites that automatically adjust to look good on all devices, from small phones to large desktops.
WHY USE BOOTSTRAP?
Advantages of Bootstrap:
- Easy to use: Anyone with just basic HTML and CSS knowledge can start using Bootstrap
- Responsive functionality: Bootstrap’s responsive CSS adapts to phones, tablets and desktops
- Mobile first approach: In Bootstrap, mobile first styles are part of the core framework
- Browser Compatibility: Bootstrap 5 is compatible with all modern browsers (Chrome, Firefox, Edge, Safari and Opera). Note that if you need support for IE11 and earlier, you need to use BS4 or BS3.
HOW TO ADD BOOTSTRAP TO OUR PROJECTS
There are two ways:
Locally and via CDN (Content-Delivery-Network).
Let’s go to https://getbootstrap.com/docs/5.0/getting-started/introduction/ and see how to integrate bootstrap via CDN. I am attaching an image of the css file and the javascript file that must be inserted in our HTML files. Also at this address below is the start template, an HTML page ready for use with all CDNs.
INTEGRATION OF BOOTSTRAP IN VISUAL STUDIO CODE
Install the extension as shown in the image.
Advantages of using Bootstrap 5 CDN:
Many users have already downloaded Bootstrap 5 from jsDelivr when they visit another site. As a result, it will load from the cache when they visit your site, which leads to faster loading times. Additionally, most CDNs will make sure that once a user requests a file from it, it will be served by the closest server, which also leads to faster load times. However, in some situations it is not possible to have an internet connection, so in these cases it is necessary to install bootstrap locally. Let’s see how. Let’s go to the bootstrap home page again and click on the download section as shown in the image.
We copy the two folders within our project and add the links to the css file and the javascript file. The above code shows an example.
BOOTSTRAP 5 IS MOBILE FIRST
Mobile-first styles are part of the core framework. To ensure proper rendering and touch zoom, add the following <meta> tag inside the <head> element:
<meta name = “viewport” content = “width = device-width, initial-scale = 1”>
The width = device-width part sets the page width to follow the device screen width (which varies by device).
The initial-scale = 1 part sets the initial zoom level when the page is first loaded from the browser.
CONTAINERS
Bootstrap 5 also requires a container element to wrap the site’s content. There are two classes of containers to choose from:
The .container class provides a fixed-width responsive container
The .container-fluid class provides a full-width container, which spans the full width of the window.
Leave A Comment