'How to align the brand to the left in Bootstrap 5?

Brand name not aligning to left in Bootstrap 5:

.navbar-nav>li {
  padding-bottom: 2px;
  font-size: 25px;
  display: block;
}

nav {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
  width: 100%;
}

.container {
  text-align: center;
  padding-top: 35px;
}

nav img {
  padding-left: 15px;
  opacity: 0.75;
}

@media screen and (max-width:379px) {
  nav img {
    content: center;
  }
}

@media screen and (min-width:1140px) {
  .navbar-nav {
    padding-right: 26px;
  }
}

nav .h3-brand {
  color: black;
  font-size: 30px;
  opacity: 0.75;
  box-align: left;
  align-items: left !important;
  align-items: start;
}

@media screen and (max-width:420px) {
  .navbarbutton {
    margin: auto;
  }
}

@media screen and (min-width:420px),
screen and (max-width:1140px) {}

@media screen and (min-width:421) {
  .navbarbutton {
    margin: 0px;
    margin-right: 30px;
  }
}

.navbar-toggler {
  opacity: 0.75;
  border: none;
}

.navbar-toggler:hover {
  opacity: 2;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
}
<!doctype html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <title>Company</title>
  <link rel="stylesheet" href="Index.css">
</head>

<body>
  <nav class="navbar sticky-top navbar-expand-xl navbar-light bg-light ">
    <a href="#" class="navbar-brand">
      <img class="rounded" src="assets/company-name.png" alt="Company Logo" />
    </a>
    <h3 class="h3-brand navbar-brand">Company</h3>

    <button class="navbar-toggler style: margin-right:30px; navbarbutton" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
      </button>

    <div class="collapse navbar-collapse" id="toggleMobileMenu">
      <ul class="row flex-row flex-wrap navbar-nav ms-auto text-center">

        <li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Über uns</a></li>
        <li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">FAQ</a>
          <li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Preise</a></li>
          <li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Kontakt</a></li>
          <li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Impressum</a></li>

      </ul>

    </div>

  </nav>

  <div class="container">

  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

I tried the following rules, but none worked:

  • text-align: left;
  • align-content: left;
  • align-items: left;
  • float: left;
htmlcss


Solution 1:[1]

Change the Compagny tag to span, put a "h3" class on it to keep font-size and put this span IN the link of your brand. It is not in left because it is not in the link tag.

And no need a navbar-brand class on span Company.

<a href="#" class="navbar-brand">
  <img class="rounded" src="assets/company-name.png" alt="Company Logo" />
  <span class="h3">Company</span>
</a>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions