Basic
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
You mostly only need to copy and paste a code from the section which you want to use. You might see that all of the sections have a wrapper like this: <section class="section"></section>. It's always a good practice to wrap your section content inside a .container or .container-fluid.
Let's dive into it and see other possibilities.
Background Gray
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
This section has an additional .bg-gray class.
Light Content
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
This section has an additional .text-white and .bg-dark classes.
Primary Color
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
This section has an additional .text-white and .bg-primary classes.
Custom Color
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
This section has an additional .text-white and style="background-color: #00cbce" classes.
Background Image
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
Simply provide a background-image for your section. Don't forget to check our overlays.
Fixed Background Image
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
This section has an additional .bg-fixed class.
Gradient Overlay
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
Include an .overlay element as a child of your section and style it as you want. It'll be a layer between your content and section background.
Granim Overlay
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
The same overlay as the previous example, but with a data-granim="#834d9b,#d04ed6,#1cd8d2,#93edc7". See granim documentation for more info.
Gradient Background
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
This section has an additional .text-white class and style="background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);" attribute.
You can get access to a list of gradient background samples at webgradients.com
Parallax Image
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
Add a data-parallax="path/to/img.jpg" to your section.
Constellation
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
Simply include <canvas class="constellation"></canvas> into your section. See constellation documentation for more possibilities.
Local Video Background
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
Add .section-video class to your section and put a <video> tag as a child of section to display a local video.
Dialog Title
All it harmonics; Such based to pity of and rank people brief three their time and the this the should service employed of by on beginning turn how is back a years phase that the to the might question. So, sides on blocks rattling transformed built he sight there traveler be worn people was in queen have he term city animals drops.
Dialog Title
All it harmonics; Such based to pity of and rank people brief three their time and the this the should service employed of by on beginning turn how is back a years phase that the to the might question. So, sides on blocks rattling transformed built he sight there traveler be worn people was in queen have he term city animals drops.
Parallax Video
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
Include a data-video="mp4:path/to/video.mp4" attribute. You can use data-speed to set parallax speed. It should be a number between -1.0 and 2.0.
YouTube Video Background
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
Include data-video attribute with link to your YouTube video. You can use data-speed="0.5" to have a parallax video background. You can use any other number between -1.0 and 2.0.
Vimeo Video Background
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
Include data-video attribute with link to your Vimeo video. You can use data-speed="0.5" to have a parallax video background as we have for this section. You can use any other number between -1.0 and 2.0.
Overflow Content
This is a sample text inside the header of section. You can use it to provide an introductory sentence to your section content for the visitors of your website.
Stream of images
Add .flex-nowrap to a .row with column larger than 12 in sum. So it only displays the first 12 columns.
