"Utilize Bootstrap Flexbox for centering and aligning

I'm having trouble centering my navigation items and positioning my button at the end. I was able to move the button to the end, but I can't seem to figure out how to center the items and brand. Any assistance would be greatly appreciated!

<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c2cfcfd4d3d4d2c1d0e0958e918e93">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <title>DOC</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Services</a>
          </li>

          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">The team</a>
          </li>

          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Contact Us</a>
          </li>
        </ul>
        <div class="d-flex justify-content-center">
          <button class="btn btn-outline-success" type="submit">Login</button>
        </div>
      </div>
    </div>
  </nav>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294b46465d5a5d5b4859691c0718071a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

htmlcssbootstrap-5

Answer №1

To achieve the desired layout, you cannot use a single flexbox, but nesting two flexboxes can give you the result

In this code snippet, I utilized div.collapse as the first flexbox and ul.navbar-nav as the second one

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse justify-content-between navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav w-100 justify-content-center mb-2 mb-lg-0">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Services</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" aria-current="page" href="#">The team</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" aria-current="page" href="#">Contact Us</a>
            </li>
        </ul>
        <div class="d-flex">
            <button class="btn btn-outline-success" type="submit">Login</button>
        </div>
    </div>
</div>

If you would like to see it in action, check out this live demo link below. Feel free to reach out if you have any other questions or inquiries

https://jsfiddle.net/mahdiar_mansouri/fohgr7ew/7/

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

AngularJS: Issue with ngChange not being triggered from directive

A Summary of the Issue at Hand I've created a directive that dynamically displays a list of checkboxes. The directive has a parameter named options, which should be an array structured like this in order for the checkboxes to display correctly: var ...

javascripthtmlangularjsangularjs-directivefrontend

Implementing a Scroll Bar within a Stack Component in Material UI

I've developed a component and now I'm looking to enable scrolling when it expands beyond the screen width <Stack direction="row"> <Stack gap={1} overflow="auto"> {fields.map((el, i) => ( ...

cssreactjsnext.jsmaterial-ui

Incorporate props within the CSS template string of Emotion for enhanced styling flexibility

I am currently in the process of transitioning my design system from styled-components to emotion. Within styled-components, the following syntax is considered valid: export interface AvatarProps { // ... shape: AvatarShape; size: AvatarSize; } con ...

cssreactjsstyled-componentsemotion

Is it possible to submit a select menu without using a submit button within a loop?

I'm having an issue with my code that submits a form when an option in a select box is clicked. The problem arises when I try to put it inside a loop, as it stops working. Can anyone assist me with this? Below is the code snippet causing trouble: &l ...

javascriptphphtml

Obtain the Encoded Data

Unfortunately, I do not have control over domain.com. However, I am able to provide a redirect URL parameter like the one shown below: www.domain.com?retUrl=www.example.com%3Fparameter%3Dvalue Following the provision of retURL (www.example.com?parameter= ...

javascripthtmlsalesforceapex-codeurldecode

How to implement pagination for JSON response data

I am currently developing an application that requires making a call to a URL in order to retrieve a JSON response. To handle the large amount of data received, I am utilizing Handlebars.js to create list items and then appending them to a unordered list ( ...

javascriptjqueryjsonhtmlhandlebars.js

Wrapping is disabled for all elements within the container div that contains three additional div elements

I am trying to prevent one of the three divs inside a fixed top navbar container from sliding underneath another, causing the navbar to become taller. The code below is using Bootstrap and the issue is with the navbar-header div sliding underneath the he ...

csshtmltwitter-bootstrap

Troubleshooting problems with printing HTML divs and page breaks caused by using float and position styles

Look at this class: .divDutySlip { width: 90mm; min-height: 120mm; padding: 2mm; /*float:left; position: relative; */ margin: 2mm; border: 1px solid #000000; page-break-inside: avoid; } I've modified two styles. Dis ...

htmlcsspage-break-inside

Adjust the position of the IMG to the left side

Struggling with some code and need some assistance: <script> function run() { document.getElementById("srt").value = document.getElementById("Ultra").value; } </script> <script> function ru ...

javascripthtmlselectalignment

Unable to pass value through form submission

Having some trouble displaying data from an API on my HTML page. The function works fine when I run it in the console. <body> <div> <form> <input type="text" id="search" placeholder="Enter person& ...

javascripthtml

How can you use PHP to dynamically create a table with custom row sizes?

Trying to brainstorm a simple way to generate an HTML table with rowspans using PHP. Ideally, I want it to resemble the following structure, with each number representing the cell's rowspan: Upon observation, I've identified a potential pattern ...

phphtmlhtml-table

What is the best way to continuously add items to a div until their heights are equal?

In my layout, I have two divs positioned next to each other. Typically, the left div displays n+2 items while the right div displays n items. The value of n changes depending on the category and is already set. However, there are instances where certain ...

javascriptjquerycssajax

`Implementing a dynamic list with image and button using Bootstrap 5`

I've been exploring ways to create a container with 4 images aligned next to each other, accompanied by a button beneath each image. My goal is for the layout to be responsive, meaning that as the screen size adjusts, the elements inside should also a ...

htmlcssimagebootstrap-5

Is there a way to enable scroll on v-col?

I'm working on a layout that has specific requirements: The grey container should cover the entire viewport without exceeding it The green v-row should occupy the grey container entirely v-col 1 should utilize all available space and add a scrollbar ...

cssvue.jsflexboxvuetify.jsvuetifyjs3

Concealing Components using Angular's ng-change Feature

I need help displaying or hiding an element in a form using ng-change or any other method you suggest. Here is the HTML snippet I am working with: <div ng-app ng-controller="Controller"> <select ng-model="myDropDown" ng-change="changeState( ...

javascripthtmlangularjs

How can you extract the text associated with the chosen value in a dropdown list implemented in JavaScript?

Hello, I've been having difficulty extracting the value from a dropdown list created using the FacetWP plugin. Despite extensive research and numerous attempts using various methods to retrieve the text value from the list, I have not been successful. ...

javascriptjqueryhtmlajaxdropdown

Can someone assist me with updating the image source for it to display correctly within the div element?

I am currently working on a code that displays the URL (data-owner_logo) in my div after indexing JSON. Rather than just displaying the URL string, I want the actual logo image to appear in the div: $('a').on('click', function () { ...

htmljsonimageurl

Show or hide side menu depending on when a div reaches the top of the

I have a side menu that opens when a specific div reaches the top of the window. The menu includes a toggle button for opening and closing it. However, I am encountering an issue where the script keeps closing the menu on scroll even after manually openi ...

javascripthtmljquerycss

Content positioned to the left with a clickable button aligned to the right all in one row

Can someone please assist me with this dilemma? I am trying to align text and a button on the same line, with the text on the left side and the button on the right. <div style="display: inline-block;"> <h2>Welcome ${faculty.getFirstName()} ...

htmljsp

Use the .replace() method to eliminate all content on the page except for the table

Extracting a table from a page that has been loaded through .ajax() in queue.htm has proven to be challenging. I am attempting to utilize .replace(regex) in order to isolate the specific table needed, but the process is unfamiliar to me. $j.ajax({ ...

javascriptjqueryhtmlregexreplace