What are Jumbotron and Scrollspy in bootstrap?
A Jumbotron is displayed as a grey box with rounded corners. It indicates a big box to emphasize some special content or information. It also enlarges the font sizes of the text inside it.
Tip: Inside a Jumbotron, you can put nearly any valid HTML, including other Bootstrap elements/classes.
The Bootstrap 3 or Bootstrap 4 provide CSS class called Jumbotron, which is designed to capture the user’s attention upon entering the website, making it perfect for displaying important information.
A Jumbotron is simply created by giving a <div> element the .jumbotron class.
To create one, the HTML you need to use would look something like this :
<div class="jumbotron"> <h1>Jumbotron</h1> <p>Important information here!</p> </div>
Now, if you’d like your Jumbotron to be full-width, then bootstrap provide a class name .Jumbotron-fluid to it and wrap the content inside the Jumbotron with a <div> element with the .container class like this:
<div class="jumbotron jumbotron-fluid"> <div class="container"> <h1>Jumbotron</h1> <p>Important infoa rmation here!</p> </div> </div>
Here is output :
This is bootstrap example, If you want to change style and background of this div, then you will add custom css class with .jumbotron class and add extra css property as per requirement.
Scrollspy
A Scrollspy plugin is used to automatically update links in a navigation list based on scroll position.
Scrollspy is commonly used in the single page websites. If we have a long page with different sections and we don’t want to use reload page onclick of page title then we can use this Scrollspy. It is very useful in the simple content based websites. We can apply different slide effects as well when click on the link using jquery sliding function.
How to create Scrollspy
<!-- include bootstrap css file also for this code to work -->
<html>
<head>
<style>
#section1 {
Add Css here...
}
#section2 {
Add Css here...
}
#section3 {
Add Css here...
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
<p>Try to scroll this section</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! </p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>