Bootstrap Headers

Discover 30 Bootstrap Headers available in Loopple

Header Profile

Component from Argon Dashboard Builder
<div class="header d-flex align-items-center rounded-lg removable draggable" style="min-height: 500px; background-image: url(https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/profile-cover.jpg); background-size: cover; background-position: center top;">
    <!-- Mask -->
    <span class="mask bg-gradient-default rounded-lg opacity-8"></span>
    <!-- Header container -->
    <div class="container-fluid d-flex align-items-center">
        <div class="row">
            <div class="col-lg-7 col-md-10">
            <h1 class="display-2 text-white">Hello Jesse</h1>
            <p class="text-white mt-0 mb-5">This is your profile page. You can see the progress you have made with your work and manage your projects or assigned tasks</p>
            <a href="#!" class="btn btn-neutral">Edit profile</a>
            </div>
        </div>
    </div>
</div>

Header Ecommerce

Component from Argon Dashboard Builder

Header Image And Buttons

Component from Asteria Dashboard Builder

Carousel

Component from Asteria Dashboard Builder

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>

Header 13

Header 12

Header 4

Header 3