Jump to: navigation, search

Bootstrapskin Jumbotron

Jumbotron

BootStrap jumbotron

This lead text is colored with a lighter version of the main color. Link colors are darker and become white when the mouse hovers over.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed arcu elit, ultrices ut lacus at, mattis varius eros. Fusce quis lorem enim. Proin hendrerit, nisl eu mattis viverra, nisl nunc placerat sapien, at adipiscing magna felis quis felis.

Regular paragraphs are white and have the same link styling.

Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.

Continue
Learn more

Small text

In sit amet leo mi. Nunc blandit mattis dolor, eget cursus sapien egestas quis. Integer facilisis diam vitae orci blandit, sit amet porttitor tortor luctus. Integer lacinia justo et elit fermentum fringilla.

Bootstrap Jumbotron is normally used at the top of the page as an marketing section where you can add bootstraps amazing typography. We've added several variations to give you of flavour of what's available.

In the current version of BootStrapSkin only the shaded colours are available for Jumbotron; so replace "jumbotron-lighter" with any of the following;

      <div class="jumbotron jumbotron-light">
      <div class="jumbotron jumbotron-dark">
      <div class="jumbotron jumbotron-darker">

Also take note of the text classes "lead" and "small".

    <div class="col-md-12">
      <div class="jumbotron jumbotron-lighter">
        <h1>BootStrap jumbotron</h1>
        <p class="lead">This lead text is colored with a lighter version of the main color. Link colors are darker and become
        white when the mouse hovers over.</p>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed arcu elit, ultrices ut lacus at, mattis
        varius eros. Fusce quis lorem enim. Proin hendrerit, nisl eu mattis viverra, nisl nunc placerat sapien, at adipiscing magna
        felis quis felis.</p>
        <p>Regular paragraphs are white and have the same link styling.</p>
        <p>Pellentesque vel egestas diam. Duis pulvinar placerat nisi sit amet sollicitudin. Morbi ullamcorper dui vitae odio
        mattis luctus. Etiam scelerisque nisi id augue cursus rhoncus.</p>
        <div class="btn btn-darker btn-lg" role="button">[[Continue]]</div>
        <div class="btn btn-default btn-lg" role="button">[[Learn more]]</div>
        <p class="small">Small text</p>
        <p class="small">In sit amet leo mi. Nunc blandit mattis dolor, eget cursus sapien egestas quis. Integer facilisis diam
        vitae orci blandit, sit amet porttitor tortor luctus. Integer lacinia justo et elit fermentum fringilla.</p>
      </div>
    </div>

As with all aspects of Bootstrap, JumboTron is highly flexible, offering numerous opportunities to customise.

The width is set by the column class.

Traditional "a class" links do not work with Mediawiki, use [[]] wiki syntax with buttons when linking to internal articles and [] wiki syntax for external links.

bootstrapskin-commercial-skin.png