What is the reason behind the lack of style for the pills in Bootstrap 4?

I attempted to create a vertical navbar using Bootstrap 4 pills, but unfortunately, the styles were not appearing as expected. Instead, all the pills appeared as regular links.

Pills without any styling:

<ul class="nav nav-pills flex-column">
<li class="nav-item">
    <a href="<?php echo ADMIN_URL;?>home" class="nav-link">Admin Dashboard</a>
</li>
<li class="nav-item">
<a href="<?php echo ADMIN_URL;?>user-list/1" class="nav-link">Users</a>
</li>
<li class="nav-item">
    <a href="<?php echo ADMIN_URL;?>category-list/1" class="nav-link">Categories</a>
</li>
<li class="nav-item">
    <a href="<?php echo ADMIN_URL;?>car-list/1" class="nav-link">Cars</a>
</li>
<li class="nav-item">
    <a href="<?php echo MAIN_URL;?>" class="nav-link">Main Page</a>
</li>

cssmenubootstrap-4

Answer №1

Styling is applied only to the active link

    <ul class="nav nav-pills flex-column">
    <li class="nav-item>
        <a href="<?php echo ADMIN_URL;?>home" class="nav-link active">Admin Dashboard</a>
    </li>
    <li class="nav-item">
    <a href="<?php echo ADMIN_URL;?>user-list/1" class="nav-link">Users</a>
    </li>
    <li class="nav-item">
       <a href="<?php echo ADMIN_URL;?>category-list/1" class="nav-link">Categories</a>
    </li>
    <li class="nav-item">
       <a href="<?php echo ADMIN_URL;?>car-list/1" class="nav-link">Cars</a>
    </li>
   <li class="nav-item">
       <a href="<?php echo MAIN_URL;?>" class="nav-link">Main Page</a>
    </li>
   </ul>

This means that only the element with the active class will have the specified styling, as seen in the first entry of my code answer.

Learn more here

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

The images on the carousel fail to load unless I adjust the window size

After investing countless hours into finding a solution, I am still unable to resolve this issue. The problem lies within my use of a Carousel and setting the images through a javascript file. Strangely enough, upon loading the page, only the first image ...

javascripthtmlcssswiper.js

JQuery Dimmer and Non-Scrolling Functionality Cannot Be Used Simultaneously

My website has a Hamburger menu for the Mobile view that I toggle on and off using JQuery. The issue arises when I try to add a dimmer effect to the Main content while preventing scrolling to the Main content when the Hamburger menu is shown. When I attemp ...

jqueryhtmlcss

What is the formula for determining the REAL innerWidth and innerHeight?

I am currently working on a responsive website using Bootstrap and I am looking to create an element that perfectly fits the screen size. When I set the height/width to 100%, the browser includes the toolbar, other tabs, and the Windows taskbar in the cal ...

javascriptjqueryhtmlcsstwitter-bootstrap

Problem with the menu button overflowing

I'm exploring the process of designing burger menus for the mobile version of my site. I've successfully created a basic burger menu with some JavaScript assistance, but I encountered an overflow issue. The burger menu functions properly, but the ...

htmlcss

Vertically align an image of unknown height using CSS, ensuring compatibility with IE9

.box { width : 100%; max-height : 300px; overflow : hidden; } img { width : 100%; } <div class="box"> <img src="banner.png" /> </div> I am faced with a challenge regarding the sizing of the image banner.png wit ...

htmlcssvertical-alignment

`Can you explain the contrast between a Firefox instance launched by Selenium WebDriver versus a browser instance manually launched?`

Currently, I am in the process of automating a web application using Selenium WebDriver. The unique challenge I have encountered is related to the behavior of a dropdown menu causing page elements to hide under a floating menu. Interestingly, this issue on ...

javascriptcssseleniumfirefoxselenium-webdriver

What is the method for displaying map tooltips by default rather than on mouseover?

