Problem with implementing d-flex in Bootstrap v5.0 navbar

I applied the d-flex and justify-content-between classes to the parent tags of the anchor and div elements, but for some reason it's not working as expected. Can anyone help me understand why?

<nav class="navbar navbar-expand-lg navbar-light bg-light">
          <div class="container d-flex justify-content-between">
            <a class="navbar-brand" href="#">
              <img width="100%" height="50" src="icons/Logo.png">
            </a>
            <div class="collapse navbar-collapse" id="navbarScroll">
              <h1>Right</h2>
            </div>
          </div>
    </nav>
cssflexboxbootstrap-5

Answer №1

If you use the code provided, all you have to do is include justify-content: flex-end in the .navbar-collapse section.

To finalize your code snippet, simply insert the Bootstrap class justify-content-end on the second item on the right-hand side, as illustrated below:

<div class="container d-flex justify-content-between">
    <a class="navbar-brand" href="#">
        <img width="100%" height="50" src="icons/Logo.png">
    </a>
    <div class="collapse navbar-collapse justify-content-end" id="navbarScroll">
        <h1>Right</h1>
    </div>
</div>

View it in action on this codepen link

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

Center the font in the middle of the text field

I'm having a text field with a jQuery hint. How do I align the font to be in the middle? I've attempted using vertical-align: middle but it doesn't seem to work. <style type="text/css"> #name { border: 1px solid #c810ca; heig ...

htmlcssforms

Unusual happenings detected in Magellan Fixed with Foundation 5

I need help creating a product summary sidebar similar to Apple's. I'm using Magellan but it seems to break the page when the width is below 960 pixels. It might be related to the table, but I'm not sure. Any suggestions or assistance would ...

javascriptcssresponsive-designzurb-foundationmagellan

Click a Bootstrap button to navigate to a different section on the current webpage

My button CTA is not redirecting to the second part of the webpage despite using onclick and <a href:"#" methods. The button is supposed to link to either the About section or the accordionFlushExample id, but nothing seems to trigger a response. Any s ...

htmlcssbuttonbootstrap-5

Concealing the Footer on Mobile Websites in Muse UI When the Keyboard Appears

In this project, I am using vue.js along with muse.ui and only incorporating JavaScript and CSS without the jQuery library. Currently, the footer position always ends up on top of the keyboard whenever an input field is focused. Is there a way to ensure th ...

javascripthtmlcssvue.js

Border with curved edges

Having an issue with content boundaries while using CSS rounded corners in Firefox. Here is the code snippet: Code <html> <head> <style> #outter { width: 200px; margin: auto; text-align: cent ...

htmlcssfirefoxrounded-corners

Is there a way to deactivate a JavaScript function on a specific webpage using CSS?

I've implemented a JavaScript function that triggers a pop-up alert whenever a user attempts to navigate away from the site by clicking on an external link: $("a[target='_blank']").click( function() { return confirm('Please don&apo ...

javascriptjqueryhtmlcss

Guide on implementing modals in reactstrap version 9 (compatible with Bootstrap version 5)

Struggling with Reactstrap Modal implementation? Check out the documentation here The documentation mentions a function called noRefCheck(){} which I am unsure how to use Here is an example of how it is used: <div> <Button color="dang ...

reactjsbootstrap-4bootstrap-modalbootstrap-5reactstrap

Creating an inline list with icons aligned using Bootstrap4

I have a list where some words span two lines, but the second line jumps under the icons at the bottom. How can I keep both lines next to the icon? I'm using Bootstrap and chose to use the list-inline class. Maybe using columns for this list would wor ...

htmlcssbootstrap-4

Arranging items in CSS and showing them stacked on top of each other

How can I rearrange the order of id3 to be displayed below id2 instead of on the side using CSS? Here is an example of the HTML and CSS: HTML <div class="main" ></div> <div id="id1">Im in div1</div> <div id="id2">Im in div2 ...

htmlcss

Switch out a visual element for Dropzone.js

During my recent project, I utilized Dropzone.js for image uploads. However, I am now interested in transforming the dropzone area into an actual image. For instance, if there is a "featured image" attached to an article, users should be able to drag and ...

javascriptimagecssimage-uploadingdropzone.js

Struggle with typescript integration with emotion and styled components

Issue Description: I encountered an issue while working with typescript and emotion/styled libraries. When attempting to specify the type of the parent component that wraps a styled component, I faced difficulties. The scenario involves a parent componen ...

cssreactjstypescriptstyled-componentsemotion

How can the front design of Material-UI's Card header be customized?

Currently, I am facing an issue with the Material-UI card header as the background color is affecting the readability of the default font. My aim is to use the typography prop h4 for the header, but I am struggling to achieve this. https://i.stack.imgur.c ...

javascripthtmlcssreactjsmaterial-ui

Tips for adjusting your Navbar from transparent to solid based on screen size changes instead of scrolling

I am seeking assistance in creating a responsive Navbar that transitions from transparent to solid when the screen size changes, such as on a smartphone. I want the Navbar to remain fixed at the top of the page and not move down as I scroll. I tried adding ...

htmlcssbootstrap-4

Parent element with 'overflow: hidden' in CSS is causing child styles to be cropped out

.util-truncate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a { text-decoration: none; } a:focus { box-shadow: 0 0 0 3px blue; text-decoration: underline; } a:focus-visible { outline: 0; } <div ...

javascripthtmlcss

Modify the height of every div after a successful ajax request

I need assistance in reducing the height of a div within an ajax response that has a class called .shorten-post, but I am unsure how to accomplish this task. I specifically want to decrease the height only for those within the ajax response, not throughou ...

javascriptjquerycssajax

When I try to host my Jekyll site on GitHub Pages using my custom domain, the CSS doesn't seem to be rendering at all

Everything looks perfect when I test my site on local host, but once I push it to my GitHub repo, only the HTML appears with no CSS or JavaScript. I've attempted changing my URL in the config.yml file to https://chanvrequebec.com and modifying href="/ ...

htmlcssgithubjekyllgithub-pages

Trouble with center alignment of div in CSS

I attempted to create a centered horizontal menu on my webpage but the 'div align=center' attribute is not functioning correctly. .nav ul { display: block; list-style-type: none; margin: 0; position: absolute; } .nav li { display: in ...

htmlcss

Strategies for avoiding the opening of a new tab when clicking on a link in ReactJs

RenderByTenantFunc({ wp: () => ( <Tooltip id="tooltip-fab" title="Home"> <Button className="home-button"> <a href={ ...

htmlcssreactjs

Is there a way to eliminate overflow on a section of my CSS page without sacrificing the 100vh height?

My professor requested a section in my project to have its height adjusted to the viewport, however this has created a large gap between that section and the rest of my content. How can I remove the overflow and close the gap? <main> <sect ...

htmlcss

I'm looking for the location of Angular Materials' CSS directives. Where can I find them?

Currently, I am using components from https://material.angularjs.org/latest/ for a searcher project. One specific component I am working with is the md-datepicker, and I would like to implement some custom styles on it such as changing the background colo ...

javascriptjquerycssangularjs