Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
27th April 2013

Customising the Bootstrap framework

Bootstrap is, if not one of, the most popular responsive frameworks available today. Here we show you how to customise the framework to create a bespoke responsive site.

Customising the Bootstrap framework

The rise of Bootstrap, or as it was formerly known, Twitter Bootstrap, has been phenomenal. In case you are not aware, Bootstrap is a responsive framework created by two Twitter employees so that they didn’t have to start from scratch when starting web projects. The problem is, there are many people using it while not really having the understanding that it is a starting point for projects, so we have many sites with a Bootstrap look!

Bootstrap is built on LESS, so it can be customised using that, but there are plenty of people who just want to get on to using it and not bother with LESS or having to compile via Node and command line. There is a customise page on the Bootstrap site that enables a unique look to be created, but if you change all the colours, there’s no way to save that style – so if you want to download a newer version of Bootstrap at some point in the future, you will lose that unique look you have crafted. The acceptable way to create a unique look is to download the base version of Bootstrap, and then modify the features in a new CSS file, which is what we’ll be doing.

DOWNLOAD TUTORIAL FILES

Setting up

Customising the Bootstrap framework
Copy the start folder from the resource disc onto your desktop and open ‘index.html’ in a code editor such as Dreamweaver. In the head section add the following links that provide the css for Bootstrap, link to a custom font and our own style sheet that will give us the unique look we want.

001 <link href=”css/Bootstrap.min.css”     rel=”stylesheet”>
002 <link href=”css/Bootstrap-responsive.min.    css” rel=”stylesheet”>
003 <link href=’http://fonts.googleapis.com/    css?family=Quando’ rel=’stylesheet’ type=’text/    css’>
004 <link href=’css/mystyle.css’         rel=’stylesheet’ type=’text/css’>

Link to the JavaScript

The next part is to link up the JavaScript. Scroll to the bottom of the document and there will be some code inside <script> tags that power the Carousel. Just above those lines add the code shown below that links to the jQuery library and the Bootstrap library.

001 <script src=”https://ajax.googleapis.com/    ajax/libs/jquery/1.8.3/jquery.min.js”></script> 002 <script src=”js/Bootstrap.min.js”></script>

Open the CSS document

Now we are ready to start adding our content, so open the file ‘mystyle.css’ – there is already some code in there, but add the new code at the top. We will change the font and background colour slightly, which we will do in the body. Next we change the typeface for the branding and h1 and h2 of the site to our custom font from Google Web Fonts.

001 body {
002 color: #5a5a5a;
003 background-color:#fff;
004 }
005 .brand, h1, h2{
006         font-family: ‘Quando’, serif;
007 }

Branding image problems

One of the major problems with the site design is that the branding image is too large for the header and navigation section. In the code below we reduce the size of this. We also start to give our navigation a unique highlight colour to move away from the traditional Bootstrap look.

