Bootstrap flex-grow-0 class fails to achieve it's purpose in my navbar

user_15888796 0
Viewed 36

I have a navbar for my webpage which looks currently like this

Image example of code output

Now the code which I wrote for the same is:

<nav class="navbar navbar-expand-sm fixed-top bg-white">
  <div class="container my-2">
    <a href="/" class="navbar-brand text-dark font-weight-bold">Rakshit Deshmukh</a>

    <button class="btn btn-outline-info ml-auto">Contact Me</button>

    <button class="navbar-toggler" data-toggle="collapse" data-target="#collapseNav">
      <span class="fas fa-bars text-dark"></span>
    </button>

    <div class="collapse navbar-collapse flex-grow-0" id="collapseNav">
      <div class="navbar-nav">
        <a href="#" class="nav-item nav-link text-dark h6 mx-3">Blogs</a>
      </div>
    </div>
  </div>
</nav>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

For the div with ID collapseNav, I went to Inspect Element, and even with the class of flex-grow-0 present, the inspect element said that the flex-grow value was 1. Please help me with where I went wrong!

bootstrap-4 css html
1 Answers

The issue was with the CDN - I was using a wrong CDN, it seems.

    <nav class="navbar navbar-expand-sm fixed-top bg-white">
      <div class="container my-2">
        <a href="/" class="navbar-brand text-dark font-weight-bold">Rakshit Deshmukh</a>

        <button class="btn btn-outline-info ml-auto">Contact Me</button>

        <button class="navbar-toggler" data-toggle="collapse" data-target="#collapseNav">
          <span class="fas fa-bars text-dark"></span>
        </button>

        <div class="collapse navbar-collapse flex-grow-0" id="collapseNav">
          <div class="navbar-nav">
            <a href="#" class="nav-item nav-link text-dark h6 mx-3">Blogs</a>
          </div>
        </div>
      </div>
    </nav>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
user_158887960
Related