Bootstrap Jumbotron Example

In this tutorial, I will guide you through using the Jumbotron component from Bootstrap. A typical use of the Jumbotron is to draw the user’s attention to specific information. We will see how we can create one and the various options for styling it. We will also explore the responsive behavior of the Jumbotron on different size viewports.

1. Tools and Technologies

To build the example application for this example, I have used the following toolset. Some of them are required whilst others could be replaced by tools of your own choice.

  1. Bootstrap v3.3.7
  2. JQuery v1.12.4
  3. Nodejs v6.3.0
  4. Express
  5. Visual Studio Code IDE

Bootstrap is a front-end framework for designing responsive websites. We also include JQuery since Bootstrap needs it. The JQuery library makes writing JavaScript a breeze. Node.js in essence is JavaScript on the server-side. The Express module is used to create a barebones server to serve files and resources to the browser.

2. Project Layout

The project structure of our example application is as follows:

Project Layout

The css folder holds the Bootstrap css files taken from the Bootstrap download.
The fonts that came with the Bootstrap download are placed in this folder.
All Bootstrap JavaScript files and the ones we create reside in this folder.
This file is placed in the root of our project and contains code for a bare minimum web server for our use.
The index.html file contains all the HTML markup. I have used the template provided in the Getting Started section of the Bootstrap website as a start.

3. HTML Markup

In this section we will setup and write the HTML markup for our example in the index.html page. There are a couple of ways to use the Jumbotron component in a web page. We can occupy the entire width of the viewport by placing it outside of all containers. Or we can have the Jumbotron enveloped in a container which would offset it from the edges and give it round borders. Let us look at Html for both and the resultant output in each case.

3.1. Jumbotron outside of container

To achieve this we need the following Html markup:


    <div class="jumbotron">
        <div class="container">
            <h1>WCG -- Bootstrap Jumbotron Tutorial</h1>
            <p>This is a tutorial for Bootstrap Jumbotron Component from Web Code Geeks</p>
            <button class="btn btn-info">Details</button>

This should give us a layout with the Jumbotron occupying the entire width of the viewport and without rounded borders like in the below screenshot.

Jumbotron outside Container

3.2. Jumbotron inside of container

To implement this we would modify the Html Markup in the previous section to look like below:


    <div class="container">
        <div class="jumbotron">
            <h1>WCG -- Bootstrap Jumbotron Tutorial</h1>
            <p>This is a tutorial for Bootstrap Jumbotron Component from Web Code Geeks</p>
            <button class="btn btn-info">Details</button>

This would create a Jumbotron which is placed at the center with whitespace on either side and rounded corners. The output would be as below:

Jumbotron Inside Container

4. Running the Code

To run the code and see it in action you need to run the following commands at the root of the project:

> npm install


> node index.js

After running the above two commands we need to navigate to the Url http://localhost:8090 to arrive at the below page:

Jumbotron Demo

5. Download the Source Code

You can download the source code for this example below:

You can download the full source code of this example here : WCG — Bootstrap Jumbotron Tutorial

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!


1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook


and many more ....


I have read and agree to the terms & conditions


Siddharth Seth

Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.
Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newest Most Voted
Inline Feedbacks
View all comments
5 years ago

Nicely done! The download works great and it was just what I was looking for.
Thanks for putting this up.

Need to get rid of the captcha code though.

5 years ago

Is there a continuation to this section?

Back to top button