htmlangularsassng-bootstrapangular-bootstrap

Create a custom CSS design for ngb-tabset

I am trying to create a custom design for ngb-tabset

custom css

Here is the html code 

 <ngb-tabset>
          <ngb-tab>
              <ng-template ngbTabTitle><span class="tab-title">All Professional Learnings</span></ng-template>
              <ng-template ngbTabContent>
                  <app-all-professional-learnings></app-all-professional-learnings>
              </ng-template>
          </ngb-tab>
          <ngb-tab>
              <ng-template ngbTabTitle><span class="tab-title">My Professional Learnings</span></ng-template>
              <ng-template ngbTabContent>
                  <app-my-professional-learnings></app-my-professional-learnings>
              </ng-template>
          </ngb-tab>
      </ngb-tabset>

Some of the css I tried 

.nav-link.active, .nav-pills .show > .nav-link {
  background-color: transparent !important;
  color: $primary !important;
  border-radius: 0;
  border-bottom: 3px solid;
  padding-bottom: 2px;
  border-color: #dee2e6 #dee2e6 $primary !important;
}
.nav-link {
  margin-bottom: 25px !important;
  color: $primary !important;
  border-left: 0px solid !important;
  border-right: 0px solid !important;
  border-top: 0px solid !important;
}
.nav-tabs{
  border-bottom: 0 !important;
}

The design which I used creates a design as shown below

my design

Can anyone tell me how can I design the tabs like above

Solution

  • Try this. It should work.

    .nav-link.active, .nav-pills .show > .nav-link {
  background-color: #CD853F !important;
  color: white !important;
  border-radius: 0;
  border: 3px solid #CD853F;
  padding-bottom: 2px;      
}
.nav-link {
  margin-bottom: 25px !important;
  color: #CD853F !important;
  border: 3px solid #CD853F !important;      
}
.nav-tabs{
  border-bottom: 0 !important;
}

    I was not sure of the variables you have used, so I substituted them with hex values.