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.
2. Project Layout
The project structure of our example application is as follows:
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.
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> </div> </div> ...
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.
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> </div> </div> ...
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:
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:
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