CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
spreaderman
spreaderman

Reputation: 1088

Boostrap 4 tabs - how do I stop the text from wrapping?

I am using Boostrap 4. I have a simple 4 tab horizontal navigation. On big screens, it should display like this: "Some text [font-awesome-icon]" x 4 tabs. On small screens, it should display like this: "[font-awesome-icon]". The display part works, however, on large screen the font-awesome-icon always shows on the second line. Here is what I see;

tab text over two lines

This is my html;

<!-- 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>

I have tried nowrap in all locations like UL, LI, A, SPAN but no luck. I have also moved the fa-clock part to inside the span, however, then the entire text and tab disappear on small screens.

Any help appreciated.

Upvotes: 0

Views: 257

Answers (1)

Suryansh Singh
Suryansh Singh

Reputation: 1173

To stop making your id card from moving to next line, float your "Some text" to 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>

Upvotes: 1

Related Questions