bootstrap-scss-multi-dir

Welcome to Bootstrap multi direction

this npm package is build for bootstrap 4 scss

File Structure of the package

| bootstrap-multi-direction
|   - dist/
|       - css/
|           -bootstrap.css
|           -bootstrap.min.css
|           -bootstrap.min.css.map
|           -bootstrap-rtl.css
|           -bootstrap-rtl.min.css.map
|   - scss/
|       - mixins/
|       - utilities/
|       - ...
|       - ...
|       - bootstrap.scss
|       - bootstrap-rtl.scss
|   - gulpfile.js
|   - .gitignore
|   - _config.yml
|   - gulpfile.js
|   - LICENSE
|   - package.json
|   - README.md
|   - yarn.lock

Install

all You need to do is to run one ot these commands in your terminal in the project root

• Using NPM npm i bootstrap-multi-direction -save
• Using Yarn yarn add bootstrap-multi-direction

Usage

IF you need to use the hole file

Use any of these two files with LTR direction sites

• un-minified version @import '~bootstrap-multi-direction/dist/bootstrap.css'
• minified version @import '~bootstrap-multi-direction/dist/bootstrap.min.css'

Use any of these two files with RTL direction sites

• un-minified version @import '~bootstrap-multi-direction/dist/bootstrap-rtl.css'
• minified version @import '~bootstrap-multi-direction/dist/bootstrap-rtl.min.css'

IF you need to use only some components

all you have to do is just import the component in your style.scss

style.scss

@import '~bootstrap-multi-direction/scss/alert.scss'

@import '~bootstrap-multi-direction/scss/card.scss'

@import '~bootstrap-multi-direction/scss/grid.scss'

if you need to make an rtl file just in your

style-rtl.scss

$direction:rtl;
@import 'style.scss';

IF you need to use the same dir variable as bootstrap uses

• Example

  div{
  float: $default;
  } 
  //this will be in LTR 
  div{
  float: left;
  } 
  //this will be in RTL
  div{
  float: right;
  } 
  

  div{
  float: $opposite;
  } 
  //this will be in LTR 
  div{
  float: right;
  } 
  //this will be in RTL
  div{
  float: left;
  } 
  

  IF You need a build tool with boilerplate for bootstrap4 font awesome 5 feel free to visit this link you will see more in here

  bootstrap4-playground