Bootstrap Case: Adding a Jumbotron Tags

 

---

Jumbotron

A jumbotron indicates a big box for calling extra attention to some special content or information.

A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.

Use a <div> element with class .jumbotron to create a jumbotron.

The following example places the heading and the first paragraph inside a jumbotron:

Example

<div class="container">
  <div class="jumbotron">
    <h1>My first Bootstrap website!</h1> 
    <p>This page will grow as we add more and more components from Bootstrap...</p>
  </div>

  <p>This is another paragraph.</p> 
  <p>This is a paragraph.</p> 
  <p>This is another paragraph.</p>
</div>

Try it Yourself »

	Is it possible to customize the Jumbotron? What if I want another color? You can cutomize all elements/classes in Bootstrap. We will look at customization in a later chapter.