Skip to content
Related Articles

Related Articles

Bootstrap 4 | Jumbotron
  • Last Updated : 31 May, 2019

A jumbotron is a big grey box used to indicate some text which requires extra attention. Any text that seems to be important can be written inside a jumbotron to make it appear big and noticeable.

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:




<!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=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </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:




<!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=
      
    <script src=
    </script>
      
    <script src=
    </script>
      
    <script src=
    </script>
</head
  
<body style="text-align:center;"
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 style="color:green;">
                GeeksforGeeks
            </h1
              
            <p>A computer science portal for geeks</p>
        </div>
    </div>
      
    <p>Text content outside the jumbotron</p>
</body
  
</html>                    

Output:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :