What is the best way to create child elements that are each 50% wide and positioned next to each other in a flex-direction column

I'm utilizing bootstrap 4 with .navbar-nav.

For a complete live demo, check out the codeply link here:

When the .navbar-nav switches to mobile collapsed mode at the designated breakpoint,

The following styles are applied, resulting in a nicely stacked list of navbar buttons.

display: flex;
flex-direction: column;

However, I want to control the width of the last two child elements .nav-item and have them appear side by side.

Is it possible to achieve this using flexbox?

Presently, this is how the navigation looks...

https://i.sstatic.net/lQth1.png

This is how I want the last two items to be displayed...

https://i.sstatic.net/o6lJO.png

I've assigned the last 2 items with the classes .nav-account, so I just need to add some CSS like this...

.nav-account {
   width: 50%;
   ...
}

To make the last 2 items 50% wide and inline with each other.

Complete code snippet provided below and also available here:

<ul class="navbar-nav flex-lg-grow-1 text-center text-lg-right">
    <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">FAQ's</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
    </li>
    <li class="nav-item nav-account ml-lg-auto">
        <a class="nav-link" href="https://dev.thesweetpeople.co/wp-login.php?redirect_to=https%3A%2F%2Fdev.thesweetpeople.co%2Fprofile">Log in</a>
    </li>

    <li class="nav-item nav-account">
        <a class="nav-link" href="/register"><i class="fas fa-fw fa-user-plus color-sweets"></i> Register</a>
    </li>
</ul>
htmlcsstwitter-bootstrapflexboxbootstrap-4

Answer №1

Try implementing the following suggestions:

  1. Add classes flex-wrap flex-row to your ul (this will set the flex-direction to always be row and enable flex-wrap)
  2. Apply col-12 col-lg-auto to all nav-items except the last two (this will set 100% flex-basis in mobile view)
  3. Use col-6 col-lg-auto for the last two nav-items (to set 50% flex-basis for the last two items in mobile view)

Check out the demo below:

