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.

Want to be a Bootstrap Master?
Subscribe to our newsletter and download the Bootstrap Programming Cookbook right now!
In order to get you prepared for your Bootstrap development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!
I agree to the Terms and Privacy Policy

Thank you!

We will contact you soon.

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
Exit mobile version