How I do a header with bootstrap

Question

1.00/5 (3 votes)

See more: (untagged)

pre><header class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand display-5" href="#">BrandName</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-md-5 ">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Product</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link ">Contact</a>
        </li>
      </ul>
      <div class="btn ms-auto">
      <a href="##" class="btn btn ms-lg">Login</a>
      <a href="##" class="btn btn-brand ms-lg">JOIN US</a>
  </div>
    </div>
  </div>
</header>

What I have tried:

<header class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand display-5" href="#">BrandName</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-md-5 ">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Product</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link ">Contact</a>
        </li>
      </ul>
      <div class="btn ms-auto">
      <a href="##" class="btn btn ms-lg">Login</a>
      <a href="##" class="btn btn-brand ms-lg">JOIN US</a>
  </div>
    </div>
  </div>
</header>

Posted 13-Jun-23 23:06pm

Eillen Ruvarashe Mutiti

Updated 13-Jun-23 23:38pm

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2023-06-13T23:16:00

Solution 1

You seem to have forgotten to ask a question. So all we can do is point you to the (extensive) Bootstrap documentation:

Get started with Bootstrap · Bootstrap v5.3[^]

Posted 13-Jun-23 23:16pm

Richard Deeming

Comments

Graeme_Grant 14-Jun-23 5:36am

It read more as a rhetorical question than asking for help....

Andre Oosthuizen · Answer 2 · 2023-06-13T23:38:00

As per Richard, no specific question asked, easy enough though to correct. You are almost there with your supplied code, a few pointers -

1. included the necessary Bootstrap CSS and JavaScript files in your HTML head section -

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/js/bootstrap.bundle.min.js"></script>

2. To make sure that Bootstrap's navbar styles, properties and behavior is applied to the header, change -

<header class="navbar navbar-expand-lg bg-body-tertiary">

to a 'nav' element -

<nav class="navbar navbar-expand-lg bg-body-tertiary">

3. Inside the 'button' element with the class 'navbar-toggler', you can add the 'hamburger' icon or any other icon you want to show a collapsible navbar. You can also use Bootstrap's built-in icon classes -

4. To make the navbar collapse(drop down), add the 'data-bs-toggle="collapse"' attribute to the 'button' element and set 'data-bs-target="#navbarNav"'.

Your code will now look like the below. I do however suggest that you read up on the 'Getting started" link provided by Richard to actually understand what teh code do and why -

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand display-5" href="#">BrandName</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-md-5 ">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Product</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
      <div class="btn ms-auto">
        <a href="#" class="btn btn-secondary ms-lg">Login</a>
        <a href="#" class="btn btn-primary ms-lg">JOIN US</a>
      </div>
    </div>
  </div>
</nav>