Bootstrap Templates & Themes Logo Bootstrap Templates & Themes
Bootstrap 4 Sass Gulp 4 Boilerplate screenshot

Bootstrap 4 Sass Gulp 4 Boilerplate

Author Avatar Theme by Jayeshlab
Updated: 6 Jun 2021
105 Stars

A Bootstrap 4.5.2 boilerplate with font-awesome, sass, gulp 4 tasks

Github Live Preview

Categories

Scss

Overview:

The Bootstrap 4 boilerplate with sass and gulp 4 is a development template that combines the power of Bootstrap 4.5.2 with additional features such as font-awesome 5, sass, gulp 4 tasks, and browserSync with hot-reloading. This boilerplate allows users to easily set up and customize their Bootstrap projects by overriding bootstrap sass variables.

Features:

  • Bootstrap 4.5.2: Includes the latest version of Bootstrap framework for building responsive and mobile-first websites.
  • Font-awesome 5 free: Provides a collection of scalable icons that can be easily integrated into the project.
  • Sass: Allows users to write modular and reusable CSS styles using the Sass preprocessor.
  • Gulp 4 tasks: Automates various development tasks such as compiling Sass to CSS, minifying CSS and JS files, and building production-ready files.
  • BrowserSync with hot-reloading: Enables live browser reloading during development, making it easier to see changes in real-time.

Installation:

To install the Bootstrap 4 boilerplate with sass and gulp 4, follow these steps:

  1. Make sure you have Node.js and NPM (which comes with Node.js) installed on your system.
  2. Install Gulp CLI, which is the Command Line Utility for Gulp, by running the following command in your terminal:
    npm install --global gulp-cli
  3. Verify Gulp CLI and Gulp local version by running the following commands:
    gulp --version
  4. Clone the repository by running the following command in your terminal:
    git clone https://github.com/JayeshLab/bootstrap-4-sass-gulp-4-boilerplate.git
  5. Change directory to the cloned repository:
    cd bootstrap-4-sass-gulp-4-boilerplate
  6. Install all dependencies and libraries by running the following command:
    npm install
  7. Run Gulp Task to compile Sass to CSS, minify CSS and JS, and build production-ready files in the dist folder:
    gulp
  8. Alternatively, you can start a local server with BrowserSync and hot reloading on changes to files (HTML, SCSS, JS) by running the following command:
    gulp dev

Summary:

The Bootstrap 4 boilerplate with sass and gulp 4 is a comprehensive development template that provides a solid foundation for building responsive websites with Bootstrap. It offers additional features such as font-awesome icons, support for Sass preprocessor, and automation of development tasks using Gulp 4. With the inclusion of BrowserSync, developers can enjoy live reloading during the development process. Overall, this boilerplate simplifies the setup and customization of Bootstrap projects, making it an efficient and time-saving tool for web developers.