Why don't the pills in Bootstrap 4 have any style?

I was trying to make a vertical navbar with Bootstrap 4 pills, but when I tried to use them, I couldn't get the style to show. They all look like regular links.

Pills without styles:
Pills without style

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

1 answer

  • answered 2018-11-08 07:51 Badgy

    Only the active Link gets the styling

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

    That means only the element that contains the active class has the styling (for example the first entry in my answer code)

    More Info