Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Jumbotron

In this article I will explain bootstrap feature Jumbotron, like name this component can optionally increases the size of headings and add a lot of margin and create big box around text for extra attention.

Points to remember:

1.  Jumbotron is displayed as gray text box, gray text box created around text with rounded corners.
2.   Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.
3.  To get a jumbotron full width, and without rounded corners use the .jumbotron class outside all

Example:

  <div class="page-header">
      <h1>Leave Summery</h1>
         <h3> example with simple header</h3>
    </div>
   
 <div class="jumbotron">
         <h1>Leave Summery</h1>
        <h3> example with jambtron</h3>
    </div>


Jumbotron Example with full width, and without rounded corners:


<div class="jumbotron">
 <div class="container"> <h1>Leave Summery!</h1> <p>This is an example for jumbotron.
 </p> <p><a class="btn btn-primary btn-lg" role="button"> Learn more</a> </p> </div>
  </div>


Output:


Invalid entry,please enter valid data.

Loading