What is Bootstrap Jumbotron and how to use it

Posted on : Thu, 1st Oct 15 06:42 am UTC
100+ votes

A Jumbotron in Bootstrap Web UI framework is a huge box shaped component that is displayed on the page to draw user attention to some important content.

Jumbotron is a lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

-According to Bootstrap

The default color of Jumbotron is gray with rounded corners. jumbotron is the css class for creating Jumbotron, It contains an H1 tag along with a p tag to display some text inside it.


File : jumbotron-example.html Language : HTML
<!DOCTYPE html>
  <title>What is Bootstrap Jumbotron?</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <div class="jumbotron">
    <h1>What is Bootstrap Jumbotron?</h1>      
    <p>A jumbotron is a huge box that is displayed on the page to draw attention of some important content.</p>


Code2care's mission is to share varied knowledge in technical and non-technical areas gathered during day-to-day learnings and development activities so that our visitors can leverage this portal to find solutions to their queries without re-inventing the wheel. Technical posts include Learnings, Tutorials, Video Tutorials, Code Snippets, Tips-n-tricks.

Follow us : Facebook - Twitter - Google +