Preventing text wrapping in Boostrap 4 tabs - what's the solution?

Currently utilizing Boostrap 4 for a simple 4 tab horizontal navigation. The desired display on big screens is: "Some text [font-awesome-icon]" x 4 tabs. For smaller screens, it should show as: "[font-awesome-icon]". While the display works, the font-awesome-icon consistently appears on the second line on large screens. The issue is illustrated below:

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

The HTML code being used:

<!-- Nav tabs -->
<ul class="nav nav-tabs  ">
    
    <!-- profile -->
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#profile" nowr>
            <span class="d-none d-md-block">Some text 
            </span>
            <i class="fas fa-id-card">
            </i>
        </a>
    </li>
    
    <!-- profile image -->
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#profile-image"><i class="fas fa-images"></i></a>
    </li>
    <!-- password -->
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#password"><i class="fas fa-unlock-alt"></i></a>
    </li>
    <!-- timezone --> 
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#timezone"><i class="fas fa-clock"></i></a>
    </li>
</ul>

Attempts to address the issue with 'nowrap' in various locations such as UL, LI, A, and SPAN were unsuccessful. Moving the 'fa-clock' element inside the span caused the entire text and tab to disappear on smaller screens. Any assistance on this matter would be greatly appreciated.

Answer №1

If you want to prevent your ID card from moving to the next line, try floating your "Some text" to the left.

    <li class="nav-item" >
        <a class="nav-link" data-toggle="tab" href="#profile" nowr>
            <span style="float:left;" class="d-none d-md-block">Some text 
            </span>
            <i  class="fas fa-id-card">
            </i>
        </a>
    </li>

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

I'm having trouble adjusting the background color in the bootstrap template

------------ I am customizing the bootstrap SB Admin template for my asp.net core Identity project. However, I am facing an issue with changing the background color of the template and the navigation menu color. Even though I can see the color changes when ...

How can you effectively manage the latest "Bootstrap Toast" functionality in Angular version 7 and above?

Struggling to integrate Bootstrap 4.2 Toast into an Angular 7 application. The provided Jquery sample from the Bootstrap documentation is challenging to translate into Angular. Currently, relying on Jquery within the HTML template to call $('.toast&a ...

Enhancing your CircularProgressBar with dual variant colors using Material-UI

https://i.sstatic.net/0d35R.png Best practices for customizing MUI components with React ...

Creating a CSS Grid with Full-Width Columns and Consistent Margins

Currently, I am attempting to create a responsive grid with 4 columns that expands to the entire width of the screen on desktop displays. However, when I introduce margins to space them out evenly, I encounter an issue where the last column either doesn&ap ...

Is there a way to arrange the navigation items to appear on the right side upon toggler click?

I've been trying to get the nav-items to align on the right side, but so far using the ms-auto class from Bootstrap isn't giving me the desired result. <html lang="en"> <head> <!-- Required meta tags --> < ...

Using JavaScript to fetch HTML and apply CSS dynamically

Is there a way to retrieve all HTML within a div along with the corresponding CSS? A majority of the CSS is defined in classes within an external stylesheet. document.getElementById("mydiv") Currently, using the above code only fetches the HTML with inli ...

Automatically scroll a div when the internal div is in focus

I want to create a scrollable div that allows for scrolling even when the mouse is over the content inside the div, not just on the blank areas beside it. Here is the code I am currently using: var main = document.getElementById('main-site'); va ...

Include a proximity button onto the tabs

Currently, I'm diving into learning Bootstrap and one thing I'd like to implement is having an x next to each tab name for easy closing: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

adjusting the color of ion-button when hovering over the cancel button

I'm working on a button bar for my app and I want the color of the button to change based on its state (false, true). Currently, the button starts out green, turns light green when hovered over, and becomes white when clicked. Once I click it, the bu ...

Struggling to align the footer of your webpage and ensure it adjusts proportionally with the window size?

After trying several codes that have worked before, I ran into a problem when attempting to place two div side by side for the footer. No matter what code I tried, I couldn't get it centered and responsive to the user window ratio. Even after consulti ...

the content outside of the division is incorrectly formatted

Here is the code snippet that I am working with: <html lang='es'> <head> <link rel="stylesheet" type="text/css" href="theme.css"> <link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap.mi ...

Tips for adjusting Bootstrap's sub drop-down menu to the opposite side when hovering with the mouse

I'm working on a menu that has a dropdown feature, and here is a snippet of the code: <li class="nav-item flyout"> <a href="#" class="nav-link dropdown-toggle nav_sp_clr {{#ifpage 'quicklink'}}active{{/ifpage}}">Quick Links ...

Backend input validation being shown on the console, yet not appearing on the frontend in React, nodejs with Bootstrap

ReachOut.js Component import React, { Component } from "react"; import { Button, Row, Col, Form } from "react-bootstrap"; import axios from "axios"; import { MDBContainer, MDBRow, MDBCol, MDBInput } from "mdbreact"; import { withRouter } from "react-route ...

Guide on placing images in a grid using CSS

Exploring a new way to arrange images in grid style with a box underneath. Seeking advice on achieving this specific layout shown in an image. Current progress in positioning can be seen in this screenshot. Desired adjustments include aligning the far ri ...

Setting up bootstrap for PHP: A step-by-step guide

Struggling with integrating PHP and Bootstrap? I recently attempted to do the same, but unfortunately, my website doesn't seem to recognize Bootstrap. Instead of the sleek Bootstrap design, it's displaying a simple HTML layout. Here's a snip ...

What is the best way to incorporate background colors into menu items?

<div class="container"> <div class="row"> <div class="col-lg-3 col-md-3 col-sm-12 fl logo"> <a href="#"><img src="images/main-logo.png" alt="logo" /> </a> ...

Creating a webpage using webkit technology

As someone new to web development, I am eager to create a website that is user-friendly on both desktops and mobile devices. Recently, I stumbled upon a site with impeccable design and functionality using what appeared to be "screen webkit". I'm curi ...

Adding HTML components to an image with adjustable dimensions

A graphic designer has provided us with an image featuring three selection boxes. I implemented the necessary HTML elements and CSS to display three overlapped selection boxes on top of the image, using pixel values for positioning. However, the original ...

Can you guide me on implementing an onclick event using HTML, CSS, and JavaScript?

I am looking for a way to change the CSS codes of the blog1popup class when the image is clicked. I already know how to do this using hover, but I need help making it happen on click instead. The element I want to use as the button; <div class=&quo ...

How can you use ng-click to disable a div in AngularJS?

I'm looking to dynamically disable a div in AngularJS based on a certain condition. I know I can achieve this by adjusting the CSS (such as reducing contrast and color) but the div also has an ng-click property that I want to prevent from being trigge ...