Utilizing Bootstrap 4 nav-tabs to maintain layout consistency on smaller mobile screens

Trying to figure out how to make Bootstrap 4 nav tabs fully responsive has been a challenge.

I have included the code below, along with a visual demo of what I am aiming for:

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="container p-4">
    <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">First really long nav</a>
            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Second really long nav</a>
        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Content of the first tab.</div>
        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Content of the second tab.</div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

To ensure the navigation tabs stay in one line, utilize the flex-nowrap class within your nav element.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="container p-4">
    <nav>
        <div class="nav nav-tabs flex-nowrap" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">First really long nav</a>
            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Second really long nav</a>
        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Content of the first tab.</div>
        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Content of the second tab.</div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

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

How do I set up a 5 column layout for the home page and switch to a 4 column layout for category pages in Magento?

Is it possible to display 5 columns of products on the Magento home page and only show 4 columns in the category area, or is this a pre-set parameter that applies platform-wide? ...

phpcssmagento

Spacing placeholder

Is there a way to leave the placeholder text in place while typing and have it extend forward as I type? For example, if I type 100 spaces and then "INX", it should look like this: 100 INX So that as I type "100." the "INX" moves forward, resulting in: ...

javascripthtmljquerycss

I'm attempting to showcase an HTML file by using res.sendFile within the Express framework

As part of my workflow implementation, I have set up a scenario where upon user login, the credentials are sent via Ajax to an Express route for verification. If the user exists, the route responds with a message "authorised" triggering a second Ajax call ...

htmljquerynode.jsajaxexpress

Is there a way to increase the size of the icon without altering the dimensions of the button?

After implementing a code snippet to enable a button to copy the URL to the clipboard, I encountered an issue. Originally, the button displayed the text "copy," which changed to "copied" after clicking on it and reverted back after 2 seconds. However, I d ...

javascripthtmlcssbutton

Looking to learn how to replicate data effortlessly with either javascript or jquery?

I am currently trying to figure out how close I am to successfully cloning this div. Honestly, I am a bit lost at this point and could really use some assistance. Should I consider using jQuery for this task? <div id="question20">20. Details of Chi ...

javascriptjqueryhtml

Choosing an element with JavaScript

var displayedImage = document.querySelector('.displayed-img'); var thumbBar = document.querySelector('.thumb-bar'); btn = document.querySelector('button'); var overlay = document.querySelector('.overlay'); /* Itera ...

javascripthtml

What's the best way to include a div on the right side of my adaptable divs?

I need the "div 1" label to always appear on the right side of the divs, while still maintaining responsiveness. Is there a way to achieve this effectively? Struggling to find a wrapper that meets my responsiveness requirements. #wrapper { width: aut ...

htmlcss

What is the best way to draw a rectangle outline in Vue.js without the need for any additional packages?

I have been attempting to craft a rectangle outline using vueJS, but so far I have not had much success. I am hoping to achieve this using only CSS, but despite my efforts, I have not been able to find a solution. My goal is to create something similar to ...

javascriptcssvue.jsbootstrap-vue

Embed Text inside an HTML Canvas

As someone who is relatively new to working with html canvas, I am having a bit of trouble when it comes to containing text within the canvas area. Specifically, I am pulling text from a textarea and displaying it on the canvas, but it seems to stay as one ...

javascriptjqueryhtmlcanvas

The collapse of HTML elements converging inwards within the Bulma Framework and customized with SASS

Messy Screen Recently delving into the world of Bulma, I decided to take a shot at customizing my CSS. Unfortunately, it seems that after some tweaking, my screen layout has gone haywire. Can anyone shed light on why two elements might refuse to maintain ...

htmlcsssassbulma

Animating the maximum height causes a delay in the performance of other elements

Attempting to adjust the maximum height of a ul. When the max-height property changes (via toggling a class), the height shifts immediately, while the items below the ul maintain the animated height as expected. var expander = $('.skill-expand&apos ...

jquerycssanimationcss-transitions

I would like to terminate the property when processing it on a mobile device

<div class="col-sm-24 embed-responsive"> <iframe width="100%" src="http://www.youtube.com/embed/${item.snippet.resourceId.videoId}"></iframe> </div> .embed-responsive iframe { height: 185px; margin-top: -4%; paddin ...

javascriptjqueryhtmlcss

What is the best way to ensure that the text input in a text area is linked to a particular radio

I have created a form that contains radio buttons. My next goal is to include a text area next to each group of radio buttons. This will allow the user to select an option either by clicking on the radio button or by typing in the corresponding value in t ...

htmlformsradio-buttontextareaentity-relationship

The function is not recognized while executing .mb_YTPlayer();

I'm currently working on creating a webpage with a video background using jquery.mb.YTPlayer, but I'm encountering an issue. I'm seeing an error message that says "Uncaught TypeError: undefined is not a function". Here is the code I a ...

jqueryhtmltwitter-bootstrap

What is the best way to extract a CSS rule using PHP?

Below is an example of the stylesheet I am currently using: #thing { display: none; } I am looking to retrieve the value of the 'display' property using PHP instead of Javascript. While I know how to do this with Javascript, I would prefer to u ...

phpjavascriptcss

The currency exchange script is malfunctioning and not functioning properly

Is there a solution for accessing the JSON value that is currently eluding me? If anyone has any suggestions, I would greatly appreciate it. function forex() { var to = document.getElementById("to").value; alert(to); var from = document.getE ...

javascriptjqueryjsonhtml

Steps for configuring user environment variables in the syslinux mboot.c32 boot loader

Is there a method to establish a user environment variable within the syslinux mboot.c32 boot menu and then retrieve it once I have accessed the operating system? ...

bootstrap-4centosfedorabootsyslinux

Tips on preventing a header and body text from wrapping around a floated image positioned in the upper left corner

If we consider the layout order like this: H3 <LEFT-FLOATED IMG> <text> <H3> <LEFT-FLOATED IMG> <text> For smaller screen sizes, everything looks fine: https://i.sstatic.net/Dz0BB.png But when the screen gets bigger, a prob ...

htmlcssbootstrap-4

Utilizing Fullcalendar v5's sticky header feature alongside a Bootstrap fixed top navigation bar for a seamless

Currently experimenting with the latest version of fullcalendar 5.4.0. I have integrated the calendar into a bootstrap 4 web page that features a fixed navigation bar at the top. The issue arises when attempting to set stickyHeaderDates, aiming to keep th ...

htmlcsstwitter-bootstrapfullcalendarfullcalendar-5

Tips for customizing scroll bar padding and margin using CSS classes or IDs

I am looking to customize three different types of scrollbars with unique padding and margins. Here is the global style for my scrollbars: /* Modifying the scroll bar across the whole application */ /* width */ ::-webkit-scrollbar { width: 5px; he ...

htmlcss