Bootstrap Jumbotron en paginakoptekst
Een Jumbotron maken
Een jumbotron geeft een grote doos aan om extra aandacht te vragen voor bepaalde inhoud of informatie.
Een jumbotron wordt weergegeven als een grijze doos met afgeronde hoeken. Het vergroot ook de lettergrootte van de tekst erin.
Tip: in een jumbotron kun je bijna elke geldige HTML plaatsen, inclusief andere Bootstrap-elementen/klassen.
Gebruik een <div>element met klasse .jumbotronom een jumbotron te maken:
Bootstrap-zelfstudie
Bootstrap is het populairste HTML-, CSS- en JS-framework voor het ontwikkelen van responsieve, mobielgerichte projecten op internet.
Jumbotron binnencontainer
Plaats de jumbotron in de <div class="container">, als u wilt dat de jumbotron NIET tot aan de rand van het scherm reikt:
Voorbeeld
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Jumbotron Buitencontainer
Plaats de jumbotron buiten de <div class="container">als u wilt dat de jumbotron tot aan de schermranden komt:
Voorbeeld
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Een paginakoptekst maken
Een paginakoptekst is als een sectiescheiding.
De .page-headerklasse voegt een horizontale lijn toe onder de kop (+ voegt wat extra ruimte toe rond het element):
Voorbeeld paginakoptekst
Gebruik een <div>element met klasse .page-headerom een paginakoptekst te maken:
Voorbeeld
<div class="page-header">
<h1>Example Page Header</h1>
</div>