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

1133 views css
-3

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>

answered question

1 Answer

7

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

posted this

Have an answer?

JD

Please login first before posting an answer.