Jumbotron
A jumbotron indicates a big box for
calling extra attention to some special content or information
A simple, flexible viewport to
showcase your key points on your website.
Hello World!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, eiusmod
tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat.
<div class="jumbotron bg-bright">
<h1 class="jumbo-head">Hello World!</h1>
<h3 class="jumbo-catch_line">Lorem ipsum dolor sit amet, consectetur adipiscing elit, eiusmod tempor</h3>
<hr>
<p class="jumbo-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
<button type="button" class="button button-dark button-large text-bright">Let's start</button>
</div>
Centered Jumbotron
Hello World!
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
eiusmod
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat.
<div class="jumbotron bg-bright">
<h1 class=">"jumbo-head txt-center">Hello World!</h1>
<h3 class="jumbo-catch_line txt-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, eiusmod tempor.</h3>
<hr>
<p class="jumbo-content txt-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
<button type="button" class="button button-dark button-large button-center text-bright">Let's start</button>
</div>
You can center all the text by using text-center
and center the buttons by adding button-center.
All the components of jumbotron are full customizable ,just add your own css
classes on the elements.
Example :
Hello World!
Lorem ipsum dolor sit amet, consectetur adipiscing elit,eiusmod
tempor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Also try changing the background-colorand
colorof font in jombotrons.
To know how to use Scratch's background and font color classes , visit the utilities section or add your own CSS
class for different shade.
Hello World!
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
eiusmod
tempor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat.
<div class="jumbotron bg-yellow">
<h1 class="jumbo-head text-center">Hello World!</h1>
<h3 class="jumbo-catch_line text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, eiusmod tempor.</h3>
<hr>
<p class="jumbo-content text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
<button type="button" class="button button-dark button-large button-center text-bright">Let's start</button>
</div>
Here bg-yellow is used to change the
background color
of jumbotron.
Hello World!
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
eiusmod
tempor
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat.
<div class="jumbotron back-pink">
<h1 class="jumbo-head text-center">Hello World!</h1>
<h3 class="jumbo-catch_line text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, eiusmod tempor</h3>
<hr>
<p class="jumbo-content text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
<button type="button" class="button button-dark button-large button-center button-bread text-bright">Let's start</button>
</div>
Here back-pink(custom CSS class) is used
to change
the background color of jumbotron.
