How to Create a Simple Marketing Website With Bootstrap

CSS, Javascript, Sandbox, Tutorials 4 responses so far

Twitter Bootstrap is probably the best thing to have happened to web design since the development of HTML5. Originally created by a couple of developers at Twitter (who have since moved out to develop Bootstrap full-time) to streamline and standardize document development, Bootstrap has quickly grown to become one of the best loved development frameworks online. In fact, the team behind Bootstrap estimates that their framework powers nearly 1% websites around the world.

The reasons for this popularity are easy to see. Bootstrap is fast, free, powerful, responsive, and flexible. It can be used to create a landing page as well as a full-fledged e-commerce website. Some of the top startups in the world use Bootstrap.

In this tutorial, we will use Bootstrap to create a simple marketing website. You’ll need some familiarity with HTML and CSS, though by no means do you need to be proficient at them. You’ll also need a text or web editor like Notepad++, Komodo Edit or Adobe Dreamweaver.

Take a look at what we’ll be making here.

You can download the HTML and CSS files here.

Getting Started: Setting Things Up

First things first: grab a copy of Bootstrap v3.0 from GetBootstrap.com:

1. Click on the big ‘Download Bootstrap’ button on the homepage.

Bootstrap frontpage download

2. Extract the contents of the downloaded .zip file (bootstrap-3.0.0) to your desktop.

3. Open the folder you just extract to your desktop. You’ll find a lot of files inside. For now, we only need to use the files in the ‘dist’ folder.

4. Meanwhile, create a new folder on the desktop. Name it ‘Marketing Website’, or anything else you like.

5. Copy the contents of the ‘dist’ folder from the Bootstrap directory into the ‘Marketing Website’ folder.

6. Now take a look inside the ‘dist’ folder. You can safely delete the following files (optional) :

bootstrap.min.css, bootstrap-theme.css, bootstrap-theme.min.css (from ‘css’ folder)
bootstrap.js (from ‘js’ folder)
The entire ‘fonts’ folder.

(Note: bootstrap.min.css is the minified version of the primary Bootstrap CSS file. Since we’re using this in a development and not production environment, we’re using the non-minified file. For production environments, consider using the minified version instead. The same applies to the Bootstrap.min.js file)

7. Now, open your favorite text/web editor and create a new blank file. Name it ‘index.html’ and save it in the main ‘Marketing Website’ folder (make sure that you choose ‘All Files’ in the save dialog box if using Notepad).

8. Create another blank file called ‘bootstrap-custom.css’. Save it in the ‘css’ folder within the ‘Marketing Website’ directory.

The ‘Marketing Website’ folder should now have the following structure:

        Marketing Website
        ---- index.html
        ---- css
             ---- bootstrap-custom.css
             ---- bootstrap.css
        ---- js
             ---- bootstrap.js

That’s it! We now have everything in place to create our very own Bootstrap marketing site!

Creating the HTML

Open the index.html file you just created. Copy-paste the following code into the file:


<!DOCTYPE html>
<html>
<head>
        <title>Marketing Website</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-custom.css" media="screen" />
