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.
This is the main less file. This file imports several other less files. The file does not have any code, though.
This less file contains style for form layout, input types.
This file keeps CSS code which is reusable.
This Less file contains CSS code for repeatable user interface elements which may not be covered in base style placed under scaffolding Less file.
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.
This file keeps the base style required for creating Grid System, Structural Layout, Page Templates.
This Less file contains styles for creating Tables.
Look for typography related styles under this file. Styles for Headings, paragraphs, lists, code etc. are placed here.
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" />
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
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
- Weekly Trends
- Java Basic Programming Exercises
- SQL Subqueries
- Adventureworks Database Exercises
- C# Sharp Basic Exercises
- SQL COUNT() with distinct
- Java Collection Exercises
- SQL COUNT() function
- SQL Inner Join
- Python Tutorial
- Python Array Exercises
- SQL Cross Join
- C# Sharp Array Exercises
We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook