Step by Step Guide on Using LESS with Bootstrap

Step by Step Guide on Using LESS with Bootstrap

‘Bootstrap’ or ‘Twitter Bootstrap’ from Twitter is very common word among web designers, html5 developers, or UI developers because in current scenario every company needs a website that fits on all the devices, platforms, and screens perfectly so that they can capture maximum business through their websites. In result Twitter launched an easy to implement baselines for web designers and the name of that is ‘Bootstrap’. Bootstrap can be used to create small level to advanced level websites and web applications very well.

Who can read this article?

This article is specially focused on ‘Compiling LESS in Bootstrap’ so I would recommend this to be read by those who have either knowledge of Bootstrap folder structure or working experience in it. Although I have explained it in very easy steps so I a novice can also read it.

What I will not cover in it?

I will not talk about the following:

  • How to use Bootstrap to create a website?
  • How to use LESS?

What languages are working behind the Bootstrap to run it?

Seriously there is no special or new technology or language is used in Bootstrap, it uses all those languages which web designers were using from several years and i.e. HTML5, CSS3, JavaScript, jQuery, and CSS preprocessors such as LESS and SASS.

Let me explain the role of all the above contents in Bootstrap in brief:

1. HTML5

It handles data structure as you know

2. CSS3

It maintains presentation of the data inside the structure

3. JavaScript and jQuery

Manage behaviors, logics, and help in making html very dynamic

4. CSS Preprocessors (LESS and SASS)

These are one of the most important elements of Bootstrap. You can call Dynamic CSS too them because you can maintain your CSS or styles dynamically just like variables in JavaScript. Please wait wait wait I will tell you in detail.

What is LESS?

If you want a CSS that is completely maintainable, reusable, flexible, and modular then think of LESS. LESS is a CSS preprocessor; meaning you can now use variables, mixins, parameters, functions to create your CSS and after that you just need to compile your LESS and get the CSS. Isn’t it interesting?

I would refer you to click on the next link to know about LESS in detail.

How to compile LESS?

As I stated above that we just need to compile our LESS to get the CSS meaning we need a compiler for that. There are many compilers are available on board and you can find them on Google too yet I want to tell about my preferred compiler. You can download Prepros compiler by clicking the previous link and install it. It is very good and easy to use compiler. It can compile LESS, SASS, Compass, Stylus, Jade and much more.

How to use Less with Bootstrap?

If you have used Bootstrap earlier than you just need to copy the less folder from the downloaded source code folder and paste in your site folder where your website files and folder exist. But if you are new to the Bootstrap then please follow the following steps:

1. Download the ‘Bootstrap Source’ code.

2. Extract and open downloaded folder.

3. Copy the less folder from here and paste inside the dist folder

4. Now copy the dist folder and put it anywhere and you can rename this folder to an identical name too.

5. Now create an index.html page and paste the following code please.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
<body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

6. Now open the Prepros that you installed earlier and drag your dist folder or a folder in which you pasted the less folder.

7. You will see something like this in your Prepros application. You can notice a LESS folder along with other Bootstrap folders and files. (I didn’t create index.html file so plz manage)

8. Now click on bootstrap.less file inside the less folder to set the compile path so that after making changes in any of the less files our bootstrap.css or bootstrap.min.css can get updates.

9. Now the most important point needs to be done. Just click on the right hand side to accomplish it you can see the red marked area.

10. Now change and save your LESS file and then open your index.html file in a browser you will notice changes those you made in your less files.

I am sure it will make your workflow very easy and you can become a master of Bootstrap using LESS. If you have any doubt or you are looking for advanced training in Bootstrap, please contact us or leave a comment.

Leave a Reply

You must be logged in to post a comment.

Copy link