Framework
Theme
All
380
Charts
14
Charts Section
4
Cards
38
Sidebars
19
Navbars
27
Cards Section
28
Components
27
Profiles Section
8
Projects Section
10
Forms
9
Tables
24
Tables Section
11
Teams Section
8
Typography
24
Headers
30
Contacts Section
9
Testimonials
9
Faq
1
Blogs
11
Contents
10
Stats
4
Authentication
7
Features
16
Teams
5
Call To Actions
9
Logo Areas
3
Contact Us
2
Pricing
4
Bootstrap Headers
Discover 30 Bootstrap Headers available in Loopple
Header Image And Buttons
Carousel
Header 2
Component from
Soft UI Design System
Builder
<header class="draggable mt-4">
<div class="page-header min-vh-75">
<div class="container">
<div class="row">
<div class="col-lg-4 my-auto">
<h1 class="text-gradient text-warning mb-0">Your Desired</h1>
<h1 class="mb-4">Experiences</h1>
<p class="lead">The time is now for it to be okay to be great. For being a bright color. For standing out.</p>
<div class="buttons">
<button type="button" class="btn bg-gradient-warning mt-4">Discover</button>
<button type="button" class="btn text-warning shadow-none mt-4">Read more</button>
</div>
</div>
<div class="col-lg-8 ps-5 pe-0">
<div class="row">
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg shadow mt-0 mt-lg-7" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/desire.jpg" alt="">
</div>
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg shadow" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/chair.jpg" alt="">
<img class="w-100 border-radius-lg shadow mt-4" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/facade.jpg" alt="">
</div>
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg shadow mt-0 mt-lg-5" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/architecture.jpg" alt="">
<img class="w-100 border-radius-lg shadow mt-4" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/baloon.jpg" alt="">
</div>
<div class="col-lg-3 col-6">
<img class="w-100 border-radius-lg shadow mt-3" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/seaside.jpg" alt="">
<img class="w-100 border-radius-lg shadow mt-4" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/medusa.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</header>Header 1
Component from
Soft UI Design System
Builder
<header class="draggable">
<div class="page-header min-vh-75">
<div class="oblique position-absolute top-0 h-100 d-md-block d-none">
<div class="oblique-image bg-cover position-absolute fixed-top ms-auto h-100 z-index-0 ms-n8" style="background-image:url(https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/curved-images/curved11.jpg)"></div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-7 d-flex justify-content-center flex-column">
<h1 class="text-gradient text-primary">Your Work With</h1>
<h1 class="mb-4">Soft Design System</h1>
<p class="lead pe-5 me-5">The time is now for it be okay to be great. People in this world shun people for being nice. </p>
<div class="buttons">
<button type="button" class="btn bg-gradient-primary mt-4">Get Started</button>
<button type="button" class="btn text-primary shadow-none mt-4">Read more</button>
</div>
</div>
</div>
</div>
</div>
</header>
