Bootstrap 4 | Jumbotron
Last Updated :
10 Apr, 2024
Bootstrap 4 Jumbotron is a large, prominent container for displaying key content, such as headers or call-to-action messages, with customizable background colors and padding for emphasis.
Steps to add jumbotron:
- Use a jumbotron class inside a div element.
- Write any text inside the div tag.
- Close the div element.
Syntax:
<div class="jumbtron"> Contents... <div>
Example: In this example we displays a Bootstrap Jumbotron with a green header “GeeksforGeeks” and a description “A computer science portal for geeks” centered within a container.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Jumbotron</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.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center;">
<div class="container">
<div class="jumbotron">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>A computer science portal for geeks</p>
</div>
</div>
</body>
</html>
Output:
Full-width Jumbotron: The .jumbotron-fluid and .container or .container-fluid classes is used to create a full-width jumbotron without rounded borders.
Syntax:
<div class="jumbotron jumbotron-fluid">
<div class="container"> Contents... <div>
<div>
Example: In this example we creates a Bootstrap Jumbotron with a green header “GeeksforGeeks” and a description “A computer science portal for geeks” centered within a container.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Jumbotron</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.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center;">
<div class="container">
<div class="jumbotron">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>A computer science portal for geeks</p>
</div>
</div>
</body>
</html>
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...