Professional looking single page website using Twitter Bootstrap

Twitter Bootstrap is front-end framework which can be used to create mockups or a small website. To customize and create a quick single page website you need to possess following skills.

  • HTML, CSS, JavaScript
  • Photoshop
  • Less CSS preprocessor.
  • NodeJs & Grunt

Website requirements Wire-framing

  • So we want to use twitter bootstrap existing template and modify it.
  • Each page will be full height page, that fits completely into view port.
  • Use animating effect while clicking navbar link and reach to the target section on the page.
  • Make top navigation bar fixed.
  • Use scroll spy that indicate current page on fix navigation bar.
  • Customize native bootstrap theme using grunt and less with our requirements.

Quickly customizing Twitter Bootstrap

  • Download and install nodejs.
  • Once nodejs is installed – install grunt (javascript task runner).
    npm install -g grunt-cli
  • Download twitter bootstrap source archive (not dist zip)

Testing Your Setup

  • Open command line and navigate to extracted bootstrap source directory.
  • Run command : grunt
npm install


If every thing runs fine, you are not ready to create website. Now navigate and open \examples\carousel\index.html in your browser. This page will look like this.

Twitter Bootstrap customization.

Customizing look at feel of navbar is easy. It’s quickly done using less-css and grunt.  First, open /less/variables.less

customizing background color and font.

find // Scaffolding and set your colors, I set here black color.

// Scaffolding
// -------------------------

@body-bg:               #1E1E1E;
@text-color:            #eee;

Now run grunt command and refresh the page.

customizing top navbar

and find // Navbar section. See the variables and customize them.

// Navbar
// -------------------------

@navbar-height:                    30px;
@navbar-default-bg:                #FDD922;
@navbar-default-link-active-color:         #fff;
@navbar-default-link-active-bg:            #156989;

I changed default navbar height from 50px to 30px and default background color to yellow (#FDD922).

Now run grunt command and refresh the page.

Changing Button colors

find line // Buttons and change variables below as per your requirements.

// Buttons
// -------------------------

@btn-font-weight:                normal;

@btn-default-color:              #fff;
@btn-default-bg:                 #1A84AC;
@btn-default-border:             #17779B;

JavaScript Customization

Making each page section full height of viewport

Assign class=”fullsize” to each section and then call below code using jQuery.

<div id="pricing" class="fullsize">
      <div class="row">
#myCarousel-container {
margin:0 auto;

#myCarousel {
margin:0 auto 50px;
$('#top_nav a').on('click', function (event) {
    var target = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 600);

 Making bootstrap navbar to use scrollspy feature.

<body data-spy="scroll" data-target="#navbar-example">
$('body').scrollspy({ target: '#navbar-example' })

Final outcome and making single page website live.

  • Run grunt command to save above changes
  • Upload your index.html file to your web-server.
  • upload contents of /dist directory to doc-root of your web-server. (Note:- css, js and fonts directory)
  • Change the path of bootstrap js and css as follow
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/bootstrap.min.js"></script>
  • Navigate your site and test it. Check my final outcome
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post

Object doesn’t support property or method ‘indexOf’ in IE 8 – Fix

Next Post

jQuery toArray() function vs pure javascript code example