How to make the first item in a bootstrap 4 nav-pills full width even when justified

I'm running into an issue with the display of nav-pills on mobile devices when I set it to justified. Specifically, when viewing on an iPhone, the tabs are justified but the "It NavTab" pill appears on two lines. Is there a way to have the first nav-pill displayed at full width, and have the last two nav-pills justified underneath the first one? Any advice would be appreciated. Thank you!

<ul class="nav nav-pills nav-justified">
    <li class="nav-item"><a class="nav-link active" href="#">Hello!</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Testing!</a></li>
    <li class="nav-item"><a class="nav-link" href="#">It NavTab</a></li>
</ul>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To achieve this, adjust the width of the first nav-item to 100% and reset its flex-basis, as the .nav-justified class changes the flex-basis of nav-items to 0.

.nav-justified .nav-item .nav-link {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .nav-justified .nav-item:first-child {
    width: 100%;
    flex-basis: auto;
  }
}

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

Check out the Fiddle example: https://jsfiddle.net/aq9Laaew/75802/

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

Two Ajax Requests Simultaneously

I am currently faced with the challenge of handling two requests simultaneously. The first request involves executing a lengthy PHP script that takes 10 minutes to complete (I cannot modify it using JavaScript, so that's not an option). The second ...

javascriptphpjqueryhtmlajax

Customize the position of carousel controls in Bootstrap 4

I currently have a straightforward bootstrap 4 (beta-v2) carousel set up: <div id="carouselSteam" class="carousel slide" data-interval="false"> <div class="carousel-inner"> {% for key, value in results.items %} {% if fo ...

csscarouselbootstrap-4

Obtaining real-time stock information for the website

I am in the process of designing a dynamic homepage that will feature real-time stock charts and a screening function for various indicators. To achieve this, I will need access to live stock data from thousands of companies. It is crucial that this data i ...

javaphpjavascripthtmlstockquotes

The challenge of website sizing issues with window scaling and the overlooked initial-scale value in HTML

After encountering sizing issues on Windows 10 due to default scaling set at 125%, I attempted to replicate the issue by adjusting the Scale on Ubuntu. My attempt to fix the size by modifying the initial-scale value did not yield any results: document.que ...

htmlreactjsmaterial-uiresizeresponsive

Tips for preventing the headers of a table from scrolling

I am currently working on a solution to keep the header of my table fixed in place without scrolling. Despite my limited experience with Bootstrap and React, I have tried exploring older threads on Stack Overflow to find a suitable fix for making the head ...

cssreactjsbootstrap-4fixed-header-tables

Challenges faced when using jQuery UI autocomplete

My code utilizes jQuery UI's autocomplete method on a text box: $(function() { $('#project').autocomplete({ source: function(request, response){response(Object.getOwnPropertyNames(projects))}, minLength: 0, ...

javascriptjqueryhtmljquery-uiautocomplete

Obtain the in-flow position of a DOM element

alert("Incorrect (red): " + document.getElementById("target").getBoundingClientRect().top); alert("Proper (blue): " + document.getElementById("wrapper").getBoundingClientRect().top); #target { transform: translate(20px, -20px) rotateZ(20deg); backgroun ...

javascriptjquerycsspositiontransform

Ways to apply Angular ng-options outside of a select element besides traditional use?

According to the official documentation, ng-options can be used on any element, not limited to just the select tag. This flexibility allows for enhanced customization of the selection UI, such as displaying thumbnail images or additional information beyond ...

javascripthtmlangularjsselection

How to style font display in PHP Select Menu with two different font sizes

Here is the code for my dropdown menu. I'm trying to figure out how to make the text inside the option value have a smaller font size. I attempted using a span tag to adjust the font size, but it didn't work as expected. <select name="met ...

htmlbootstrap-4

How can I ensure that the height of my dropdown menu covers the entire screen without being limited by the page height

I'm trying to adjust a dropdown menu so that it fits perfectly within the screen size, covering the entire height without showing any content beneath or below it. Currently, the menu covers the screen on some pages but scrolls and appears too large du ...

javascripthtmlcss

Placeholder disappears when text color is changed

I have been struggling for 3 hours trying to change the placeholder color to graytext, but it's just not working. Here is the code I've been using: <div class="form-group"> <label for="email">Email:</label ...

htmlcssbootstrap-4

Struggles with arranging HTML header components

I've been attempting to insert a Twitter logo into the header of my website (which is styled using Bootstrap CSS), but unfortunately, it's causing some alignment issues. My initial goal was to position them next to each other, however, they ended ...

csshtmltwitter-bootstrapalignment

Ensure your HTML5 videos open in fullscreen mode automatically

I managed to trigger a video to play in fullscreen mode when certain events occur, such as a click or keypress, by using the HTML 5 video tag and jQuery. However, I am now looking for a way to have the video automatically open in fullscreen mode when the p ...

javascriptjqueryhtmlvideohtml5-video

The agreement button is unclickable for the bot due to a selenium element interaction issue

<input id="agreement-input-mobile" class="agreement-input" type="checkbox" name="agreement" aria-describedby="agreement-content"> When attempting to automate a specific task, I encounter an issue whe ...

pythonhtmlselenium

Is it possible to use multiple versions of Bootstrap on a single webpage?

My goal is to incorporate Bootstrap into a page that already has both an old version (version 3) and a new version (version 4) of Bootstrap, but I am facing JavaScript conflicts. I am trying to embed it on a third-party site over which I have no control. ...

jquerytwitter-bootstrap-3bootstrap-4

When I hover over one menu item, it interferes with my CSS transitions because the other menu items are hidden

I've been attempting to create a menu with very specific behavior: 1) Submenu transitions in when its corresponding menu item is hovered over 2) Submenu remains visible for a moment after moving the mouse away before transitioning out 3) If another me ...

jqueryhtmlcss

Is there a way to update the styling of specific sections of an input field as the user enters text in React?

Just like in most markdown editors, I am looking to enable the ability to modify parts of an input field as the user enters text. For instance: When the user types "_above_", as soon as the second underscore is typed, the text should be styled accordingly ...

javascripthtmlcssreactjs

What are the various methods for incorporating icons and logos into website design?

Can anyone provide insights on the quality of logos and icons used in professional websites? I often create logos and icons using Illustrator, but when comparing them to icons on websites like those shown in the provided image and links, mine appear blurry ...

htmlcssimagegraphicsweb

Adjust the size of an iframe to perfectly fit inside a different webpage

Can someone help me with resizing an iframe that I want to add from one page of my site to another? I've managed to include the iframe using div and specified a portion for it, but now I need to make the entire webpage within the iframe fit onto the n ...

javascriptjqueryhtmlcssiframe

State change shows the previous and current values simultaneously

I've been working on updating the values of initUsers on the DOM. The initial state values work fine, but when I try to update initUsers, it displays different values than expected. Essentially, entriesNum receives a number as an event and changes th ...

javascripthtmlcssreactjsjsx