Free Advanced Web Design Tutorials

Working in Bootstrap with LESS

In this section, we are going to create Simple Bootstrap Template using less and bootstrap elements like below.

Bootstrap with LESS

Step 1: Click source code in this link for downloading bootstrap with less.

Step 2: Download less.js file from this link and paste into less folder of download package.

Step 3: Create empty html file and add title, javascript files and bootstrap less files like below.

<!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">
    <meta name="description" content="">
    <meta name="author" content="">
	
    <title>Grid Template for Bootstrap</title>

    <!-- Bootstrap core LESS -->
    <link rel="stylesheet/less" type="text/css" href="bootstrap.less" />
	<script src="less.js" type="text/javascript"></script>
    </head>

  <body>

  <script src="js/vendor/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script> 	
  </body>
</html>

Step 4: Add Inverse navbar using below code.

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Website Name</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Link 1</a></li>
        <li class="active"><a href="#">Link 2</a></li>
		<li class="active"><a href="#">Link 3</a></li>
		<li class="active"><a href="#">Link 4</a></li>
	  </ul>
    </div>
   </div>  
  </nav>

Step 5: In this step, we are going to add Carrousal element using below code.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/750x300&amp;text=First Image" alt="...">
      <div class="carousel-caption">
        Image 1
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/750x300&amp;text=Second Image" alt="...">
      <div class="carousel-caption">
        Image 2
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/750x300&amp;text=Third Image" alt="...">
      <div class="carousel-caption">
        Image 3
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Step 6: Finlly we add footer using below code.

 <hr />
 <!--Footer-->
 <footer>
	 <div class="row">
		<div class="large-6 columns" style="float:left;">
			 <p>&copy; Copyright no one at all. Go to town.</p>
	    </div>
		<div class="large-6 columns">
			 <ul class="nav nav-pills" style="float:right;">
		 	 <li><a href="#">Link 1</a></li>
			 <li><a href="#">Link 2</a></li>
			 <li><a href="#">Link 3</a></li>
			 <li><a href="#">Link 4</a></li>
		 </ul>
    </div>
  </div>
</footer>

Save the file and open it in your favorite browser, the web page now look like,

Bootstrap with LESS