Bootstrap intro sections

Use one of the stunning, full-page intros to make your website outstanding.

1. App intro

2. Contact Form intro

3. Call to Action Buttons intro

4. Parallax Effect intro

5. Classic Register Form intro

6. Video Intro

7. Minimalist intro


App intro MDB Pro component

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

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

  • 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

NATALIE SMITH

Web developer & graphic designer
portfolio About me
.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

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

Register:



.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

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

Minimalist intro


Photography & design
portfolio About me
.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'