.navbar {
  opacity: 1;
  transition: opacity 0.5s ease;
}
.navbar-hide {
  pointer-events: none;
  opacity: 0;
}
.nav-item {
  border: 1px solid red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Flex direction</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav flex-lg-grow-1 text-center text-lg-right flex-wrap flex-row">
      <li class="nav-item col-12 col-lg-auto active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item col-12 col-lg-auto">
        <a class="nav-link" href="#">Products</a>
      </li>
      <li class="nav-item col-12 col-lg-auto">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item col-12 col-lg-auto">
        <a class="nav-link" href="#">FAQ's</a>
      </li>
      <li class="nav-item col-12 col-lg-auto">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item nav-account ml-lg-auto col-6 col-lg-auto">
        <a class="nav-link" href="https://dev.thesweetpeople.co/wp-login.php?redirect_to=https%3A%2F%2Fdev.thesweetpeople.co%2Fprofile">Log in</a>
      </li>
      <li class="nav-item nav-account col-6 col-lg-auto">
        <a class="nav-link" href="/register"><i class="fas fa-fw fa-user-plus color-sweets"></i> Register</a>
      </li>
    </ul>
  </div>
</nav>
<main role="main" class="container">
  <div class="jumbotron">
    <h1>Flex direction</h1>
    <p class="lead">I have a question, while in mobile mode, can I make the <strong>register</strong> and <strong>login</strong> buttons both 50% wide and placed side by side using flexbox?</p>
    <a class="btn btn-lg btn-primary" href="https://getbootstrap.com/docs/4.3/utilities/flex/" role="button">View flex docs »</a>
  </div>
</main>

Answer №2

To solve the issue, consider enclosing the last two <li> items in a new element:

<div class="ml-lg-auto d-inline-flex">
  ...
</div>

Then, apply the classes w-50 to both of them.

For instance:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">

  <a class="navbar-brand" href="#">Flex direction</a>
  
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">>
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav flex-lg-grow-1 text-center text-lg-right">
      <li class="nav-item active border">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">Products</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">FAQ's</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">Contact</a>
      </li>

      <div class="ml-lg-auto d-inline-flex">
        <li class="nav-item nav-account w-50 border">
          <a class="nav-link" href="#">Log in</a>
        </li>
        <li class="nav-item nav-account w-50 border">
          <a class="nav-link" href="/register">
            <i class="fas fa-fw fa-user-plus color-sweets"></i>
            Register
          </a>
        </li>
      </div>
    </ul>

  </div>
</nav>

Another approach is to nest the <li> and <ul> items to avoid using invalid markup, as suggested in the comments:

Alternate version:

.custom-ul {
    list-style:none;
    padding: 0px;
    margin: 0px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">

  <a class="navbar-brand" href="#">Flex direction</a>
  
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav flex-lg-grow-1 text-center text-lg-right">
      <li class="nav-item active border">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">Products</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">FAQ's</a>
      </li>
      <li class="nav-item border">
        <a class="nav-link" href="#">Contact</a>
      </li>

      <li class="ml-lg-auto">
        <ul class="custom-ul d-flex">
          <li class="nav-item nav-account w-50 border">
            <a class="nav-link" href="#">Log in</a>
          </li>
          <li class="nav-item nav-account w-50 border">
            <a class="nav-link" href="/register">
              <i class="fas fa-fw fa-user-plus color-sweets"></i>
              Register
            </a>
          </li>
        </ul>
      </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

Harnessing the power of lazysizes with WebP

I've been working on optimizing our site through the Google Lighthouse audit, and it's clear that images are a major focus. Right now, my main goal is to address the issue of 'Deter offscreen images' highlighted in the audit. To tackle ...

javascripthtmllazy-loadingwebplighthouse

What is the best way to apply styles to a particular ul element without impacting the appearance of other lists on

I am facing an issue with the styling of ul elements on my web page. The latest ul I added is affecting the appearance of other lists on the page. How can I ensure that the styling for this ul only affects this specific one? I have attempted multiple solut ...

htmlcsshtml-lists

The validation process fails when the button is clicked for the second time

When adding a username and email to the userlist, I am able to validate the email on initial page load. However, if I try to enter an invalid email for the second time and click the add button, it does not work. <form id="myform"> <h2>Ad ...

javascriptjqueryhtmlemail

I am interested in incorporating jQuery into my React development project

I'm trying to implement jQuery in React. I have an input field in my project that I am using to create a match event with 'this.state.value'. When the content of the input field matches, I want the borders to turn green and red if they do no ...

javascripthtmljquerycssreactjs

Flipping a combination of CSS 3 and JavaScript cards will cause them to flip all together in unison

Hello! I came across a really cool card flip code that is IE compatible. I made some modifications to it and got it working, but there's one problem - instead of flipping the selected card, it flips all the cards. I tried modifying the JavaScript code ...

javascriptjqueryhtmlcsstransition

Bootstrap's Vertical Margin Concept

Is there a way to include margin or a line similar to the image below? [![Please refer to the accompanying image][1]][1] ...

htmlcsstwitter-bootstrap

Adjusting the input label to be aligned inside the input box and positioned to the right side

I am currently working on aligning my input label inside the input box and positioning it to float right. The input boxes I am using have been extended from b4. Currently, this is how it appears (see arrow for desired alignment): https://i.stack.imgur.co ...

htmlcssvue.js

Create a division element with an image that can be dragged around

I'm having trouble making a div element draggable. Inside the div, there is an img and some text that acts as a label for the image. The issue is that when I begin dragging by clicking on the img, it's the img that gets dragged instead of the par ...

csshtmldrag-and-dropdraggable

Freshening up the data source in a Bootstrap Typeahead using JavaScript

I'm trying to create a dropdown menu that displays options from an array stored in a file called companyinfo.js, which I retrieve using ajax. The dropDownList() function is called when the page loads. function dropDownList (evt) { console.log("dr ...

javascriptajaxtwitter-bootstrap

The Bootstrap carousel is unable to handle the .each function from jQuery when called within

i’m experiencing an issue with the repeat functionality not working. How can this be resolved? The console.log in componentDidMount is not appearing. renderCarouselItem() { console.log('(3) testing carousel before rendering'); return ...

reactjsbootstrap-4

Can an excess of CSS impact the speed and performance of a website?

After conducting thorough research on this specific topic, I was unable to locate the precise answer that I require. For instance, there are numerous divs within my project that necessitate a border. One approach is to create a distinct CSS class such as ...

htmlcss

How to adjust the size of a div based on its child content, including margins

I have encountered an issue with animating the height of a configurable content div, which typically contains paragraphs of text. Shown below is my animation (slowly paced), starting from a height of 0 and expanding to its calculated height based on its c ...

htmlcss

Having trouble making the swing effect trigger on mouseover but not on page load

I am trying to achieve a swinging effect on mouseover only, not on page load. Below is the JS code I have: (function swing() { var ang = 20, dAng = 10, ddAng = .5, dir = 1, box = document.getElementById("box"); (function setAng(ang){ ...

javascriptjqueryhtml

When displaying text pulled from MYSQL in a div, white space is eliminated

I'm attempting to display a string that contains both spaces and line breaks. When I output the string as a value in an input field, the spaces are displayed correctly. <textarea rows={15} value={content} /> However, when I try to display ...

javascripthtmlreactjs

Building a basic music player with the <audio> element and JavaScript / jQuery

I am new to Javascript and jQuery, and this is my first time posting a question here. I have been trying to create custom functions for the HTML5 audio tag by following tutorials online. Despite my efforts, I cannot seem to get it working. Although I can m ...

javascriptjqueryhtmlaudiocustom-controls

Drawbacks of adjusting design according to screen width via javascript detection

When creating a website, I want it to be compatible with the most common screen resolutions. Here is my proposed method for achieving this: -Develop CSS classes tailored to each screen resolution, specifying properties such as width and position. -Write ...

javascripthtmlcss

Using Python and Selenium to upload files without utilizing an 'input' HTML element

Struggling to upload a file for Python Selenium? The send_keys method seems to be causing an issue as it returns a 'Message: element not interactable' error. This is likely because the upload button lacks an 'input' in its html code, pr ...

pythonhtmlseleniumfile-upload

Storing HTML in a Database

I've encountered an issue while attempting to parse through an HTML file that consists solely of tags. I wrote a function to extract the content between these tags, and while I'm able to display it on the page without any problems, inserting th ...

phphtml

When CSS width:auto expands beyond its intended length

I'm experiencing an issue when I set the width to auto, the div expands to full length rather than adjusting to the width of the inner divs. Here is the HTML code: <div class="vidswraper"> <div> <div class="videoimage"> <img src ...

htmlcss

How can I alter the display of table rows and columns using responsive design techniques?

Currently utilizing bootstrap, I have a drinks menu displayed in the following layout when viewed in Firefox. The mobile view of this menu is functioning properly. However, I am encountering issues with the desktop view as the columns are not aligning cor ...

htmlcssbootstrap-5