Bootstrap 4 Jumbotron Tutorial With Example

In Bootstrap 4 Jumbotron Tutorial With Example, you will learn how to use Bootstrap 4 jumbotron component. It provides a unique way to showcase the key content or information on a web page. Jumbotron is designed to capture the user’s attention upon entering the website. It is Ideal for key marketing messages and calls to action. Bootstrap 4 introduced the .jumbotron-fluid class.

Bootstrap 4 Jumbotron Tutorial With Example

In Bootstrap 4, a jumbotron is a large callout that is styled with large text and heavy padding. By default, Bootstrap 4 jumbotrons are styled in light gray, but you can switch this to any color.

#1: Bootstrap 4 Jumbotron

Use a <div> element with a class .jumbotron to create a jumbotron.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Jumbotron Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="jumbotron">
  <h2>Investment Novel</h2>
  <p>Investment Novel will teach and demonstrate how the latest web technologies like Angular, Javascript, Laravel, Bootstrap, MongoDB  Programming in Javascript are working together and built Realtime Web Applications</p>
</div>
</body>
</html>

The output of the example looks like below image.

bootstrap 4 jumbotron example

#2: Full-width Jumbotron

If you require a full-width jumbotron without rounded borders, add the .jumbotron-fluid class and a .container or.container-fluid inside the jumbotron.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Jumbotron Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
  <h2>Investment Novel</h2>
  <p>Investment Novel will teach and demonstrate how the latest web technologies like Angular, Javascript, Laravel, Bootstrap, MongoDB  Programming in Javascript are working together and built Realtime Web Applications</p>
</div>
</div>
</body>
</html>

The output of the example looks like below image.

bootstrap 4 jumbotron tutorial

At last, our Bootstrap 4 Jumbotron Tutorial With Example is over.

Post Your Thoughts

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