How do I change the CSS of pills ? (angular2)

I’m using Angular2 and ng-tabset from ng-bootstrap for my first website and managed to make it work so far.

However, I’m stuck now: I can’t change the style of pills and they look like this :

but I want them like this : 

it looks easy, I just need to display them horizontally and sit a reddish background !

Here is my code:

<ngb-tabset type="pills" orientation="horizontal">
<ngb-tab title="BN™ II">
    <ng-template ngbTabContent>
        <p>first visit</p>
<ngb-tab title="BN ProSpec®">
    <ng-template ngbTabContent>
        <p>tab 2</p>
<ngb-tab title="IMMAGE®">
    <ng-template ngbTabContent>
        <p>tab 3</p>

I can only change the color of the bullet by adding this to my css file:

ngb-tabset {
    color: orange;


Thanks for the website link was able to recreate what you wanted. Add this CSS and it’ll work.


Please find a sample of how to apply the CSS, I tried my best to replicate the image, you can find the styles in style.css inside the Plunkr

Plunkr Demo


ul.nav-pills .nav-item {
    display: inline;

ul.nav-pills .nav-item > a {
    padding: 4px 35px;
    margin: 4px 5px;
    color: black;
    text-decoration: none;

ul.nav-pills .nav-item > {
    background-color: maroon !important;
    color: white;