The Bootstrap flex-grow-0 class did not work as intended in my navigation bar

My webpage has a navbar that currently looks like this

Click here for an image example of the code output

This is the code I have written for the navbar:

<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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afcdc0c0dbdcdbddcedfef9b8199819f">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73111c1c07000701120333475d455d43">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

While inspecting the div with ID collapseNav, I noticed that even though it had the class of flex-grow-0, the inspect element showed the flex-grow value as 1. Can anyone help me figure out where I went wrong?

htmlcssbootstrap-4

Answer №1

It turns out that the issue stemmed from using the wrong CDN.

    <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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73111c1c07000701120333475d455d43">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37555858434443455647770319011907">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues arise when attempting to display Sphinx documentation containing SVG images on Internet Explorer 11

I have been working on building Sphinx documentation and incorporating a UML diagram generated as an SVG image using graphviz. The SVG file is embedded in the auto-generated HTML template from Sphinx. While the SVG displays perfectly fine on Chrome and Fi ...

htmlsvginternet-explorer-11python-sphinxgraphviz

Tips for utilizing the onload function in jquery

Having an issue where I have a button that I want to set time, and in order for the function to run correctly, it needs to be defined on the body element. This works fine with plain JavaScript, but I am encountering an error when trying to use jQuery. < ...

javascriptjqueryhtml

Avoid repetitive clicking of the button to activate the function

Is there a way to prevent spamming of a button when calling a function? I want the user to only be able to call the function once every second when clicking the button. I have tried using setTimeout but it doesn't seem to work, as it still allows for ...

jqueryhtml

What is the best way to utilize CSS relative positioning for aligning two rows of information on a webpage?

What is the best way to use relative positioning to show two lines of information on an image without the order of information interfering with each other? I want the Files badge to appear at the bottom of the image, with the MusicBrainz and Discogs badge ...

htmlcssbootstrap-4

What is the process for converting plain text into an image tag using the methods ".replace()" and ".html()"?

My goal is to customize this particular answer so that it can transform classic BCCode [img]{url}[/img] into an HTML image. In the code snippet provided, I have successfully implemented something similar with [b]text[/b]. However, when attempting to use [i ...

javascriptjqueryhtmlregexreplace

Injecting sinon js into an application within an iFrame: a step-by-step guide

I am looking to implement ajax requests testing in my application. The application is running within an iframe, and my goal is to have the iframe's wrapper page test the application using sinon (which will send the response). I attempted to include ...

javascriptajaxhtmliframesinon

The issue of Bootstrap dynamic tabs retaining their active state even after switching tabs, leading to elements being stacked

For my university project, I am developing a website that resembles a text editor using Bootstrap as the framework. To create the website menus, dynamic tabs have been utilized. The following is the code snippet I have implemented: <!--Bootstrap ...

javascripthtmlcssbootstrap-5

Tips for aligning the loginStatus login screen in the center

Having an issue centering the login control that appears after selecting login using the loginstatus control. <div id="linkContent"> <asp:LoginStatus ID="LoginStatus2" runat="server" LogoutAction="RedirectToLoginPage" /> </div& ...

asp.netcssauthenticationloginstatus

retrieving a value of an attribute within an AngularJS directive

I have created a directive configModule.directive('iMemoryDiv',function () { return { restrict: 'E', scope: {}, replace: true, templateUrl: '/memoryDiv.html', link: function(scope, el ...

htmlangularjsangularjs-directive

Can a hyperlink be generated by simply inputting the URL once?

As I add numerous links to my website, I can't help but feel like a novice using the <a href>. I want users to see the URL of each link immediately without needing to hover over it first. Right now, I am structuring my links like this: <a h ...

htmlcss

Bootstrap 4 Vertical Timeline Layout Showing Uneven Columns Due to Large Margins

I'm currently working on my very first website and trying to implement a vertical timeline using Bootstrap 4. My goal is to have the timeline bar situated between two columns. However, I'm encountering an issue where I can't align text in th ...

htmlcssbootstrap-4timelinemargins

Adding new rows and columns to a table in Vue using scoped CSS styling

Trying to populate a table with rows and columns programmatically by using this code: addContentToTable(type) { switch (type) { case "row": let numOfColumns = this.$refs.table.rows[0].cells.length; let row = this.$refs.table.insertRow(-1 ...

htmlvue.jshtml-tablevuejs2

Can you assist in resolving this logical problem?

exampleDEMO The code above the link demonstrates how to control input forms based on a button group selection. In this scenario, when a value is inputted on the 'First' Button's side, all input forms with the same name as the button group ...

javascripthtmlangularjs

Animate downwards pointing arrow to rotate 180 degrees upon activation

Is there a way to create a dropdown arrow that rotates when opened? I've experimented with different approaches, such as using CSS methods like .bd-aside .btn[aria-expanded="true"]::before {transform: rotate(90deg);}, along with ::after and ...

htmlcssbootstrap-5

Harnessing the power of JSON within an HTML document to display dynamic data

Check out the JSON data through this link: The JSON file contains information about the weather. I need assistance with incorporating the data from the provided link into my HTML document as I am new to utilizing JSON for this purpose. <html> < ...

javascriptjqueryhtmljson

Creating a structured paragraph using nested labels and v-selects in Vue.js (with Vuetify and Pug)

I am looking to create a paragraph that includes text and options presented in dropdown lists. While I have made some progress, I am facing challenges with the design aspect as it needs to be formatted in a specific manner: Lorem ipsum dolor sit amet, [ D ...

htmlvue.jsvuejs2pugvuetify.js

Creating a bootstrap form with an Image field on the right side

I'm using a bootstrap form with 9 input fields, arranged in groups of 3 fields per row to maintain responsiveness. I'd like to learn how to add an image field on the right side that spans three rows. Please review my code below and provide guidan ...

reactjsbootstrap-4

Show the extracted data on the following web page once it has been cleaned

I am looking to connect a python file with an HTML page using Flask application. On the first page (upload.html), the user is required to select the job field and job title from two dropdown menus. Afterwards, the user needs to upload a file containing a l ...

pythonhtmlpandasflask

Change the location of an html td element with JavaScript

I am currently working on a simple JavaScript car racing game where the cars are represented by HTML table elements. I want to implement functionality where pressing the "e" key moves player one's car and the "d" key moves player two's car. This ...

javascripthtmlcss

Ways to align two columns at the center using CSS

I'm currently facing some challenges centering two columns on my website. Despite my efforts to make adjustments, the result always ends up with the columns positioned to the left (you can view the image). Could you please help me identify what I migh ...

htmlcss