Bootstrap Less

This is a Less port of Bootstrap v4, since Bootstrap now uses Sass for CSS preprocessing. This is purely a Sass→Less port: it doesn’t modify or build on the default Bootstrap styles in any way.

The code is currently aligned with Bootstrap v4.6.0. It requires Less v3.9.0 or above to compile. Note: For Less versions below v3.9.0, you can use v1.0.0 of the port, which is compatible with Less >=2.6.0.

Getting Started

Options for installing Bootstrap Less in your project (note that Less v3.9.0 or above is required):

• Install with npm: npm install bootstrap-less-port
• Install with yarn: yarn add bootstrap-less-port
• Install with bower (not recommended): bower install bootstrap-less-port
• Clone the repo: git clone https://github.com/seanCodes/bootstrap-less-port.git
• Download the latest release

Note that this code is only necessary if you want to use Less in your project and want to import and/or customize Bootstrap’s variables, mixins or styles. If you plan to use the CSS framework wholesale, you can get the compiled CSS files from the main Bootstrap repo, so there’s no need for this code.

Usage

To use these files in your project, simply import them into your main Less file. For example, if you’ve installed Bootstrap Less using npm or Yarn, you might have a file structure that looks like this:

your-project/
 ├─ less/
 │   └─ custom.less
 └─ node_modules/
     └─ bootstrap-less-port/
         └─ less/
             └─ ...

In this case, you could then import what you need into custom.less using module-relative paths:

// custom.less


// Required Files
@import "bootstrap-less-port/less/_functions";
@import "bootstrap-less-port/less/_variables";
@import "bootstrap-less-port/less/_mixins";

// Optional Files
@import "bootstrap-less-port/less/_reboot";
@import "bootstrap-less-port/less/_utilities";
@import "bootstrap-less-port/less/_type";
@import "bootstrap-less-port/less/_grid";
...

This approach is recommended since it will result in a smaller CSS file by omitting the styles you don’t need. (Just be aware that some files are dependent on others.)

Alternatively, you can get the entire framework by simply importing the package as a whole. (Or, if not using a package manager, importing bootstrap-less-port/less/bootstrap instead.)

// custom.less


@import "bootstrap-less-port";

Theming

The recommended way of customizing Bootstrap is to override the default variables. To override a variable, copy and paste it from _variables.less into your custom Less file and change its value.

// custom.less


@import "bootstrap-less-port";

// Variable Overrides
@body-bg: @black;
@body-color: @white;

Variable overrides can be included in any file as long as they are imported after the Bootstrap Less files; Less will use the last value assigned to a variable.

For a more in-depth guide to theming, see the Bootstrap docs.

JavaScript

This repo does not include the JavaScript component files from Bootstrap v4. If you’d like to use them the easiest way to do so is via Bootstrap CDN. Otherwise, you can get the files from the main Bootstrap repo by downloading it or installing it using a package manager.

Documentation

See the Bootstrap v4 docs for documentation.

Notes

This port attempts to mirror the source Sass files as closely as possible in order to make updating it straight-forward. This means that variable/mixin naming, custom functions and most code style match the original project with a few notable exceptions:

