Bootstrap intro sections
Use one of the stunning, full-page intros to make your website outstanding.
1. App intro
3. Call to Action Buttons intro
5. Classic Register Form intro
6. Video Intro
App intro MDB Pro component
MDB
Make purchases with our app
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae iste.
Learn more
Download
.intro-2 {
background: url("https://mdbootstrap.com/img/Photos/Others/architecture.jpg")no-repeat center center;
background-size: cover;
}
.view {
height: 100vh !important;
}
.btn .fa {
margin-left: 3px;
}
.top-nav-collapse {
background-color: #424f95 !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #424f95 !important;
}
}
h6 {
line-height: 1.7;
}
.rgba-gradient .full-bg-img {
background: linear-gradient(45deg, rgba(42, 27, 161, 0.6), rgba(29, 210, 177, 0.6) 100%);
}
@media (max-width: 450px) {
.margins {
margin-right: 1rem;
margin-left: 1rem;
}
}
@media (max-width: 740px) {
.full-height,
.full-height body,
.full-height header,
.full-height header .view {
height: 1020px;
}
}
<html lang="en" class="full-height">
Contact Form intro MDB Pro component
MDB
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste.
Learn more
Write to us:
.intro-2 {
background: url("https://mdbootstrap.com/img/Photos/Others/img%20(46).jpg")no-repeat center center;
background-size: cover;
}
.view {
height: 100vh !important;
}
.top-nav-collapse {
background-color: #ff8a65 !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #ff8a65 !important;
}
}
.md-form .prefix {
font-size: 1.5rem;
margin-top: 1rem;
}
h6 {
line-height: 1.7;
}
@media (max-width: 740px) {
.full-height,
.full-height body,
.full-height header,
.full-height header .view {
height: 1150px;
}
}
<html lang="en" class="full-height">
Call to Action Buttons intro MDB Pro component
MDB
-
Our New Course is Ready
-
It comes with a lot of new features, easy to follow videos and images. Check it out now!
-
Sign up!
Learn more
.top-nav-collapse {
background-color: #f8bbd0 !important;
}
.view {
height: 100vh !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #f8bbd0 !important;
}
}
@media (max-width: 740px) {
.full-height,
.full-height body,
.full-height header,
.full-height header .view {
height: 700px;
}
}
<html lang="en" class="full-height">
Parallax Effect intro MDB Pro component
MDB
.top-nav-collapse {
background-color: #82b1ff !important;
}
.view {
height: 100vh !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #82b1ff !important;
}
}
h5 {
letter-spacing: 3px;
}
@media (max-width: 740px) {
.full-height,
.full-height body,
.full-height header,
.full-height header .view {
height: 700px;
}
}
<html lang="en" class="full-height">
Classic Register Form intro MDB Pro component
MDB
Sign up right now!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.
Learn more
.intro-2 {
background: url("http://mdbootstrap.com/img/Photos/Others/img%20(42).jpg")no-repeat center center;
background-size: cover;
}
.view {
height: 100vh !important;
}
.top-nav-collapse {
background-color: #3f51b5 !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #3f51b5 !important;
}
}
.rgba-gradient .full-bg-img {
background: linear-gradient(45deg, rgba(83, 125, 210, 0.4), rgba(178, 30, 123, 0.4) 100%);
}
.card {
background-color: rgba(229, 228, 255, 0.2);
}
.md-form .prefix {
font-size: 1.5rem;
margin-top: 1rem;
}
.md-form label {
color: #ffffff;
}
h6 {
line-height: 1.7;
}
@media (max-width: 740px) {
.full-height,
.full-height body,
.full-height header,
.full-height header .view {
height: 1040px;
}
}
<html lang="en" class="full-height">
Video intro MDB Pro component
MDB
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.
Just do it!
.top-nav-collapse {
background-color: #7d8488 !important;
}
.view {
height: 100vh !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #7d8488 !important;
}
}
.rgba-gradient .full-bg-img {
background: linear-gradient(45deg, rgba(242, 34, 50, 0.5), rgba(255, 187, 54, 0.6) 100%);
}
@media (max-width: 740px) {
.full-height,
.full-height body,
.full-height header,
.full-height header .view {
height: 700px;
}
}
<html lang="en" class="full-height">
Minimalist intro MDB Pro component
MDB
.top-nav-collapse {
background-color: #78909c !important;
}
.view {
height: 100vh !important;
}
.navbar:not(.top-nav-collapse) {
background: transparent !important;
}
@media (max-width: 768px) {
.navbar:not(.top-nav-collapse) {
background: #78909c !important;
}
}
h1 {
letter-spacing: 8px;
}
h5 {
letter-spacing: 3px;
}
.hr-light {
border-top: 3px solid #fff;
width: 80px;
}
@media (max-width: 740px) {
.full-height,
.full-height body,
.full-height header,
.full-height header .view {
height: 700px;
}
}
<html lang="en" class="full-height">
API Reference:
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
API Reference for MDB Angular Intros Sections:
// For MDB Angular Pro
import { WavesModule, NavbarModule, InputsModule, ButtonsModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
import { WavesModule, NavbarModule, InputsModule, ButtonsModule } from 'angular-bootstrap-md'