Bootstrap 4 | Jumbotron
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:
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= <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:
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= <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:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...