Bootstrap contains a variety of UI Components that help you design a responsive website. you can use Bootstrap in two ways in your file. First, use the Bootstrap CDN link and another one is download it from getbootstrap.com.
Bootstrap is an open-source frontend framework that facilitates the creation of responsive websites and web applications. Built on HTML, CSS, and JavaScript, Bootstrap eliminates the need for developers to worry about basic commands and functions, enabling them to build websites and web apps much faster.
Bootstrap supports different browsers like Chrome, Microsoft, Edge, Opera, Firefox, and Safari browsers.
here, we mentioned the Features of Bootstrap and a step-by-step guide to using Bootstrap from getbootstrap.com and Bootstrap CDN in your project file.
Features of Bootstrap
Bootstrap is free to use. It has many features like responsive grids, a variety of UI components, and a mobile-first approach. Below we have given a brief description of the features of Bootstrap.
- Bootstrap uses a responsive grid system with a 12-column layout that adjusts its size depending on the screen size.
- Bootstrap includes a variety of UI components like navigation bars, checkboxes, radio groups, range sliders, buttons, forms, alerts, modals, carousels, and more.
- Typography is responsive by default, making text readable on a variety of screen sizes.
- Bootstrap provides utility classes for common tasks, such as spacing, alignment, and display properties.
- Bootstrap includes a variety of JavaScript plugins for features like modals, carousels, tooltips, popovers, and more.
- Bootstrap follows a mobile-first approach, prioritizing design and functionality for smaller screens and progressively enhancing it for larger screens.
- Bootstrap can be easily integrated with popular front-end technologies like jQuery, Angular, and React.
Two Ways to Include Bootstrap in Your Project
There are two ways to use Bootstrap in your code. The first is to use the Bootstrap CDN link, and the second is to download it from its official website (getbootstrap.com).
Bootstrap CDN Link
You need to copy and paste this CSS’s latest version Bootstrap CDN on the HTML code or file.
<link href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' rel='stylesheet'>You need to copy and paste the latest version of this JS Bootstrap CDN to the HTML code or file.
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>Download it from getbootstrap.com
Follow step-by-step instructions to download it.
- First of all, go to the official website of Bootstrap (getbootstrap.com).
- Then click on ‘Read installation docs‘.
- Click the ‘Download’ button below “Compiled CSS and JS“.
- The downloaded file is a zip file so extract it, this file contains two folders “JS” and “CSS“.
- Move that CSS and JS folder to the HTML file.
- Then open the HTML file.
- Paste the below-given link on the HTML code.
<link rel='stylesheet' & href='css/bootstrap.css'/>
<script src='js/bootstrap.js/>- The downloading process is complete.