- var theme_customizer = true; - var tooltip = true; - var counter = true; doctype html html(lang='en') include ../../components/header-files body include ../../components/loader // page-wrapper Start #pageWrapper.page-wrapper include ../../components/header // Page Body Start .page-body-wrapper.horizontal-menu include ../../components/sidebar .page-body .container-fluid .page-header .row .col-sm-6 h3 | Lists ol.breadcrumb li.breadcrumb-item a(href='index.html') | Home li.breadcrumb-item Base li.breadcrumb-item.active Lists .col-sm-6 include ../../components/bookmark // Container-fluid starts .container-fluid .row .col-sm-12.col-xl-12 .card .card-header.pb-0 h5 Default list .card-body ul.list-group li.list-group-item Cras justo odio li.list-group-item Dapibus ac facilisis in li.list-group-item Morbi leo risus li.list-group-item Porta ac consectetur ac li.list-group-item Vestibulum at eros .col-sm-12.col-xl-12 .card .card-header.pb-0 h5 Links and buttons .card-body .list-group a.list-group-item.list-group-item-action.active(href='javascript:void(0)') | Cras justo odio a.list-group-item.list-group-item-action(href='javascript:void(0)') Dapibus ac facilisis in a.list-group-item.list-group-item-action(href='javascript:void(0)') Morbi leo risus a.list-group-item.list-group-item-action(href='javascript:void(0)') Porta ac consectetur ac a.list-group-item.list-group-item-action.disabled(href='javascript:void(0)') Vestibulum at eros .col-sm-12.col-xl-12 .card .card-header.pb-0 h5 Flush Style .card-body ul.list-group.list-group-flush li.list-group-item Cras justo odio li.list-group-item Dapibus ac facilisis in li.list-group-item Morbi leo risus li.list-group-item Porta ac consectetur ac li.list-group-item Vestibulum at eros li.list-group-item Cras justo odio li.list-group-item Dapibus ac facilisis in li.list-group-item Dapibus ac facilisis in li.list-group-item Dapibus ac facilisis in .col-sm-12.col-xl-12 .card .card-header.pb-0 h5 Contextual classes .card-body ul.list-group li.list-group-item Dapibus ac facilisis in li.list-group-item.list-group-item-primary This is a primary list group item li.list-group-item.list-group-item-secondary This is a secondary list group item li.list-group-item.list-group-item-success This is a success list group item li.list-group-item.list-group-item-danger This is a danger list group item li.list-group-item.list-group-item-warning This is a warning list group item li.list-group-item.list-group-item-info This is a info list group item li.list-group-item.list-group-item-light This is a light list group item li.list-group-item.list-group-item-dark This is a dark list group item .col-sm-12.col-xl-12 .card .card-header.pb-0 h5 With badges .card-body ul.list-group li.list-group-item.d-flex.justify-content-between.align-items-center | Cras justo odio span.badge.badge-primary.counter 14 li.list-group-item.d-flex.justify-content-between.align-items-center | Dapibus ac facilisis in span.badge.badge-secondary.counter 2 li.list-group-item.d-flex.justify-content-between.align-items-center | Morbi leo risus span.badge.badge-success.rounded-pill.counter 1 li.list-group-item.d-flex.justify-content-between.align-items-center | Dapibus ac facilisis in span.badge.badge-info.rounded-pill 100% li.list-group-item.d-flex.justify-content-between.align-items-center | Dapibus ac facilisis in span.badge.badge-warning.text-dark.counter 2 li.list-group-item.d-flex.justify-content-between.align-items-center | Morbi leo risus span.badge.badge-danger.rounded-pill sale li.list-group-item.d-flex.justify-content-between.align-items-center | Cras justo odio span.badge.badge-light.text-dark.counter 14 .col-sm-12.col-xl-12 .card .card-header.pb-0 h5 Custom content .card-body .list-group a.list-group-item.list-group-item-action.flex-column.align-items-start.active(href='javascript:void(0)') .d-flex.w-100.justify-content-between h5.mb-1 List group item heading small 3 days ago p.mb-1 | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. small Donec id elit non mi porta. a.list-group-item.list-group-item-action.flex-column.align-items-start(href='javascript:void(0)') .d-flex.w-100.justify-content-between h5.mb-1 List group item heading small.text-muted 3 days ago p.mb-1 | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. small.text-muted Donec id elit non mi porta. a.list-group-item.list-group-item-action.flex-column.align-items-start(href='javascript:void(0)') .d-flex.w-100.justify-content-between h5.mb-1 List group item heading small.text-muted 3 days ago p.mb-1 | Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit. small.text-muted Donec id elit non mi porta. .col-sm-12.col-xl-12 .card .card-header.pb-0 h5 JavaScript behavior .card-body .row .col-sm-4 #list-tab.list-group(role='tablist') a#list-home-list.list-group-item.list-group-item-action.active(data-bs-toggle='list', href='#list-home', role='tab', aria-controls='list-home') Home a#list-profile-list.list-group-item.list-group-item-action(data-bs-toggle='list', href='#list-profile', role='tab', aria-controls='list-profile') Profile a#list-messages-list.list-group-item.list-group-item-action(data-bs-toggle='list', href='#list-messages', role='tab', aria-controls='list-messages') Messages a#list-settings-list.list-group-item.list-group-item-action(data-bs-toggle='list', href='#list-settings', role='tab', aria-controls='list-settings') Settings .col-sm-8 #nav-tabContent.tab-content #list-home.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='list-home-list') | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. #list-profile.tab-pane.fade(role='tabpanel', aria-labelledby='list-profile-list') | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. #list-messages.tab-pane.fade(role='tabpanel', aria-labelledby='list-messages-list') | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. #list-settings.tab-pane.fade(role='tabpanel', aria-labelledby='list-settings-list') | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. .col-sm-12.col-xl-12 .card .card-header.pb-0 h5 With Icon .card-body .list-group a.list-group-item.list-group-item-action(href='javascript:void(0)') i.icon-save-alt | Cras justo odio a.list-group-item.list-group-item-action(href='javascript:void(0)') i.icon-target | Dapibus ac facilisis in a.list-group-item.list-group-item-action(href='javascript:void(0)') i.icon-mobile | Morbi leo risus a.list-group-item.list-group-item-action.disabled(href='javascript:void(0)') i.icon-shopping-cart-full | Vestibulum at eros .col-sm-12.col-xl-12 .card .card-header.pb-0 h5 With Images .card-body .list-group a.list-group-item.list-group-item-action(href='javascript:void(0)') img(src='assets/images/user/1.jpg', alt='') | Cras justo odio a.list-group-item.list-group-item-action(href='javascript:void(0)') img(src='assets/images/user/1.jpg', alt='') | Dapibus ac facilisis in a.list-group-item.list-group-item-action(href='javascript:void(0)') img(src='assets/images/user/1.jpg', alt='') | Morbi leo risus a.list-group-item.list-group-item-action.disabled(href='javascript:void(0)') img(src='assets/images/user/1.jpg', alt='') | Vestibulum at eros .col-sm-12.col-xl-12 .card .card-header.pb-0 h5 With Image Rounded .card-body .list-group a.list-group-item.list-group-item-action(href='javascript:void(0)') img.rounded-circle(src='assets/images/user/1.jpg', alt='') | Cras justo odio a.list-group-item.list-group-item-action(href='javascript:void(0)') img.rounded-circle(src='assets/images/user/1.jpg', alt='') | Dapibus ac facilisis in a.list-group-item.list-group-item-action(href='javascript:void(0)') img.rounded-circle(src='assets/images/user/1.jpg', alt='') | Morbi leo risus a.list-group-item.list-group-item-action.disabled(href='javascript:void(0)') img.rounded-circle(src='assets/images/user/1.jpg', alt='') | Vestibulum at eros // Container-fluid Ends include ../../components/footer include ../../components/footer-files