Bootstrap 5 with Sass and Gulp 4 Tutorial by Example

Bootstrap 5 Page

The most popular Bootstrap CSS and JavaScript framework for styling user interfaces is coming with a new version — Bootstrap 5. In this tutorial, we will learn how to use the latest Bootstrap 5 version with Gulp 4 and Sass to style and build a responsive mobile-first example app.

We’ll use JavaScript to fetch data from a JSON endpoint that exports the latest posts from Techiediaries.

Bootstrap is the most popular and widely used, among developers worldwide, open-source framework for building responsive UIs with HTML, CSS, and JavaScript. At this time, Bootstrap 4 is the major production release of bootstrap but soon we’ll have a Bootstrap 5 version that will bring many major changes and most importantly removing jQuery as a dependency, and dropping support for IE 10 and 11.

Major changes include:

• 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
• Enhanblogced grid system
• Improved customizing docs
• Updated forms

Throughout this Bootstrap 5 tutorial, you will learn how to set up your development environment with Sass and Gulp 4, and create and style a page with Bootstrap 5 and Sass.

• Setting up a development environment with Bootstrap 5, Sass, Gulp 4 and BrowserSync
• Building a Bootsrap 5 blog page and fetching posts with JavaScript,
• Fetching Posts with JavaScript Fetch and Appending to the DOM
• Customizing the Bootstrap 5 Theme Colors with Sass Variables
• Including Bootstrap 5 Sass File
• Creating a Gulp Configuration File
• Installing Bootstrap 5, Sass, and Gulp 4
• How to Use Bootstrap 5 with Sass, Gulp 4 and BrowserSync

There are various ways to use Bootstrap 5 including importing the stylesheet and scripts from a CDN via <link> and <scripts> tags, and using Sass to take benefits of the Bootstrap 5 CSS framework.

Prerequisites

In order to follow this tutorial, you need to have Node.js installed on your machine. This is required for our front-end development tools such as Sass and Gulp but that’s not required if include Bootstrap 5 using <script> and <link> tags.

If you don’t have Node.js installed on your machine, simply head to the official website and download the binaries for your operating system.

You also need to have a basic knowledge of HTML and CSS.

Installing Bootstrap 5, Sass, and Gulp 4

After you have installed Node on your development machine, head over to a new terminal, and run the following command to install the Gulp CLI:

$ npm install --global gulp-cli

Gulp CLI will be installed globally on your machine.

Next, we need to install Gulp, BrowserSync, Gulp Sass and Bootstrap 5 using NPM.

Go back to your terminal and run the following command to create a package.json file by running the following command:

$ mkdir bootstrap5demo && cd bootstrap5demo 
$ npm init

You’ll be prompted for some details such as your project’s name and description. Enter them as you see fit.

After that, you’ll have a package.json file inside your current folder:

{
  "name": "bs5demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Next, you need to run the following command to install Gulp 4, BrowserSync, Gulp Sass and Bootstrap 5:

$ npm install browser-sync gulp gulp-sass --save-dev

At the time of writing this tutorial, these versions will be installed:

• gulp-sass@4.1.0
• gulp@4.0.2
• browser-sync@2.26.12

Next, run the following command to install Bootstrap 5:

$ npm install bootstrap@next
$ npm install popper.js

This will install bootstrap@5.0.0-alpha1 and popper.js@1.16.1 at the time of writing this tutorial.

Our package.json file should look like the following:

{
  "name": "bs5demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.12",
    "gulp": "^4.0.2",
    "gulp-sass": "^4.1.0"
  },
  "dependencies": {
    "bootstrap": "^5.0.0-alpha1",
    "popper.js": "^1.16.1"
  }
}

Note: Please note that you need to add the next tag to install the latest Bootstrap 5 version at this phase.

Popper.js is a dependency of Bootstrap 5.

Continue reading the tutorial -> https://www.techiediaries.com/bootstrap-5-sass-gulp-4-tutorial-example/