</head>
<body>
        <!-- Navigation -->
    <div class="container narrow">
            <div class="navbar">
                <a class="navbar-brand" href="index.html">Marketing Website</a>
            <ul class="nav navbar-nav">
                    <li><a href="index.html" class="active">HOME</a></li>
                <li><a href="#">About Us</a></li>
                <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products</a>
                    <ul class="dropdown-menu">
                            <li><a href="#">Service 1</a></li>
                            <li><a href="#">Service 2</a></li>
                            <li><a href="#">Service 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
    <!-- End Navigation -->
    
    <!-- Jumbotron -->
    <div class="container narrow">
            <div class="jumbotron">
                <h1>Big Huge Message</h1>
            <p class="lead">Subheading about your products</p>
        </div>
    </div>
    <!-- End Jumbotron -->
    
    <!-- Features -->
    <div class="container narrow">
            <div class="row marketing">
                <div class="col-lg-4">
                    <h3>Quality Construction</h3>
                <p>We use only the best quality raw materials for constructing our robots</p>
                <p><a href="#" class="btn btn-primary btn-lg orange">Learn More</a></p>
            </div>
            
            <div class="col-lg-4">
                    <h3>Programmable Software</h3>
                <p>Customize your toy robots with our award-winning, integrated programming software</p>
                <p><a href="#" class="btn btn-primary btn-lg orange">Learn More</a></p>
            </div>
        
            <div class="col-lg-4">
                    <h3>Customer Service</h3>
                <p>We take pride in our impeccable customer service.</p>
                <p><a href="#" class="btn btn-primary btn-lg orange">Learn More</a></p>
            </div>
         </div>
         <!-- End Features -->           <!-- Primary Content -->
         <div class="row marketing">
                 <div class="col-lg-12">
            <h2>Features</h2>
            </div>
         </div>
         <div class="row marketing">
            <div class="col-lg-6">
                    <div class="feature-box">
                        <p>Feature 1</p>
                </div>
            </div>
            <div class="col-lg-6">
                    <h4>Headline</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt egestas felis, vitae tempus magna cursus nec. Pellentesque consectetur auctor fringilla. Etiam commodo ligula in elit bibendum pharetra at id tortor. Morbi sapien augue, fermentum non orci nec, dictum cursus dui. Suspendisse sagittis ligula tortor. Sed tincidunt quam velit, id tincidunt dui cursus nec. Quisque vel nibh neque. Sed a diam nec est facilisis commodo. Quisque eu euismod ante, at auctor tellus.  </p>
                  </div>
         </div>
         
         <div class="row marketing">
                 <div class="col-lg-6">
                    <h4>Headline</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt egestas felis, vitae tempus magna cursus nec. Pellentesque consectetur auctor fringilla. Etiam commodo ligula in elit bibendum pharetra at id tortor. Morbi sapien augue, fermentum non orci nec, dictum cursus dui. Suspendisse sagittis ligula tortor. Sed tincidunt quam velit, id tincidunt dui cursus nec. Quisque vel nibh neque. Sed a diam nec est facilisis commodo. Quisque eu euismod ante, at auctor tellus.</p>
            </div>
            <div class="col-lg-6">
                    <div class="feature-box">
                        <p>Feature 2</p>
                </div>
            </div>
         </div>
         
         <div class="row marketing">
                 <div class="col-lg-6">
                    <div class="feature-box">
                        <p>Feature 3</p>
                </div>
            </div>
            <div class="col-lg-6">
                    <h4>Headline # 3</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt egestas felis, vitae tempus magna cursus nec. Pellentesque consectetur auctor fringilla. Etiam commodo ligula in elit bibendum pharetra at id tortor. Morbi sapien augue, fermentum non orci nec, dictum cursus dui. Suspendisse sagittis ligula tortor. Sed tincidunt quam velit, id tincidunt dui cursus nec. Quisque vel nibh neque. Sed a diam nec est facilisis commodo. Quisque eu euismod ante, at auctor tellus.</p>
            </div>
         </div>
    </div>
      
    <!-- End Primary Content-->
     
    <!-- Footer-->
    <div class="container footer">
            <div class="row marketing">
                <div class="col-lg-6">
                    <p>Marketing Website, 2013</p>
            </div>
            <div class="col-lg-6">
                    <div class="pull-right">
                    <p><strong>Ph:</strong>555-555-5555</p>
                <p><strong>Email:</strong>Contact@MarketingWebsite.com</p>
                           </div>
            </div>
        </div>
    </div>
    <!-- End Footer --> 
    <!-- Javascript -->
    <!-- JavaScript plugins (requires jQuery) -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
    <script src="js/respond.js"></script>               
</body>
</html>

Confused? Don’t worry, we’ll take a look at every element in the code to understand how everything works.

Let’s start from the very top:

<head>
        <title>Marketing Website</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-custom.css" media="screen" />
</head>

Here, we’ve linked to the original bootstrap.css file located in the css folder, and our custom css file, called ‘bootstrap-custom.css’. We’ve also used the meta tag ‘viewport’ to help web pages render in mobile devices. You can learn more about the viewport tag here.

Navigation

<!-- Navigation -->
    <div class="container narrow">
            <div class="navbar">
                <a class="navbar-brand" href="index.html">Marketing Website</a>
            <ul class="nav navbar-nav">
                    <li><a href="index.html" class="active">HOME</a></li>
                <li><a href="#">About Us</a></li>
                <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products</a>
                    <ul class="dropdown-menu">
                            <li><a href="#">Service 1</a></li>
                            <li><a href="#">Service 2</a></li>
                            <li><a href="#">Service 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
    <!-- End Navigation -->

