How to Create Full Width Parallax Page with Bootstrap 4 Jumbotron?

Jumbotron is one of the Bootstrap components which helps to create attractive page headers with call to action button. The default jumbotron component has lightgrey color background and can be created with full width or fit within a container. With minor CSS adjustment you can add parallax background image to the jumbotron component and create a full width parallax page layout. In this article let us discuss more on how to create full width parallax page with Bootstrap 4 jumbotron component.

How to Create Full Width Parallax Page with Bootstrap 4 Jumbotron?

  • CSS Parallax Page
    1. Demo of Bootstrap 4 parallax page
    2. Starting with starter template
    3. CSS for parallax effect
    4. HTML for parallax sections
    5. Adding navigation and footer
    6. Complete code for parallax page
  • JavaScript Parallax Page

CSS Parallax Page

First let us explain the CSS parallax page with fixed background.

1. Demo of Bootstrap 4 Parallax Page Using Jumbotron

The parallax section of the Bootstrap 4 page will look something like below. You can view the full width and full page demo here.

Bootstrap 4 Parallax Page with Jumbotron
Bootstrap 4 Parallax Page with Jumbotron

2. Starting with Starter Template

The first step is to start with the skeleton Bootstrap 4 starter template. You can use CDN links for the stylesheet and scripts or host them on your own server. Let us take the below starter template with CDN links as a starting point for our page layout.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
Add Your Content Here...
<!-- Bootstrap 4 Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Offer: Get 92% discount of Mobirise Bootstrap site builder.

Related:  Correct WordPress White Screen of Death Issue

3. CSS for Parallax Effect

Our parallax section has a background image with minimum height as 600px, a h1 heading and a paragraph to add short description.

First let us create parallax section with fixed background image, you can set the minimum height to your desired height.

/* Header Parallax Element Style*/ 
.paral {
min-height: 600px;
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
}

Then let us add some styles to the paragraph and H1 heading like below. You can modify the values as you desired.

/* Paragraph for Parallax Section */ 
.paral p {
font-size: 24px;
color:#f5f5f5;
text-align: center;
line-height: 60px;
}

/* Heading for Parallax Section */ 
.paral h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 60px;
text-align: center;
padding-top: 60px;
line-height: 100px;
}

Then we add image for individual section’s background, we have shown here three CSS classes for adding three sections. You can just add “.paralsec3”, “.paralsec4”, etc. to add different images for further sections.

/* Image for Parallax Section */ 
.paralsec {
background-image: url("https://img.webnots.com/2017/05/parallax.jpg");
}

.paralsec1 {
background-image: url("https://img.webnots.com/2017/05/parallax1.jpg");}

.paralsec2 {
background-image: url("https://img.webnots.com/2015/11/parallax2.jpg");
}

/* Add more images for more sections */

Finally let us remove the bottom margin from the default jumbotron component.

/* Remove Bottom Margin from Jumbotron */
.jumbotron{margin-bottom: 0;}

You can either add all the CSS inside <style>…</style> tags within the header section of the starter template or create a external stylesheet and link.

4. Creating HTML for Parallax Sections

Below is the complete HTML code for the parallax page with three sections. We have used default button component on each section.

<!-- First Parallax Section -->
<div class="jumbotron paral paralsec">
<h1 class="display-3">Here is a heading 1</h1>
<p class="lead">Here is a short description 1</p>
<p class="lead">
<a class="btn btn-info btn-lg btn-md" href="#" role="button">Here is a button 1</a>
</p>
</div>

<!-- Second Parallax Section -->
<div class="jumbotron paral paralsec1">
<h1 class="display-3">Here is a heading 2</h1>
<p class="lead">Here is a short description 2</p>
<p class="lead">
<a class="btn btn-warning btn-lg btn-md" href="widgets.html" role="button">Here is a button 2</a>
</p>
</div>

<!-- Third Parallax Section -->
<div class="jumbotron paral paralsec2">
<h1 class="display-3">Here is a heading 3</h1>
<p class="lead">Here is a short description 2</p>
<p class="lead">
<a class="btn btn-primary btn-lg btn-md" href="themes.html" role="button">Here is a button 3</a>
</p>
</div>

