Having trouble with Bootstrap's justify-content property? The "between" or "mr-auto" options

Having trouble with a simple problem,

1 - Why doesn't it work when I add an independent CSS class to the nav_element and set flex and justify-content: between to create space between the anchor tag and the div?

2 - What is the correct approach in Bootstrap for this?

3 - Do I need to use "d-flex" on the navbar Bootstrap property?

<nav class="navbar navbar-expand-lg navbar-dark bg-dark d-flex w-100">
        <a href="index.html" class="navbar-brand mr-auto">Gb32</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse " id="navbarMenu">
            <ul class="navbar-nav">
                <li class="nav-item navbar-el">
                    <a href="" class="nav-link" id="home__navbar">Home</a>
                </li>
                <li class="nav-item navbar-el">
                    <a href="" class="nav-link" id="about__navbar">About</a>
                </li>
                <li class="nav-item navbar-el">
                    <a href="" class="nav-link" id="skills__navbar">Skills</a>
                </li>
                <li class="nav-item navbar-el">
                    <a href="" class="nav-link" id="history__navbar">History</a>
                </li>
                <li class="nav-item navbar-el">
                    <a href="" class="nav-link" id="contact__navbar">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

Thank you! I will try to provide a working example, but I'm not sure if the resources will remain available.

https://jsfiddle.net/guibrother32/bn1qtfuc/2/

Answer №1

It is important to always utilize the bootstrap classes correctly without making any updates.

To achieve this, make sure to incorporate flex-grow-0 and text-right as shown below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark d-flex w-100">
        <a href="index.html" class="navbar-brand mr-auto">Gb32</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse flex-grow-0" id="navbarMenu"> <!-- here -->
            <ul class="navbar-nav text-right"> <!-- here -->
                <li class="nav-item navbar-el">
                    <a href="" class="nav-link" id="home__navbar">Home</a>
                </li>
                <li class="nav-item navbar-el">
                    <a href="" class="nav-link" id="about__navbar">About</a>
                </li>
                <li class="nav-item navbar-el">
                    <a href="" class="nav-link" id="skills__navbar">Skills</a>
                </li>
                <li class="nav-item navbar-el">
                    <a href="" class="nav-link" id="skills__navbar">History</a>
                </li>
                <li class="nav-item navbar-el">
                    <a href="" class="nav-link" id="contact__navbar">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

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

Increase the size of an icon to span across two rows using Boostrap

I found this snippet of code that I'm working with: <div class="col-sm-3"> <div class="card"> <div class="card-body"> <div class = "ro ...

The local() function in CSS @font-face is limited to finding only the "regular" and "bold" font styles, not others

Recently, I added some new fonts (specifically Roboto) to my Linux Ubuntu PC and wanted to incorporate them into my CSS using the @font-face rule. However, I encountered an issue when specifying different font weights within the src: ; property as shown in ...

What causes bootstrap to fail on smaller screens?

While developing an app using Bootstrap, I encountered an issue where the app was not functioning properly on small screens. Everything worked perfectly on larger screens, such as a PC browser, but on a mobile browser, none of the tabs would open. When I t ...

PHP query string parameter

Within the index.php file, I am looking to add a language selection option. Here is the code snippet I have: <?php if( isset( $_GET['target'] ) ) $target = $_GET['target']; else $target = "productie"; if ( isset( ...

The links are displaying on separate lines instead of being inline

There is a tags section on the blog detail page. The html code for it is as follows: <td class="tags"> <a href="">tag1></a>, <a href="">tag2</a> </td> However, the tags are appearing on separate lines instead of in ...

Customize the MUI Slider Component with unique colored thumbs

Check out MUI's slider component at this link. I'm using it to let users select a value range with two thumbs. You can find the documentation for MUI's multi-thumb slider here. If you want to customize the style of the slider thumb, visit ...

Is there a way to transfer the selected item's id from the dropdown to the Django form action URL?

Issue My problem is that I need to pass the ID from the selected transaction item in the dropdown to the form action URL 'cart_add'. I have successfully retrieved the ID from the selected dropdown value, but I am struggling to pass this ID to the ...

What is the reason for the input type number in the <input> field being passed as a string?

I am currently developing a straightforward component that allows the user to input the balance they wish to add. Here is the template used for taking input from the user: <h3>Add Balance:</h3> <input #payment type="number"> < ...

Responsive design of HTML forms

I'm curious about the technology or concept behind Google's animations on their forms. I'm interested in incorporating it into my personal project. The use of radio buttons, checkboxes, and placeholders is particularly appealing. Is there ...

Guide on aligning icons to the right within Bootstrap 4 dropdown elements with the help of CSS flexbox

Is there a way to create the menu below using Bootstrap 4 so that the icon on the right always stays visible, while the text is automatically truncated with an ellipsis (...) when it overflows? <li class="nav-item dropdown"> <a href='#&a ...

What is the best way to enlarge an element when scrolling downwards within the element?

I am looking to create a div that dynamically adjusts its height based on the user's scrolling behavior. The goal is for the div to expand to the very top as the user scrolls downward, and stop when it reaches 70% of the container/parent element. Is t ...

Why is my JQuery code refusing to function even though I have coded it correctly?

Encountering an issue with the carousel functionality. The button is supposed to switch between play and pause, triggering the carousel accordingly. However, upon clicking the button, it seems to switch too quickly without properly pausing or playing the c ...

Divergent display of WordPress form input CSS between Firefox and Chrome

Trying to create an email opt-in box using Wordpress with a pre-installed theme. The box appears correctly in Firefox but is displaying incorrectly in Chrome. Issues include no padding in the text fields, different font colors, and extra padding above and ...

HTML elements within the parent are seemingly enlarged compared to the parent element

I'm currently working on a project for an angular 2 recipe application, and I've encountered an issue with one of my HTML elements. The list items within the unordered list (which contain checkboxes) appear to be larger than the parent UL element ...

Tips for managing a fixed-positioned element during scrolling and zooming events

I have a situation where I need a fixed-position element to stay at the top-right corner of the viewport. Here is the HTML code: <div class = "header"> <p>This heading has an absolute position</p> </div> And here is the CSS: .he ...

Is it possible to modify an HTML element when hovering over it in an ASP.Net page?

Is there a way to use jQuery to show the child span text - SomeClassChild3 string when hovering over the parent div - SomeClassParent in an aspx page? Here is the JavaScript section of the code: function ShowDiv(Somedata){ for(var v in Somedata){ va ...

Troubleshooting Guide: Resolving the Error Message 'ControlContainerAngular' Provider Not Found in Your Angular App

Incorporating bootstrap-4 into my angular7 application for design purposes. <nav class="navbar navbar-light bg-light"> <form class="form-inline"> <div class="input-group"> <div class="inp ...

Don't forget to preserve the hover state of divs even after refreshing

I recently added a navigation bar that expands in width upon hovering over it. For an illustration, check out this example: http://jsfiddle.net/Gsj27/822/ However, I encountered an issue when clicking on a button within the hover effect area. After load ...

Various height divs are arranged in two columns and float accordingly

My goal is to have two columns that stack divs of varying heights in the order they appear. These divs are created dynamically, causing some challenges with alignment when floated at 50% width. For example, div #4 may end up being significantly taller tha ...

What are some techniques I can use to ensure my image grid is responsive in html/css?

If you want to check out the website, you can visit . The main goal is to create an image grid for a portfolio. It appears really nice on a 1080p screen, but anything below that seems messy and unorganized. Any assistance or suggestions on how to improve ...