This is the HTML for the navigation menu. Here, we’ve used several CSS classes built-into Bootstrap. We’ll cover these briefly below:

<div class="container narrow">

.container is a built in Bootstrap class that’s basically used to center elements on a page. Think of it as the ‘wrapper’ class you generally use while designing web pages. By default, the container is 1170 pixels on a laptop/desktop screen. Here, we’ve added a custom style, ‘narrow’, to change its width and add a left + right border.

<div class="navbar">

.navbar is another built-in Bootstrap class that’s used to create navigation elements. You can learn more about the navbar in Bootstrap documentation here.

<a class="navbar-brand" href="index.html">Marketing Website</a>

.navbar-brand is a CSS class used in Bootstrap to denote the website logo and title.

<ul class="nav navbar-nav">

.nav and .navbar-nav are two built-in CSS classes used to create navigation menus. There are plenty of options to choose from when creating nav menus, as listed here.

<li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products</a>
                    <ul class="dropdown-menu">

Here, we’re using the built-in dropdown Javascript function to create a simple dropdown menu. You can learn more about creating dropdown menus in the Bootstrap documentation.

Jumbotron

<!-- Jumbotron -->
    <div class="container narrow">
            <div class="jumbotron">
                <h1>Big Huge Message</h1>
            <p class="lead">Subheading about your products</p>
        </div>
    </div>
    <!-- End Jumbotron -->

The Jumbotron is a full-width CSS class built into Bootstrap. Use the .jumbotron class to create main marketing messages, big headlines, and more.

We’ve also used a Bootstrap class called .lead to create a marketing message. This class basically creates a paragraph with a large font-size that can be used to highlight any message.

Features Row

<!-- Features -->
    <div class="container narrow">
            <div class="row marketing">
                <div class="col-lg-4">
                    <h3>Quality Construction</h3>
                <p>We use only the best quality raw materials for constructing our robots</p>
                <p><a href="#" class="btn btn-primary btn-lg orange">Learn More</a></p>
            </div>
        …
<!--  End Feautres -->

Here, we’re going to use Bootstrap’s most powerful feature – the flexible grid-system – to create a row of three columns with our custom marketing messages.

Every Bootstrap website is divided into 12 columns. Depending on the size of the screen, Bootstrap can scale up from 1 to 12 columns.

To use the grid system, we call on the in-built class called ‘row’. This class basically tells Bootstrap to create a new row for us.

We can specify the number of columns in the row using the ‘col-lg-X’ class, where X represents a number from 1 to 12. X equals 12 divided by the number of columns you want. Thus, if you want 3 columns, you would use ‘col-lg-4’ (since 12/4 = 3). If you want 2 columns, you would use ‘col-lg-6’ (since 12/6 = 2), ‘col-lg-3’ for 4 columns (12/3 = 4), and so on.

Here, we’ve used a row with a custom class called ‘marketing’. Since we want three columns, we’ve used ‘col-lg-4’ class.

You can learn more about the grid system here.

We’ve also used a button at the bottom of the marketing message. This utilizes a few built-in Bootstrap classes:

  • .btn – A Bootstrap class used to denote that given element is a button.
  • .btn-primary – Bootstrap has several button styles built-in. These include .btn-default, .btn-primary, .btn-warning, .btn-info, .btn-success, .btn-danger.
  • .btn-lg – This refers to a built-in Bootstrap CSS class for button size. You can use .btn-lg, .btn-sm, and .btn-xs for large, small and extra-small buttons.

Additionally, we’ve also added a .orange class for custom styling.

You can learn more about Bootstrap buttons here.

Primary Content

<!-- Primary Content -->
         <div class="row marketing">
                 <div class="col-lg-12">
            <h2>Features</h2>
            </div>
         </div>
         <div class="row marketing">
            <div class="col-lg-6">
                    <div class="feature-box">
                        <p>Feature 1</p>
                </div>
            </div>
            <div class="col-lg-6">
                    <h4>Headline</h4>
                <p>Lorem ipsum dolor sit … at auctor tellus.  </p>
                  </div>
         </div>
        …
<!-- End Primary Content-->