<!-- Add More Parallax Sections Here -->

5. Adding Navigation and Footer

The above CSS and HTML code blocks with starter template will make the full width parallax page without navigation and footer. Add the navigation bar using navbar component and the footer using the below custom CSS. Navigation and footer will make the page complete which can be used anywhere independently.

/* Footer */
.wn-footer {
padding: 2.5rem 0;
text-align: center;
color: white;
background-color: #607D8B;
border-top: .05rem solid #e5e5e5;
}

.wn-footer a {
color: yellow;
}

Offer: Get 92% discount of Mobirise Bootstrap site builder.

Related:  Fix Slow Page Loading Waiting for ajax.googleapis.com

6. Complete Jumbotron Parallax Page

The complete code of the Bootstrap 4 jumbotron parallax page will look like below. You can copy and use it by replacing the image URLs and dummy content with your own. View the live demo here.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/* Header Parallax Element Style*/ 
.paral {
min-height: 600px;
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
}

/* Paragrapgh for Parallax Section */ 
.paral p {
font-size: 24px;
color:#f5f5f5;
text-align: center;
line-height: 60px;
}

/* Heading for Parallax Section */ 
.paral h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 60px;
text-align: center;
padding-top: 60px;
line-height: 100px;
}

/* Image for Parallax Section */ 
.paralsec {
background-image: url("https://img.webnots.com/2017/05/parallax.jpg");
}

.paralsec1 {
background-image: url("https://img.webnots.com/2017/05/parallax1.jpg");}

.paralsec2 {
background-image: url("https://img.webnots.com/2015/11/parallax2.jpg");
}

/* Add more images for more sections */

/* Remove Bottom Margin from Jumbotron */
.jumbotron{margin-bottom: 0;}

/* Footer */
.wn-footer {
padding: 2.5rem 0;
text-align: center;
color: white;
background-color: #607D8B;
border-top: .05rem solid #e5e5e5;
}

.wn-footer a {
color: yellow;
}
</style>
</head>
<body>
<!-- First Parallax Section -->
<div class="jumbotron paral paralsec">
<h1 class="display-3">Here is a heading 1</h1>
<p class="lead">Here is a short description 1</p>
<p class="lead">
<a class="btn btn-info btn-lg btn-md" href="#" role="button">Here is a button 1</a>
</p>
</div>

<!-- Second Parallax Section -->
<div class="jumbotron paral paralsec1">
<h1 class="display-3">Here is a heading 2</h1>
<p class="lead">Here is a short description 2</p>
<p class="lead">
<a class="btn btn-warning btn-lg btn-md" href="widgets.html" role="button">Here is a button 2</a>
</p>
</div>

<!-- Third Parallax Section -->
<div class="jumbotron paral paralsec2">
<h1 class="display-3">Here is a heading 3</h1>
<p class="lead">Here is a short description 2</p>
<p class="lead">
<a class="btn btn-primary btn-lg btn-md" href="themes.html" role="button">Here is a button 3</a>
</p>
</div>

<!-- Add More Parallax Sections Here -->
<!-- Footer Section -->
<footer class="wn-footer">
<p>This is a Bootstrap 4 parallax page with jumbotron created by <a href="https://www.webnots.com/">WebNots Web Consulting Services</a></p>
<p>
<a href="#">Back to top</a>
</p>
</footer>
<!-- Bootstrap 4 Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
</body>
</html>

JavaScript Parallax Page

Though the above CSS fixed image looks like a parallax, it is not really a parallax effect. In parallax, the background image also should move relatively to the content movement. It can only be done using JavaScript. There are readymade JavaScript libraries like jarallax.js you can use to create full width parallax sections. Unfortunately, explaining the entire process will be more complex here. You can check out the following demos and download the theme made with Bootstrap.

Recommended Articles:

7 thoughts on “How to Create Full Width Parallax Page with Bootstrap 4 Jumbotron?”

  1. No no no no no. That is a fixed background. it is NOT parallax. Parallax is where the background scrolls at a slower or faster rate than the content. Please remove the word parallax from this tutorial, it is misleading and wasting time.

    Reply

Leave a Comment