Five steps to get personalized Bootstrap

..using Gulp 4 and SASS preprocessor

🚅 Bootstrap is amazing, makes front-end web development faster and easier. But how to change something inside? If you need a different primary color or rules of small device start at 576px isn't good for you. You can always change it. So, let's do it! 🎢

#0 Get Gulp

Install Gulp tool directly by npm package will be a fast way.

If you haven't npm yet, let's install only NodeJs this Node Package Manager will be inside.

npm install gulp-cli --global

#1 Download Bootstrap, Gulp and SASS tool

Save last Bootstrap version and Gulp SASS preprocessor tool to your project.

npm install gulp gulp-sass bootstrap --save-dev

#2 Copy Bootstrap to the local version

Fact is that npm created a lot of directory inside ./node_modules/. Look that in ./node_modules/bootstrap/scss/ we have source code of Bootstrap CSS framework and this is amazing

so lets copy all of './node_modules/bootstrap/scss/*' directory to './bootstrap-source/' localy 

#3 Change Bootstrap, personalize it

You can do what you want, but I have own plan.

I must change breakpoint rules for small devices to 370px instead 576px

/* @file: ./bootstrap-source/_variables.scss */

// Grid breakpoints
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
  xs: 0,
  sm: 370px, // @note: this is exactly what I need (before was 576px there)
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

#4 Tell to gulp sass what is needed

create ./gulpfile.js and set source directory to ./bootstrap-source/ and destination directory to ./css/

/* @file: ./gulpfile.js */

const { src, dest } = require('gulp');
const sass = require('gulp-sass'); // Gulp SASS plugin

function compileBootstrap() {
  return src('./bootstrap-source/**/*.scss') // Input
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('./css')); // Output

}

exports.default = compileBootstrap;

#5 Enjoy your own Bootstrap

Run gulp

gulp

And this is all. Ready CSS bootstrap with your modification, you can find in ./css/ folder.

---

#Inf summary

After this modification my own Bootstrap have diffrent bechavior for examples class: .d-sm-block, .float-sm-right, .text-sm-right, .mr-sm-auto and others from two hundred *-sm-* examples.

One change in the scss file has a big impact. I'm afraid of what you will do with it. So, just do it. Get own Bootstrap version, good looking in your specific project !🌟

---

Comments

[Łukasz Sarzyński]

Did it article help you?