 |
| Bootstrap 4 Jumbotron |
Include a .jumbotron class to a <div> element to create remarkable jumbotron.
Let's see how to create a jumbotron design?
<div class="container">
<div class="jumbotron">
<h1 class="display-4">Bootstrap 4 Jumbotron!</h1>
<p class="lead">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<hr class="my-4">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="https://primestudyhub.blogspot.com/search/label/Bootstrap%204" target="_blank" role="button">Learn more</a>
</p>
</div>
</div>
Jumbotron (Full - width)
Follow the below steps to create full-width jumbotron without rounded corners,- Include .jumbotron-fluid class to your html element
- Add a .container class (or)
- Add a .container-fluid class within the element.
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Jumbotron Full-width</h1>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
Demo
Jumbotron Image
To create more attractive jumbotron, just include the image background in jumbotron that gives more attention to your website visitor.
Demo
If you would like to learn more about latest bootstrap information click here.
NEXT STEPS...
Increase your brand identity by following the steps outlined above. Ask questions & get feedback on your work by using the below comment section effectively.
Comments