×

Html & Html5

Introduction to Html

Component of Html

HTML Advance

HTML Advance

Html Form

Html5 basics

Html5 Grid

Html5 Graphics

Html5 Media

Html5 APIs

it training classes Logo

The World's best Software Development Study Portal

Bootstrap5

Introduction to Bootstrap5

Component of Bootstrap


Jumbotron


A jumbotron was introduced in Bootstrap 3 as a big padded box for calling extra attention to some special content or information.

Jumbotrons are no longer supported in Bootstrap 5. However, you can use a

element and add special helper classes together with a color class to achieve the same effect:


<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container mt-3">

<h2>Example of Jumbotron</h2>

<div class="mt-4 p-5 bg-primary text-white rounded">

<h1>Jumbotron Example</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..</p>

</div>

</div>

</body>>

</html>

Output of this Program


Example of Jumbotron

Jumbotron Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..




Here through jumbotron we give special attraction to our content.








Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute