1.

What is the role of Jumbotron in Bootstrap?

Answer»

Jumbotron is a component that allow you to set landing page content design. A big grey box is seen as Jumbotron for including special content with increase in size of headings. Including it will also add a lot of margins that would make the box and its content catchier.

Let us now see how to create a Jumbotron in Bootstrap. For that, use the class .jumbotron:

&LT;DIV class="jumbotron">   <h1>My Website</h1>   <p>We provide freelancers for content, responsive website design, business writing, etc.</p> </div>

Let us see the example:

<!DOCTYPE html> <html lang="en"> <HEAD>   <title>Bootstrap Demo</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.1.3/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.3/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container">   <div class="jumbotron">     <h1>My Website</h1>     <p>We provide freelancers for content, responsive website design, business writing, etc.</p>   </div>   <p>Text outside Jumbotron</p>       </div> </body> </html>

The following is the output:



Discussion

No Comment Found