Here, we’ve used a row with a single 12-column wide column (‘col-lg-12’) to hold the content headline. Next, we’ve divided the page into two equal columns by using the ‘col-lg-6’ class. We’ve also used a custom CSS class, ‘feature-box’, to create the grey-rectangle.

Footer

<!-- Footer-->
    <div class="container footer">
            <div class="row marketing">
                <div class="col-lg-6">
                    <p>Marketing Website, 2013</p>
            </div>
            <div class="col-lg-6">
                    <div class="pull-right">
        …
<!-- End Footer -- >

We want the footer to have a different color than the rest of the body, so we’ve used a custom style called .footer on the container. The other thing to note here is the use of the ‘pull-right’ class. This is another built-in Bootstrap class that floats the content to the right. As you can expect, you can also use the ‘pull-left’ class to float content to the left.

The end of the file contains links to a few Javascript files. This includes the Bootstrap.js file, the jQuery plugin library, and the Respond.js jQuery plugin that enables responsive websites on IE8. It’s a good practice to include these files at the bottom of your Bootstrap files just before the </body> tag (you can also include them in the <head> section, though this may affect performance).

That’s it! You have a fully functional Bootstrap marketing website. You can now load it up on your browser and see how it looks…

…which is not exactly good. That’s because we still haven’t created our custom stylesheet.

Making Things Pretty: Creating the Custom Stylesheet

Our custom stylesheet isn’t anything complex. We’ve just used a few custom style elements to position things around and add a dash of color.

Below, we’ll take a look at some of the important styles used in the stylesheet:

.narrow {
        width:960px;
        border-left:1px solid #ddd;
        border-right:1px solid #ddd;
}

A simple custom style that’s added to <div class=”container”> to create a container 960px wide. We’ve also added borders to the left and right.

.navbar {
        padding-top:20px;
        background:#fff;
        color:#333;
        padding-left:5%;
}

We’ve added some padding to the top of the page, given the content a left padding of 5% and changed the default color and background of the navbar.

.jumbotron h1 {
        color:#fff;
        text-align:center;
        text-shadow:2px 2px 2px rgba(0,0,0,0.3);
}

We’ve changed the color of the heading for better contrast on the blue jumbotron. We’ve also added text-shadow effects on both the heading and the p.lead class. We’ve also aligned the text to the center using ‘text-align:center’ property.

.marketing {
        padding-left:5%;
        padding-right:5%;
        padding-bottom:40px;
}

This gives the marketing row a left and right padding of 5% and a bottom padding of 40px. Horizontal padding/margin values in % are useful when creating responsive layouts as this ensures that the content scales properly, regardless of screen size.

.feature-box {
        background:#ccc;
        width:200px;
        height:200px;
        margin-left:auto;
        margin-right:auto;
        border-radius:5px;
}
.feature-box p {
        color:#fff;
        text-transform:uppercase;
        line-height:200px;
        text-align:center;
}

This is the CSS used for creating the grey box in the primary content area. We’ve given it a height and width of 200 pixels, along with a border radius of 5 pixels. Since we want this element to be in the center, we’ve given in margin-left and margin-right values of ‘auto’.

For the feature-box content, we’ve used a CSS trick to vertically align the text. Adding the ‘line-height:200px’ attribute ensures that the text stays vertically aligned to the center, although this is useful only if the text is just one line long. You can use this in any block element – just make the line-height of the text the same as the height of the block, and your text will align perfectly in the center.

[Protip: Instead of using CSS, you can use the holder.js jQuery plugin to create boxes on the fly. You can download holder.js here].

So that’s it! By creating our custom stylesheet, we have a simple, yet effective marketing website. Not only does this website look good, it also scales easily depending on the screen size. Further, you can expand this site as you see fit using the many built-in Bootstrap CSS classes.

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Scriptiny Editorial (see all)

  • Thanks also for sharing your knowledge by making
    this blog.

  • Abhiram Pathak

    Thanks for sharing such a nice informative post. Your information is really helpful to create a simple marketing website.

  • Website Designing Company in P

    This kind of easy stuff to design website are rare. so tons of thanks for sharing it.

  • George Platko

    Just a suggestion, don't tell people to delete the "Fonts" folder. If you do, they can't use Glyphicons. Not strictly necessary, but some people find this functionality useful.