Currently, I have a script set up to display a map with two markers. Whenever I hover over one of the markers, a popup tooltip appears with location information. My question is, how can I make the information appear by default without needing to hover ov ...

javascriptjqueryhtmlcssgoogle-maps

Obtaining a background image within a keyframe

I have been experimenting with keyframe animations and am looking to incorporate multiple images into the animation. Specifically, I want to switch out the image every 10% increment to depict someone running. Despite my efforts to use a background-img in ...

htmlcsscss-transitionscss-animations

How can Material UI React handle long strings in menu text wrapping for both mobile and desktop devices?

Is there a way to ensure that long strings in an MUI Select component do not exceed the width and get cut off on mobile devices? How can I add a text-wrap or similar feature? Desktop: https://i.sstatic.net/lo8zM.png Mobile: https://i.sstatic.net/8xoW6. ...

javascriptcssreactjstypescriptmaterial-ui

Prevent the float:left property from causing my div to overlap with another div

Is there a way to style "a" so that it can take up space and float to the left simultaneously? <div style="background:#111"> <div id="a" style="float:left; height:30px"></div> </div> ...

htmlcss

Having difficulty positioning two elements within a button using bootstrap

I am attempting to align two texts horizontally inside a button using Bootstrap 4. The word "Link" keeps getting pushed to the next line and I would like it to stay beside "Copy". I have experimented with using Float but it ends up moving "Link" too far t ...

javascriptbootstrap-4

Utilize CSS to freeze a variety of elements

I have three different elements positioned at the top of my webpage that I want to make responsive. Here is the code I am currently using: #prayer_time .page-header { position: fixed; top: 40px; left: 290px; right: 0; z-index: 99; } ...

htmlcss

Creating a border for a checkbox using CSS

I need help with styling a checkbox using jQuery $("#reg_checkbox").css("border","thin solid red"); The border displays correctly in Internet Explorer, but not in Mozilla. How can I ensure browser compatibility for this styling? ...

jquerycssmozilla

Customize Bootstrap 5: Changing the default color scheme

Currently, I am utilizing Bootstrap 5 (v5.2.1) along with a form on my website. I am attempting to customize the default styles for form validation. Specifically, I want to modify the colored 'tick' or 'check' icon that is displayed wh ...

cssbootstrap-5

Is there a way to soften the repetitive elements in the background image?

Is there a method to blur the part of a background image that is repeated, such that if it is positioned in the center, the sides of the image appear blurry as well? ...

jqueryhtmlcss

Text that is selected within a contenteditable div: Find the beginning and end points of the highlighted text

<div contenteditable="true">This text is <b>Bold</b> not <i>Italic</i> right?</div> For instance, if the text appears in a bold format, but not italic and the user selects it, how can I determine the exact position ...

javascriptjqueryhtmlcss

Updating form validation by altering input value

I'm currently utilizing JavaScript regular expressions for form validation in my project. After successfully completing the validation without any errors, upon clicking the submit button, I want the form to be submitted and change the submit value to ...

javascriptjqueryhtmlcss

Tips for smoothly applying a class to an image for seamless transitions, avoiding any awkward clunkiness

Check out my work on jsfiddle I understand that the image may not be visible, but I'll do my best to describe it. The header smoothly animates as I scroll down, but the image abruptly changes size instead of smoothly resizing. I want it to gradually ...

javascriptjqueryhtmlcss

Nav Bar Toggle Button - Refuses to display the dropdown menus

My Django homepage features a Bootstrap navbar that, when resized, displays a toggle button. However, I am experiencing difficulty with dropdown functionality for the navbar items once the toggle button is activated. Can anyone provide guidance on how to a ...

javascripthtmlcssdjangobootstrap-4

Declaration of Character Encoding in CSS3

Do I need to include a character encoding declaration in CSS3? When I add the @charset "utf-8"; declaration, Visual Studio's CSS3 validation displays a warning. Can anyone offer some guidance on this issue? ...

css