Svelte Bootstrap Jumbotron
Svelte Jumbotron - Bootstrap 4 & Material Design
Svelte Jumbotron is a responsive component which the main goal is to focus visitor's attention or highlight the special piece of information.
Inside a Jumbotron, you can make use of almost any other Bootstrap code to additionally increase its engagement value.
Its flexibility lets you operate with images, enlarged fonts, different background styles, and CTA's.
Jumbotron use examples:
- Project presentation
- Article introduction
- Image showcase
See a number of Bootstrap Jumbotron examples to familiarize yourself with its design.
Basic example
A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
Hello, world!
This is a simple hero unit, a simple Jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typgraphy and spacing to space content out within the larger container.
<script>
import {MDBJumbotron, MDBBtn, MDBContainer, MDBRow, MDBCol} from "mdbsvelte";
</script>
<MDBContainer class="mt-5 text-center">
<MDBRow>
<MDBCol>
<MDBJumbotron>
<h2 class="h1 display-3">Hello, world!</h2>
<p class="lead">
This is a simple hero unit, a simple Jumbotron-style component for
calling extra attention to featured content or information.
</p>
<hr class="my-2"/>
<p>
It uses utility classes for typgraphy and spacing to space content out
within the larger container.
</p>
<p class="lead">
<MDBBtn color="primary">Learn More</MDBBtn>
</p>
</MDBJumbotron>
</MDBCol>
</MDBRow>
</MDBContainer>
Jumbotron with a background image
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!
<script>
import {MDBJumbotron, MDBBtn, MDBContainer, MDBRow, MDBCol, MDBCardTitle, MDBIcon} from "mdbsvelte";
</script>
<MDBContainer>
<MDBRow>
<MDBCol>
<MDBJumbotron style="padding: 0">
<MDBCol class="text-white text-center py-5 px-4 my-5"
style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg)">
<MDBCol class="py-5">
<MDBCardTitle class="h1-responsive pt-3 m-5 font-bold">Create your beautiful website with MDBootstrap
</MDBCardTitle>
<p class="mx-5 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam,
voluptatem,
optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed
qui, dolorum!
</p>
<MDBBtn outline color="white" class="mb-5">
<MDBIcon icon="clone" class="mr-2"></MDBIcon>
View project
</MDBBtn>
</MDBCol>
</MDBCol>
</MDBJumbotron>
</MDBCol>
</MDBRow>
</MDBContainer>
Fluid jumbotron
To make the jumbotron full width, and without rounded corners, add the fluid prop
<MDBContainer> or <MDBContainer fluid> within.
Fluid jumbotron
This is a modified jumbotron that occupies the entire horizontal space of its parent.
<script>
import {MDBJumbotron, MDBContainer} from "mdbsvelte";
</script>
<MDBJumbotron fluid>
<MDBContainer>
<h2 class="display-4">Fluid jumbotron</h2>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</MDBContainer>
</MDBJumbotron>
Jumbotron with image
.jpg)
<script>
import {
MDBJumbotron,
MDBContainer,
MDBRow,
MDBCol,
MDBIcon,
MDBCardTitle,
MDBCardImage,
MDBCardBody,
MDBCardText
} from "mdbsvelte";
</script>
<MDBContainer class="mt-5 text-center">
<MDBRow>
<MDBCol>
<MDBJumbotron class="text-center">
<MDBCardTitle class="card-title h4 pb-2">
<strong>My adventure</strong>
</MDBCardTitle>
<MDBCardImage
src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg"
class="img-fluid"
/>
<MDBCardBody>
<MDBCardTitle class="indigo-text h5 m-4">
Photography
</MDBCardTitle>
<MDBCardText>
Sed ut perspiciatis unde omnis iste natus sit voluptatem
accusantium doloremque laudantium, totam rem aperiam.
</MDBCardText>
<MDBCol class="d-flex justify-content-center mt-4" md="12">
<MDBCol md="3" class="d-flex justify-content-around">
<a href="#">
<MDBIcon
fab
icon="linkedin-in"
class="grey-text"
size="lg"
/>
</a>
<a href="#">
<MDBIcon
fab
icon="twitter"
class="grey-text"
size="lg"
/>
</a>
<a href="#">
<MDBIcon
fab
icon="facebook-f"
class="grey-text"
size="lg"
/>
</a>
</MDBCol>
</MDBCol>
</MDBCardBody>
</MDBJumbotron>
</MDBCol>
</MDBRow>
</MDBContainer>
Jumbotron with buttons
Powerful and free Material Design UI KIT
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid dolorem ea distinctio exercitationem delectus qui, quas eum architecto, amet quasi accusantium, fugit consequatur ducimus obcaecati numquam molestias hic itaque accusantium doloremque laudantium, totam rem aperiam.
<script>
import {
MDBJumbotron,
MDBBtn,
MDBContainer,
MDBRow,
MDBCol,
MDBIcon,
MDBCardBody,
MDBCardText,
MDBCardTitle
} from "mdbsvelte";
</script>
<MDBContainer class="mt-5 text-center">
<MDBRow>
<MDBCol>
<MDBJumbotron>
<MDBCardBody>
<MDBCardTitle class="h2">
Material Design for Bootstrap
</MDBCardTitle>
<p class="blue-text my-4 font-weight-bold">
Powerful and free Material Design UI KIT
</p>
<MDBCardText>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga
aliquid dolorem ea distinctio exercitationem delectus qui, quas
eum architecto, amet quasi accusantium, fugit consequatur
ducimus obcaecati numquam molestias hic itaque accusantium
doloremque laudantium, totam rem aperiam.
</MDBCardText>
<hr class="my-4"/>
<div class="pt-2">
<MDBBtn
color="primary"
class="waves-effect"
>
Buy now
<MDBIcon far icon="gem"/>
</MDBBtn>
<MDBBtn
outline
color="primary"
class="waves-effect"
>
Download
<MDBIcon icon="download"/>
</MDBBtn>
</div>
</MDBCardBody>
</MDBJumbotron>
</MDBCol>
</MDBRow>
</MDBContainer>