Twitter Bootstrap with Less css

Less is a CSS preprocessor which makes CSS dynamic. Twitter Bootstrap, on the other hand, is a toolkit to develop web apps and sites fast. In this document, we have discussed using Twitter Bootstrap with Less CSS. This way you can use Bootstrap’s Less variables, mixins, and nesting in CSS.

Obtain Twitter Bootstrap and Less CSS

You may obtain Twitter Boot Strap from GitHUB and Less CSS from lesscss.org.

What is included

Once you downloaded the Twitter Bootstrap, unzip the file and all the files will be extracted to the desired folder. Less components of Bootstrap are placed under 'lib' directory. As of version Bootstrap v1.4.0, there are nine less files. We will see what these files contain.

bootstrap.less

This is the main less file. This file imports several other less files. The file does not have any code, though.

forms.less

This less file contains style for form layout, input types.

mixins.less

This file keeps CSS code which is reusable.

patterns.less

This Less file contains CSS code for repeatable user interface elements which may not be covered in base style placed under scaffolding Less file.

reset.less

This Less file contains CSS resets. This is an update of the Eric Meyer's CSS reset. Resets of some of the HTML elements like dfn, samp etc are exempted.

scaffolding.less

This file keeps the base style required for creating Grid System, Structural Layout, Page Templates.

tables.less

This Less file contains styles for creating Tables.

type.less

Look for typography related styles under this file. Styles for Headings, paragraphs, lists, code etc. are placed here.

variables.less

This Less file contains variables to customize look and feel of Bootstrap.

How to use

Include following in your HTML page to use it:

<link rel="stylesheet/less" href="lib/bootstrap.less" media="all" />

<script src="js/less-1.1.5.min.js"></script>

Note that, less-1.1.5.min.js is not present within js folder out of the box. You have download and place it under js folder explicitly.

How to compile

With JavaScript

Simple include the less js file (as shown under How to use section) and reload your page. js file compiles the less.

From command line

If you have Less Command Line installed, run the following command to compile :

$ lessc ./lib/bootstrap.less > bootstrap.css

You may use --compress command if you want a compressed compilation.

Node with makefile

First install the Less command line by running the following command :

$ npm install lessc

Then run "make" from the root of your bootstrap directory.

You may use "make watch" command if you have "watch" installed. If done so, every time you edit a file under lib folder, bootstrap is automatically rebuilt.

Less Mac app

Though unofficial, there is a less mac application available for compiling

You may download all the HTML, CSS, JS and image files used in our tutorials here.

Previous: How to center a div using Twitter Bootstrap 3
Next: Variations using Bootstrap Material Design