001 .myImg{
002         width: 35px;
003         height: auto;
004 }
005 a {color: #f5850c;}
006 a:hover {color: #960;}  

Unique navigation

Nothing says Bootstrap quite like the navigation bar, so let’s start giving this a completely new look. This piece of code will give the drop menu an orange background when it is selected. Add the following code to the section of the stylesheet that is commented with Customise the navbar.

001 .navbar .nav li.dropdown.open > .dropdown- toggle,
002 .navbar .nav li.dropdown.active >     .dropdown-toggle,
003 .navbar .nav li.dropdown.open.active >     .dropdown-toggle {
004 color: #fff;
005 background-color: #f5850c;
006 }

Drop down highlights

If you move your mouse over the drop menu you will see that the background here is still the default blue, so we’ll change that by adding the next section of the CSS that changes the highlight colour to orange. We do this by overwriting the gradients of the original.

001 .dropdown-menu li > a:hover,
002 .dropdown-menu li > a:focus,.dropdown-submenu:hover > a {
003 color: #ffffff;
004 text-decoration: none;
005 background-color: #f5850c;
006 background-image: none;

Finish the drop down

The remaining code that we add here ensures that we cover every browser for the gradient background images. Because the original CSS file from Bootstrap has the background-image listed for each one, we have to set it back to none. Hopefully, one day, we might be able to get rid of the multiple prefixes.

001 background-image: none;
002 background-image: none;
003 background-image: none;
004 background-image: none;
005 background-repeat: no-repeat;
006 filter: none;

Move the navigation down

We want the navigation bar moving down and sitting in the white space at the top of the document a little better than it currently does. The next section of code moves this down, but the bar still has the default gradient that makes it look so obviously like a Bootstrap-based document. We will sort the gradient out in the next step.

001 .navbar-wrapper {
002 position: absolute;
003 top: 0;
004 left: 0;
005 right: 0;
006 z-index: 10;
007 padding-top: 20px;
008 margin-bottom: -90px; 
009 background-color: #FFF;
010 }

Remove the gradients

Now we’ll overwrite the gradient in the navigation bar, so we’ll do that by overwriting the default values of the nav bar with just white as the background colour. As stated earlier, the only reason this code is so large is because there are so many different browser prefixes required for this to work.

001 .navbar .navbar-inner {
002 border: 0;
003 background-image: none;
004 background-image: none;
005 background-image: none;
006 background-image: none;
007 background-image: none;

Finish the nav bar

We also remove the drop shadow that is a very default look of the Bootstrap theme. It’s probably worth checking out at this stage how the changes look. Save the file and load the page in your web browser. A few simple modifications of the base Bootstrap theme are already beginning to give us a unique look.

001 background-image: none;
002      -moz-box-shadow: none;
box-shadow: none;
004 filter: none;
005 }

Focus colour change

The current page still has the highlight style that has the default grey background. We’ll change that by removing the inner shadow and changing the hover and focus colour to the orange that we have used elsewhere in the design of our navigation. Save the page now and we are really moving away from the default look of the standard theme.

001 .navbar .nav > .active > a,
002 .navbar .nav > .active > a:hover,
003 .navbar .nav > .active > a:focus {
004 color: #f5850c;
005 text-decoration: none;
006 background-color: #ffffff;
007 -webkit-box-shadow: none;
008 -moz-box-shadow: none;
009 box-shadow: none;

Starting the Carousel

One of the main problems you will notice as you look at the page is that the Carousel isn’t quite big enough to deal with our images or the content inside of each of the slides. Add the code below to the CSS after the comment Carousel base class. Save this and give your browser a refresh to see the changes made.

001 .Carousel .item {
002 height: 550px;

Controlling the Carousel

Because we’ve made the Carousel larger the controls need to be moved down to a more central position because they are too close to the top at present. We add the following CSS rule to keep everything the same but just move the controls down by 60px to sort out the problem.

001 timeline.timeline.date.push(tweet); } 
002 deferred.resolve();

Highlighting the three images

The three images immediately below the Carousel are going to be given greater emphasis now. We will do this by adding two background images, which is a CSS3 feature. The first will give us a pattern while the second will be a gradient. This will help to define this section.

001 .hilite-wrapper{
002 background-image: url(../img/drop.png), url(../img/diamond_upholstery.png);
003 background-position: left top, left top;
004 background-repeat: repeat-x, repeat;
005 padding: 50px 10px 80px 10px;
006 border-top-width: 1px;
007 border-top-style: solid;
008 border-top-color: #ccc;


Centre the heading and image

The section is nicely highlighted with the background, but we also want to centre both the image and heading in each column. We could always just centre everything in the column, but centred body text is slightly harder to read for users’ eyes owing to the ragged edge on the left. This code will just centre the heading and image.

001 .hilite h2 {
002 font-weight: normal;
003 text-align: centre;
004 }
005 .hilite img{
006 display: block;
007 margin: 0 auto;
008 }

Responsive Carousel

If we change the view of our design so that we are at a tablet-sized display, you will see that the Carousel has a large section of white underneath it. To fix this, we’ll change the height slightly and some of the positioning. Add the following code inside the @media (max-width: 979px) { section of code.

001.Carousel .item {
002 height: 500px;
003 }
004 .Carousel img {
005 top: 100px;
006 width: auto;
007 }
008.Carousel-caption {
009 padding: 0 70px;
010 }

Phone-sized fixes

We just need to add some other fixes now to the design when we are at the phone size. Change your web browser viewport to a phone-sized display and you will see there are a few problems. Add the following code inside the @media (max-width: 767px) { section of code. This fixes the margins of the Carousel.

001 .Carousel {
002 margin-left: -20px;
003 margin-right: -20px;
004 }

Phone Carousel

Despite the extra width to the Carousel there are still some problems. Lets reduce the size of the Carousel height and then set the width to be automatically sized for the image. Add the following code immediately under the last. This helps the image appear much better. Next, to sort out the text.

001 .Carousel .item {
002 height: 300px;
003 }
004 .Carousel img {
005 width: auto;
006 }

Change the caption

With the addition of the following code we can see much more of the caption as we’ve reduced our width and moved the text up slightly. Despite these changes for the better the text is just too large and there is far too much of it, so let’s consider how we can clear that up.

001 .Carousel-caption {
002 width: 65%;
003 margin-top: 120px;
004 }

Caption fixes

We’ll reduce the size of the caption text and remove the lead text that is immediately under the caption heading. Save this and check out the changes in the document. Now you should be able to read the heading much more clearly, especially without the clutter of the other text.

001 .Carousel-caption h1 {
002 font-size: 25px;
003 }
004 .Carousel-caption .lead {
005 display: none; 
006 }

Extend to the edges

The highlight wrapper code is used to highlight the three images in the footer section of the site. We’ll widen those sections to take advantage of the full width of the display in the smaller device by extending the margins, as the base class for Bootstrap brings the margins in by 20px.

001 .hilite-wrapper{
002 margin-left: -20px;
003 margin-right: -20px;
004 }

Final fix

Customising the Bootstrap framework
For the last part, we will add a little more space to each entry in the highlight section and reduce the size of the typography further down the page. With this in place, save your file and you should see a fully responsive Bootstrap site that starts to move away from the default look and feel of the template.

001.hilite .span4 + .span4 {
002 margin-top: 40px;
003 }
004.featurette-heading {
005 font-size: 25px;
006 } 

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Kenny Lee

      Code in ‘Controlling the Carousel’ is wrong.

      It’s not…

      001 timeline.timeline.date.push(tweet); } 
      002 deferred.resolve();

      it should be…
      .carousel-control {
      margin.top: 60px;
      }

      I found this error in your magazine first.