It is very easy to setup and start using Bootstrap. This chapter will explain how to download and setup Bootstrap 5.3. We will also discuss the Bootstrap file structure, and demonstrate its usage with an example.
There are two ways to do the environment Setup in Bootstrap 5.3.
- Compiled CSS and JS
- Source Files
Following sections will discuss about these two steps.
Compiled CSS and JS
You can download ready to use compiled code of Bootstrap v5.3.0 here
Once downloaded, unzip the compressed folder and we see the following folder structure:
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-grid.rtl.css
│ ├── bootstrap-grid.rtl.css.map
│ ├── bootstrap-grid.rtl.min.css
│ ├── bootstrap-grid.rtl.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap-reboot.rtl.css
│ ├── bootstrap-reboot.rtl.css.map
│ ├── bootstrap-reboot.rtl.min.css
│ ├── bootstrap-reboot.rtl.min.css.map
│ ├── bootstrap-utilities.css
│ ├── bootstrap-utilities.css.map
│ ├── bootstrap-utilities.min.css
│ ├── bootstrap-utilities.min.css.map
│ ├── bootstrap-utilities.rtl.css
│ ├── bootstrap-utilities.rtl.css.map
│ ├── bootstrap-utilities.rtl.min.css
│ ├── bootstrap-utilities.rtl.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap.rtl.css
│ ├── bootstrap.rtl.css.map
│ ├── bootstrap.rtl.min.css
│ └── bootstrap.rtl.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.esm.js
├── bootstrap.esm.js.map
├── bootstrap.esm.min.js
├── bootstrap.esm.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map
This compressed folder contains:
- Compiled and minified CSS bundles: Bundles of compiled and minified CSS (view a comparison of CSS files)
- Compiled and minified JavaScript plugins: JavaScript plugins that have been minified and compiled (view a JS files comparison)
Documentation, source code, and any extra JavaScript dependencies like Popper are not included.
Source files
You can download Bootstrap source files by clicking on the download link on official site here, or you can also use the GitHub link to start downloading . You will get the Bootstrap v5.3.0 after this download.
Download Sass, JavaScript, and documentation files to customize Bootstrap using your asset pipeline. Extra tools are needed for this option.
- For converting Sass source files into CSS files, use the Saas compiler.
- Autoprefixer for CSS vendor prefixing
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.
CDN via jsDelivr
CDN (Content Delivery Network) is a free content delivery platform offered by Bootstrap. Predefined files of CSS and JS can be used without installing them in your local system using the Bootstrap CDN. You can use available Bootstrap codes by copying the link and adding them to your project.
The only condition to use the CDN is to have internet connectivity in your local system. Developers can access the complete CSS for Bootstrap CDN via jsDelivr by copying the below link:.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>It is advised to add Popper before JS, preferably via CDN:
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>Package managers
We can also install Bootstrap into the local system using Package Manager. Let’s see the commands to install Bootstrap.
| Package Manager | Description | Commands to install |
|---|---|---|
| npm | Install Bootstrap in your Node.js powered apps with the npm package: | $ npm install [email protected] |
| yarn | Install Bootstrap in your Node.js powered apps with the yarn package: | $ yarn add [email protected] |
| RubyGems | Install Bootstrap in your Ruby apps using Bundler (recommended) and RubyGems by adding the following line to your Gemfile: | gem ‘bootstrap’, ‘~> 5.3.0’ OR $ gem install bootstrap -v 5.3.0 |
| Composer | You can also install and manage Bootstrap’s Sass and JavaScript using Composer: | $ composer require twbs/bootstrap:5.3.0 |
| NuGet | If you develop in .NET Framework, you can also install and manage Bootstrap’s CSS or Sass and JavaScript using NuGet. | Step1: PM> Install-Package bootstrap Step2: PM> Install-Package bootstrap.sass |
HTML Template
A basic HTML template using Bootstrap 5.3 would look like this −
You can edit and try running this code using Edit & Run option.
Open Compiler
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap demo</title><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"></head><body><h1>Welcome to Tutorialspoint!</h1><script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script></body></html>Here you can see the popper.min.js, bootstrap.bundle.min.js and bootstrap.min.css files that are included to make a normal HTM file to the Bootstrapped Template.
In all the subsequent chapters we have used dummy text from the site https://www.lipsum.com/.
Leave a Reply