Bootstrap 5 Creative Header Template

Here’s how you can build a stunning Bootstrap 5 Creative Header Template to give your website a unique and modern look. This tutorial walks you through the HTML, CSS, and JavaScript code needed to create a visually appealing and interactive header.

Adding Header Assets

First, we need to include Bootstrap’s CSS in the “ section of your HTML file. This will provide the foundational styling and grid system.

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css'>

Creating the HTML Structure

Next, construct the basic HTML structure for the header. This includes the navigation bar and the two side sections that will form the creative part of the header.

    <nav>
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-6">
                    <div class="logo d-flex justify-content-start">
                        <a href="#">Joourney 
                            <!-- <i class="ri-moon-clear-line"></i> -->
                        </a>
                    </div>
                </div>
                <div class="col-md-8 col-6 d-flex justify-content-end p-0 align-items-center">
                    <div class="menu-wrapper">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Manifesto</a></li>
                            <li><a href="#">Contacts</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <div id="leftSide" class="side">
        <h2 class="title">
            Let’s begin<br> the <span class="fancy">adventure</span> 🚀
        </h2>
    </div>

    <div id="rightSide" class="side">
        <h2 class="title">
            Let’s begin<br> the <span class="fancy">experience</span> 🪐
        </h2>
    </div>

Styling with CSS

Now, let’s add the CSS styles to visually enhance the header. This includes setting the colors, fonts, and layout properties to create the desired aesthetic.

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap");
body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricprecision;
  text-rendering: optimizeLegibility;
  text-align: center;
  font-family: "DM Sans", sans-serif;
}

.side {
  width: 100vw;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: absolute;
}
.side .title {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 8vw;
  margin: 0 15vw;
  width: 70vw;
}

#leftSide {
  background-color: #DC3535;
  color: #3B3486;
  z-index: 2;
}
#leftSide .fancy {
  color: #f4d35e;
}

#rightSide {
  background-color: #3B3486;
  color: #DC3535;
}
#rightSide .fancy {
  color: #f4d35e;
}

nav {
  padding: 15px 0;
  margin-bottom: -78px;
  position: relative;
  z-index: 30;
}
nav .logo a {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 32px;
  color: #fff;
  text-decoration: none;
}
nav .logo i {
  font-size: 24px;
  margin-bottom: -5px;
}
nav .menu-wrapper {
  display: flex;
  justify-content: end;
  align-items: center;
}
nav .menu-wrapper ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: end;
  align-items: center;
}
nav .menu-wrapper ul li {
  margin-left: 2vw;
}
nav .menu-wrapper ul li a {
  font-family: "DM Sans", sans-serif;
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.102);
  border-radius: 5em;
  font-weight: 400;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}
nav .menu-wrapper ul li a:hover {
  background-color: rgba(255, 255, 255, 0);
}

Adding Interactivity with JavaScript

Finally, we’ll add JavaScript to make the header interactive. This script will control the movement of the left side section based on the user’s mouse or touch input.

const left  = document.getElementById("leftSide");

const handleOnMove = e => {
    const p = e.clientX / window.innerWidth * 100;

    left.style.width = `${p}%`;
}

document.onmousemove = e => handleOnMove (e);
document.ontouchmove = e => handleOnMove (e.touches[0]);

With these steps, you should now have a working Bootstrap Creative Header Template. Experiment with different colors, fonts, and animations to customize the header to your specific needs and preferences.