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 jumbotron component. We use version 4 CSS, however, you can use the latest version also.
How to Create Full Width Parallax Page with Bootstrap?
- CSS Parallax Page
- Demo of Bootstrap parallax page
- Starting with starter template
- CSS for parallax effect
- HTML for parallax sections
- Adding navigation and footer
- 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 Parallax Page Using Jumbotron
The parallax section of the Bootstrap page will look something like below.
2. Starting with Starter Template
The first step is to start with the skeleton Bootstrap 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>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;
}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.
<!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 themes made with Bootstrap.
- OnePager parallax header theme.
- Web-Boots – complete Bootstrap theme with parallax page and many other features.
7 Comments
Leave your reply.