Skip to content

Sanusihassan/custom-bootstrap

Repository files navigation

Bootstrap logo

Custom Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Installation

  1. install cssmolecule
npm install cssmolecule
  1. install custom-bootstrap
npm install custom-bs

Usage

  • in your main.jsx or main.tsx or main.js file import the following:
import "cssmolecule";
import "custom-bs";
// your sass entry point
import "./scss/main.scss";

Alternatively you can also import the files in your sass.

@import "cssmolecule/main.scss";
@import "custom-bs/scss/bootstrap.scss";
  • use it like this
// include what you want you want from the framework
// reboot/normalize
@include reboot;
// utilities
@include api;
// forms
@include forms;
// buttons
@include buttons;
.form {
  // you can use extend, apply or class
  @include extend("form-inline py-3");
  // your custom styles

  input,
  textarea {
    @include extend("form-control my-2 px-4");
  }
  button {
    @include extend("btn btn-primary w-100");
    // customize without using !important
    background-color: red;
  }
}
// to extend a class

.form-2 {
  @include extend("form", ".");
}

Youtube Video

A youtube video explaining how to use it

The Easiest Way Customize BootstrapCss Based Styles Without !important