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

up vote
0
down vote

favorite

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:

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

edited 2 hours ago

Nick Parsons

2,0332418

asked 2 hours ago

Adven

New contributor

add a comment |

up vote
0
down vote

favorite

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:

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

edited 2 hours ago

Nick Parsons

2,0332418

asked 2 hours ago

Adven

New contributor

add a comment |

up vote
0
down vote

favorite

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:

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

edited 2 hours ago

Nick Parsons

2,0332418

asked 2 hours ago

Adven

New contributor

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:

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

css menu bootstrap-4

edited 2 hours ago

Nick Parsons

2,0332418

asked 2 hours ago

Adven

New contributor

edited 2 hours ago

Nick Parsons

2,0332418

asked 2 hours ago

Adven

New contributor

edited 2 hours ago

Nick Parsons

2,0332418

edited 2 hours ago

Nick Parsons

2,0332418

edited 2 hours ago

Nick Parsons

2,0332418

asked 2 hours ago

Adven

New contributor

asked 2 hours ago

Adven

asked 2 hours ago

Adven

New contributor

Adven is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

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

answered 2 hours ago

Badgy

838320

Thank you, I was sure I'd made a rookie mistake somewhere. Glad to know where
– Adven
2 hours ago

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

Adven is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53203297%2fwhy-dont-the-pills-in-bootstrap-4-have-any-style%23new-answer', 'question_page');
}
);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

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

answered 2 hours ago

Badgy

838320

Thank you, I was sure I'd made a rookie mistake somewhere. Glad to know where
– Adven
2 hours ago

add a comment |

up vote
0
down vote

accepted

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

answered 2 hours ago

Badgy

838320

Thank you, I was sure I'd made a rookie mistake somewhere. Glad to know where
– Adven
2 hours ago

add a comment |

up vote
0
down vote

accepted

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

answered 2 hours ago

Badgy

838320

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

answered 2 hours ago

Badgy

838320

answered 2 hours ago

Badgy

838320

answered 2 hours ago

Badgy

838320

answered 2 hours ago

Badgy

838320

Thank you, I was sure I'd made a rookie mistake somewhere. Glad to know where
– Adven
2 hours ago

add a comment |

Thank you, I was sure I'd made a rookie mistake somewhere. Glad to know where
– Adven
2 hours ago

Thank you, I was sure I'd made a rookie mistake somewhere. Glad to know where
– Adven
2 hours ago

add a comment |

Adven is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Adven is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Name

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Xtykutl