1. Mixins Mixins work the same as they did in previous Bootstrap versions with the exception that they now use ID selectors instead of class selectors (e.g. .border-radius() is now #border-radius()). This was done to avoid potential collisions with the user’s class names.

   Variables within mixins are named the same as their Sass counterparts whenever possible, in order to make comparison with the Sass version easier.

2. Custom functions Sass allows for custom functions to be written in the sass files themselves, which isn’t possible in Less. All custom functions have been replaced with Less plugins that add equivalent functions to the language. These plugins are located in less/plugins/ as JavaScript files.

   Plugins have also been added to duplicate some native Sass functions for simplicity.

   Note: The plugins are included using the @plugin at-rule instead of as arguments to the lessc CLI. This was intentionally done since most Less GUI compilers don’t allow you to customize the command-line arguments.

3. Loops Where possible, Sass @each loops have been replaced with the Less each() function. Sass @for directives have been replaced by each() together with the range() function.

   In order to make catching bugs easier, the Sass versions of most for/each loops have been kept in the code, commented, above the Less versions.

4. Placeholder selectors Since Less has no equivalent for Sass’ placeholder selectors, regular selectors are used instead. In order to prevent name clashes with selectors in users’ code, element selectors prefixed with an escaped % are used instead (for example \%grid-column).

5. Code style While the code style is mostly identical to that used by Bootstrap, a few changes have been made:

   • Tabs are used instead of spaces
   • Leading zeros have been added to decimal numbers for readability
   • Spaces have been added between the values of comma-separated lists, also for readability

Contributing

For bugs, feature-requests, or issues with the compiled CSS, please create an issue in the main Bootstrap repo.

For errors or bugs related to the ported code, please submit a pull request or create an issue.

Credits and License

Bootstrap was created by Mark Otto and Jacob Thornton.

The original code copyright 2011-2019 the Bootstrap Authors and Twitter, Inc.

This port and the original code are released under the MIT License.

Bootstrap Less Port Changelog

All notable changes will be documented in this file.

The format is based on Keep a Changelog and this project adheres to Semantic Versioning.

2.5.1 – 2021-04-17

Revert the package.json engines.node version bump from 2.5.0 to prevent breaking builds. (It was intended to reflect the node version used for development, but the engines field is meant to describe the versions required to use the dependency – not develop it.)

Fixed

• #29 – Build fails after node engine version bump in package.json

2.5.0 – 2021-02-27

Aligned code with Bootstrap v4.6.0. See the Bootstrap release notes for details.

2.4.3 – 2021-02-27

Aligned code with Bootstrap v4.5.3. See the Bootstrap release notes for details.

2.4.2 – 2021-02-27

Aligned code with Bootstrap v4.5.2. See the Bootstrap release notes for details.

2.4.1 – 2021-02-27

Aligned code with Bootstrap v4.5.1. See the Bootstrap release notes for details.

2.4.0 – 2021-02-27

Aligned code with Bootstrap v4.5.0. See the Bootstrap release notes for details.

Changed

• Updated styles/plugins to match Bootstrap v4.5.0. See the blog post for highlights.
• Dev: Updated error handling in test scripts
• Dev: Made it possible to run some test scripts from the command line directly (with npm script for some)
• Dev: Updated to node v15 (used only for development) from v6
• Dev: Removed --experimental-modules flags from commands since it’s no longer required with node 15
• Dev: Updated package-lock.json to the v2 format used by npm 7
• Dev: Updated dependencies and fixed npm audit security issues
  • postcss-cli (7.1.0 → 7.1.2)
  • eslint 6.8.0 → 7.20.0
  • postcss-cli 6.1.2 → 6.1.3
  • node-stream-zip (1.9.1 → 1.13.2)

2.3.1 – 2021-02-27

Aligned code with Bootstrap v4.4.1. See the Bootstrap release notes for details.

Changed

• Updated styles/plugins to match Bootstrap v4.4.1. See the blog post for highlights.
• Dev: Updated dependencies and fixed npm audit security issues
  • autoprefixer 9.7.4 → 9.7.6

2.3.0 – 2020-04-07

Aligned code with Bootstrap v4.4.0. See the Bootstrap release notes for details.

Added

• As part of the updates for Bootstrap v4.4.0, three new functions have been added as Less plugins:
  • escape-svg() for escaping the SVG data URIs of the icons used in form validation states, custom form inputs, carousel arrows, etc.
  • add() and subtract() for outputting addition and subtraction as calc() statements (instead of actually doing the math). These functions only accept two parameters but they can be nested when more are needed (pass false as a third param to inner calls to output just the math and not the calc() wrapper). When the two values are static and use the same units, their computed value will be output instead.

Changed

• Updated styles/plugins to match Bootstrap v4.4.0. See the blog post for highlights.
• The warn() and error() functions now output relative paths (when possible) for the files they were called from instead of absolute paths. The paths will be relative to the entry-point file. When a file is not in the same path as the entry-point file, the absolute path will still be output.
• The .grid-column class that was previously used in place of the Sass version’s %grid-column placeholder-selector has been changed to \%grid-column instead. This avoids potential conflicts for users who might already be using/want to use the .grid-column class for something else. Using a \% prefix is valid and is much less likely to collide with user selectors. Since placeholder-selectors are much more common as of this version, the \% prefix pattern is now being used anywhere the Sass version uses a placeholder.
• Dev: Updated testing scripts to account for the pseudo placeholder selectors that are now commonly used

2.2.2 – 2020-03-09

This version fixes an issue that caused an error when compiling the project using the default Less options. Previously, Less had to be configured with the math option set to parens, but this requirement wasn’t documented anywhere, which obviously lead to some confusion.

Instead of adding the additional step, the code has been modified to be compatible with the default math: 'always' option. This should make for a smoother experience installing and using the project overall (especially when it’s being compiled using a wrapper around Less, such as less-loader, angular-cli or ember-cli-less).

Note that this change is backwards compatible and everything will continue to work with the stricter math: 'parens' or math: 'parens-division' options.

Changed

• Dev: Updated dependencies and fixed npm audit security issues
  • less 3.9.0 → 3.11.1
  • autoprefixer 9.6.1 → 9.7.4
  • postcss-cli 6.1.3 → 7.1.0
  • eslint 6.1.0 → 6.8.0
  • node-stream-zip 1.8.2 → 1.9.1

Fixed

• #22 – Build fails when using webpack with less-loader

2.2.1 – 2019-07-25

Aligned code with Bootstrap v4.3.1. See the Bootstrap release notes for details.

Note: The only substantial change in this version is the version number. This is a separate release only so that there can be a matching Bootstrap-Less-Port version for each version of Bootstrap 4.

Changed

• Dev: Updated dependencies and fixed npm audit security issues
  • eslint 6.0.1 → 6.1.0
  • postcss-cli 6.1.2 → 6.1.3

2.2.0 – 2019-07-25

Aligned code with Bootstrap v4.3.0. See the Bootstrap release notes for details.

Added

• Added new warn() and error() functions to emulate Sass’ @warn and @error at-rules. These functions are primarily meant to be used by Bootstrap but can be used freely in your code if you find them useful.
• Added a Bower config, for wider package management support. (Note that the Bower team does not recommend using Bower in new projects, so using npm or yarn is preferred.)

Changed

• Updated styles/plugins to match Bootstrap v4.3.0 (see the release notes for details)

Fixed

• #10 – Add bower support
• #16 – Omitting file extensions for @plugin at-rules causes errors when bundling with Parcel

2.1.1 – 2019-07-20

Aligned code with Bootstrap v4.2.1. See the Bootstrap release notes for details.

Note: The only substantial change in this version is the version number. This is a separate release only so that there can be a matching Bootstrap-Less-Port version for each version of Bootstrap 4.

2.1.0 – 2019-07-20

Aligned code with Bootstrap v4.2.0. See the Bootstrap release notes for details.

Added

• Dev: Added testing scripts for comparing the compiled Less CSS to the Sass CSS to ensure they match. Can be used by running npm test <bootstrap_version> on the command line.

Changed

• Updated styles/plugins to match Bootstrap v4.2.0 (see the release notes for details)

2.0.0 – 2019-07-08

Less 3! Bootstrap Less Port now uses Less v3.9.0 and its syntax has been updated to leverage v3 features. Be aware that this should not have a major impact on compiled CSS---only the Less syntax used has been updated.

Note: This is possibly a BREAKING CHANGE. With this version, you will only be able to compile the Less source files with Less v3.9.0 or greater. For most users no code changes will actually be needed, but if you’re using a GUI to compile your Less then you’ll need to make sure your GUI supports Less v3.9.0.

With the update to Less 3, improvements have been made in two key areas:

1. Maps – The map variables used previously (which were actually not maps at all, but nested lists) have been converted to rulesets (which are much more map-like). This means that their properties can now be accessed directly using Less’ property accessor syntax instead of the custom map-get() function. (e.g. @breakpoints[xs] vs map-get(breakpoints, xs))

   Property accessors can also be used to get color values from the color rulesets. However, for feature parity (and to avoid any confusion with the Bootstrap docs), Bootstrap’s custom color functions are still supported and can be used as well.

2. Loops – Previously, recursive mixin loops were used to mimic Sass’ each and for loops. While this worked, it was not ideal and resulted in some verbose code. Now, instead of mixins, Less’ new each() function is used for iteration (in combination with the range() function for lists), whenever possible.

Thanks to these improvements some clunky workarounds used previously were removed, resulting in code that is now much easier to both read and reason about. Special thanks to @calvinjuarez and @matthew-dean for implementing and leading the transition to Less 3!

Added

• Added a new map-keys() function for getting the properties from a ruleset as a list, which can be very helpful when iterating using each() (thanks @calvinjuarez!)

Changed

• Updated Less peer-dependency version from ^2.6.0 to ^3.9.0
• Updated Less syntax to leverage the latest Less features
  • Converted “map” variables (nested lists) to rulesets
  • Switched to using property accessors instead of the custom map-get() function for getting values from map-like variables
  • Switched to each() for iterating instead of mixins (in combination with range() when iterating over lists), where possible
• Dev: Updated the command used in the css-compile npm script to use the --math flag instead of the deprecated --strict-math
• Dev: Updated dependencies and fixed npm audit security issues
  • eslint 4.19.1 → 6.0.1
  • autoprefixer 8.6.5 → 9.6.1
  • postcss-cli 5.0.1 → 6.1.2
  • clean-css-cli 4.1.11 → 4.3.0

Removed

• Removed the custom map-get() plugin function. (The property accessor syntax can now be used instead, as noted above.)

1.0.0 – 2018-01-06

First major release (since everything seems stable at this point).

Added

• Dev: Added a changelog
• Dev: Added Less as a peer dependency in package.json (currently >=2.6.0)

Changed

• Dev: Updated ESLint config to allow syntax up to ES8

0.5.0 – 2018-12-06

Aligned with Bootstrap v4.1.3.

Changed

• Updated styles to match Bootstrap v4.1.3 (see the Bootstrap release notes for details on the CSS changes in this version)

Fixed

• Updated link to Less plugin at-rules in the README

0.4.0 – 2018-12-06

Aligned with Bootstrap v4.1.2.

Changed

• Updated styles to match Bootstrap v4.1.2 (see the Bootstrap release notes for details on the CSS changes in this version)
• Dev: Updated browserslist config to match Bootstrap
• Dev: Updated dependencies and fixed npm audit security issues
  • less 3.0.4 → 3.9.0
  • autoprefixer 8.4.1 → 8.6.5
  • postcss-cli 5.0.0 → 5.0.1

Fixed

• Updated link to Less plugin at-rules in the README

0.3.0 – 2018-05-12

Aligned with Bootstrap v4.1.1.

Note: This version bumps the Less version used for development to v3. It also includes revisions to the code to make it compatible with v3. However, the syntax used is backwards compatible with Less v2, and can be still be compiled with >= v2.7.3.

Changed

• Updated styles to match Bootstrap v4.1.1 (see the Bootstrap release notes for details on the CSS changes in this version)
• Updated usages of calc() to be compatible with Less v3
• Dev: Updated dependencies and fixed npm audit security issues
  • less 2.7.3 → 3.0.4
  • autoprefixer 8.1.0 → 8.4.1

Fixed

• #3 – Broken #media-breakpoint-only mixin

0.2.0 – 2018-04-17

Aligned with Bootstrap v4.1.0.

Added

• Dev: ESLint is now used for enforcing JavaScript style in the Less plugins
• Dev: Added npm script for linting/compiling

Changed

• Updated styles to match Bootstrap v4.1.0 (see the Bootstrap release notes for details on the CSS changes in this version)
• Dev: Updated browserslist config to match Bootstrap

Fixed

• #1 – Clarify theming usage in README

0.1.3 – 2018-01-26

Changed

• Ensured line breaks are preserved when minifying (for smaller diffs of minified files)

0.1.2 – 2018-01-26

Created a new version for npm. (Nothing changed in this version.)

0.1.1 – 2018-01-26

Note: This version is deprecated in npm! Use version 0.1.2 instead.

Fixed

• All expressions using math are now compatible with Less’ strict-math compiler option.

0.1.0 – 2018-01-20

Aligned with Bootstrap v4.0.0.

Changed

• Updated styles to match Bootstrap v4.0.0 (see the Bootstrap release notes for details on the CSS changes in this version)
• Fixed typos in the README and removed disclaimer about Bootstrap being in beta

0.0.6 – 2018-01-15

Aligned with Bootstrap v4.0.0-beta.3.

Changed

• Updated styles to match Bootstrap v4.0.0-beta.3 (see the Bootstrap release notes for details on the CSS changes in this version

0.0.5 – 2017-11-29

Added

• Included usage instructions in the README

Fixed

• gray() color function now works correctly. (Issue was caused by a bug in the listToMap helper function.)

0.0.4 – 2017-11-17

Changed

• Converted breakpoint mixins to functions (using a Less plugin) so that they can be used in the same way the Sass version uses them

0.0.3 – 2017-11-16

Initial release. (Code aligned with Bootstrap v4.0.0-beta.2.)