Skip to content

Instantly share code, notes, and snippets.

@agileminds1997
Created August 27, 2021 11:48
Show Gist options
  • Select an option

  • Save agileminds1997/9ed712c50217280e6bca676266b4982a to your computer and use it in GitHub Desktop.

Select an option

Save agileminds1997/9ed712c50217280e6bca676266b4982a to your computer and use it in GitHub Desktop.
[PUG] Count Items
// Pills navs
ul.nav.nav-pills.mb-3#ex1(role='tablist')
li.nav-item(role='presentation')
a.nav-link.active#ex1-tab-1(data-mdb-toggle='pill', href='#ex1-pills-1', role='tab', aria-controls='ex1-pills-1', aria-selected='true') Where
li.nav-item(role='presentation')
a.nav-link#ex1-tab-2(data-mdb-toggle='pill', href='#ex1-pills-2', role='tab', aria-controls='ex1-pills-2', aria-selected='false') When
li.nav-item(role='presentation')
a.nav-link#ex1-tab-3(data-mdb-toggle='pill', href='#ex1-pills-3', role='tab', aria-controls='ex1-pills-3', aria-selected='false') People
// Pills navs
// Pills content
.tab-content#ex1-content
.tab-pane.fade.show.active#ex1-pills-1(role='tabpanel', aria-labelledby='ex1-tab-1').
Tab 1 content
.tab-pane.fade#ex1-pills-2(role='tabpanel', aria-labelledby='ex1-tab-2').
Tab 2 content
.tab-pane.fade#ex1-pills-3(role='tabpanel', aria-labelledby='ex1-tab-3').
Tab 3 content
// Pills content
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.min.js"></script>
.gt {
width:300px;
border:1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment