bootstrap-plus

A bootstrap extension.

Getting Started 🚀

CDN

Just include the source script in your HTML code

<script src="https://bootstrap-plus.netlify.app/lib/bootstrapplus.js"></script>

NPM

Install the npm package

> npm i @bootstrap-plus/bootstrap-plus

Import the package in your App.js

import bsp from '@bootstrap-plus/bootstrap-plus';

Usage

Alias

Alias allows you to wrap all your bootstrap classNames in your one single className. #DRY

window.onload = function() {
   bootstrapplus.alias({
      "common-name": "name1 name2 name3 name4 ..."
   });
}

Example

window.onload = function() {
   bootstrapplus.alias({
      "mybtns": "btn btn-sm btn-primary rounded-0"
   });
}

<button class="mybtns">Button 1</button>
<button class="mybtns">Button 2</button>
<button class="mybtns">Button 3</button>

Swatch

Define your own colour swatch for primary, secondary, success, info, warning, danger.

// Defaults
window.onload = function() {
   bootstrapplus.swatch({
      "primary": "#007bff",
      "secondary": "#6c757d",
      "success": "#28a745",
      "info": "#17a2b8",
      "warning": "#ffc107",
      "danger": "#dc3545"
   });
}

Example

// Changing the primary and secondary swatch
window.onload = function() {
   bootstrapplus.swatch({
      "primary": "#7e3c06",
      "secondary": "#c48b59"
   });
}

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change

Roadmap

Our next release would be featuring themes. 🤞

License

MIT

Homepage

Homepage