Aug
10
Bootstrap – Environment Setup ”; Previous Next 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 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 bootstrapStep2: 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. <!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/. Print Page Previous Next Advertisements ”;