- Download the latest bootstrap from their official Github page
- Install node Modules in your system
- Now open a terminal and navigate the bootstrap folder as a root
- Run npm install to install all local dependencies
- Install ruby
- install Bundler with sudo gem install bundler
- for Windows users follow the link to install bundler
- Now run bundle install
Now open your bootstrap folder and navigate to scss folder and open bootstrap.scss file with file editor and wrap all
@importmodules and prefix with your custom class
.Custom_class {
// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";
// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
// Helpers
@import "helpers";
// Utilities
@import "utilities/api";
}
- And open your minimized terminal and run npm run dist
- Boom!!! now check your bootstrap.css file
Note: finally open your bootstap file and remove the prefixed class before html and body tags
Download boorstrsp prefixed with .alms class! if you want you can replace the class with your own class name :)
<body class = ".alms">
<div class= "row">
<div class = "col-sm-12">
<h1> enjoy </h1>
</div>
</div>
</body>
source: bootstrap.com