mirror of
https://github.com/stisla/stisla.git
synced 2025-09-02 20:52:42 +02:00
632 lines
34 KiB
HTML
632 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
|
|
<title>Bootstrap Components › List Group — Stisla</title>
|
|
|
|
<!-- General CSS Files -->
|
|
<link rel="stylesheet" href="assets/modules/bootstrap/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="assets/modules/fontawesome/css/all.min.css">
|
|
|
|
<!-- CSS Libraries -->
|
|
|
|
<!-- Template CSS -->
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
<link rel="stylesheet" href="assets/css/components.css">
|
|
<!-- Start GA -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-94034622-3"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'UA-94034622-3');
|
|
</script>
|
|
<!-- /END GA --></head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div class="main-wrapper main-wrapper-1">
|
|
<div class="navbar-bg"></div>
|
|
<nav class="navbar navbar-expand-lg main-navbar">
|
|
<form class="form-inline mr-auto">
|
|
<ul class="navbar-nav mr-3">
|
|
<li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
|
|
<li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
|
|
</ul>
|
|
<div class="search-element">
|
|
<input class="form-control" type="search" placeholder="Search" aria-label="Search" data-width="250">
|
|
<button class="btn" type="submit"><i class="fas fa-search"></i></button>
|
|
<div class="search-backdrop"></div>
|
|
<div class="search-result">
|
|
<div class="search-header">
|
|
Histories
|
|
</div>
|
|
<div class="search-item">
|
|
<a href="#">How to hack NASA using CSS</a>
|
|
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
|
</div>
|
|
<div class="search-item">
|
|
<a href="#">Kodinger.com</a>
|
|
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
|
</div>
|
|
<div class="search-item">
|
|
<a href="#">#Stisla</a>
|
|
<a href="#" class="search-close"><i class="fas fa-times"></i></a>
|
|
</div>
|
|
<div class="search-header">
|
|
Result
|
|
</div>
|
|
<div class="search-item">
|
|
<a href="#">
|
|
<img class="mr-3 rounded" width="30" src="assets/img/products/product-3-50.png" alt="product">
|
|
oPhone S9 Limited Edition
|
|
</a>
|
|
</div>
|
|
<div class="search-item">
|
|
<a href="#">
|
|
<img class="mr-3 rounded" width="30" src="assets/img/products/product-2-50.png" alt="product">
|
|
Drone X2 New Gen-7
|
|
</a>
|
|
</div>
|
|
<div class="search-item">
|
|
<a href="#">
|
|
<img class="mr-3 rounded" width="30" src="assets/img/products/product-1-50.png" alt="product">
|
|
Headphone Blitz
|
|
</a>
|
|
</div>
|
|
<div class="search-header">
|
|
Projects
|
|
</div>
|
|
<div class="search-item">
|
|
<a href="#">
|
|
<div class="search-icon bg-danger text-white mr-3">
|
|
<i class="fas fa-code"></i>
|
|
</div>
|
|
Stisla Admin Template
|
|
</a>
|
|
</div>
|
|
<div class="search-item">
|
|
<a href="#">
|
|
<div class="search-icon bg-primary text-white mr-3">
|
|
<i class="fas fa-laptop"></i>
|
|
</div>
|
|
Create a new Homepage Design
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<ul class="navbar-nav navbar-right">
|
|
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
|
|
<div class="dropdown-menu dropdown-list dropdown-menu-right">
|
|
<div class="dropdown-header">Messages
|
|
<div class="float-right">
|
|
<a href="#">Mark All As Read</a>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown-list-content dropdown-list-message">
|
|
<a href="#" class="dropdown-item dropdown-item-unread">
|
|
<div class="dropdown-item-avatar">
|
|
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle">
|
|
<div class="is-online"></div>
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
<b>Kusnaedi</b>
|
|
<p>Hello, Bro!</p>
|
|
<div class="time">10 Hours Ago</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="dropdown-item dropdown-item-unread">
|
|
<div class="dropdown-item-avatar">
|
|
<img alt="image" src="assets/img/avatar/avatar-2.png" class="rounded-circle">
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
<b>Dedik Sugiharto</b>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
|
|
<div class="time">12 Hours Ago</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="dropdown-item dropdown-item-unread">
|
|
<div class="dropdown-item-avatar">
|
|
<img alt="image" src="assets/img/avatar/avatar-3.png" class="rounded-circle">
|
|
<div class="is-online"></div>
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
<b>Agung Ardiansyah</b>
|
|
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<div class="time">12 Hours Ago</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="dropdown-item">
|
|
<div class="dropdown-item-avatar">
|
|
<img alt="image" src="assets/img/avatar/avatar-4.png" class="rounded-circle">
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
<b>Ardian Rahardiansyah</b>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit ess</p>
|
|
<div class="time">16 Hours Ago</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="dropdown-item">
|
|
<div class="dropdown-item-avatar">
|
|
<img alt="image" src="assets/img/avatar/avatar-5.png" class="rounded-circle">
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
<b>Alfa Zulkarnain</b>
|
|
<p>Exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
|
|
<div class="time">Yesterday</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="dropdown-footer text-center">
|
|
<a href="#">View All <i class="fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
|
|
<div class="dropdown-menu dropdown-list dropdown-menu-right">
|
|
<div class="dropdown-header">Notifications
|
|
<div class="float-right">
|
|
<a href="#">Mark All As Read</a>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown-list-content dropdown-list-icons">
|
|
<a href="#" class="dropdown-item dropdown-item-unread">
|
|
<div class="dropdown-item-icon bg-primary text-white">
|
|
<i class="fas fa-code"></i>
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
Template update is available now!
|
|
<div class="time text-primary">2 Min Ago</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="dropdown-item">
|
|
<div class="dropdown-item-icon bg-info text-white">
|
|
<i class="far fa-user"></i>
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
<b>You</b> and <b>Dedik Sugiharto</b> are now friends
|
|
<div class="time">10 Hours Ago</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="dropdown-item">
|
|
<div class="dropdown-item-icon bg-success text-white">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
<b>Kusnaedi</b> has moved task <b>Fix bug header</b> to <b>Done</b>
|
|
<div class="time">12 Hours Ago</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="dropdown-item">
|
|
<div class="dropdown-item-icon bg-danger text-white">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
Low disk space. Let's clean it!
|
|
<div class="time">17 Hours Ago</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="dropdown-item">
|
|
<div class="dropdown-item-icon bg-info text-white">
|
|
<i class="fas fa-bell"></i>
|
|
</div>
|
|
<div class="dropdown-item-desc">
|
|
Welcome to Stisla template!
|
|
<div class="time">Yesterday</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="dropdown-footer text-center">
|
|
<a href="#">View All <i class="fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
|
|
<img alt="image" src="assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
|
|
<div class="d-sm-none d-lg-inline-block">Hi, Ujang Maman</div></a>
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
<div class="dropdown-title">Logged in 5 min ago</div>
|
|
<a href="features-profile.html" class="dropdown-item has-icon">
|
|
<i class="far fa-user"></i> Profile
|
|
</a>
|
|
<a href="features-activities.html" class="dropdown-item has-icon">
|
|
<i class="fas fa-bolt"></i> Activities
|
|
</a>
|
|
<a href="features-settings.html" class="dropdown-item has-icon">
|
|
<i class="fas fa-cog"></i> Settings
|
|
</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item has-icon text-danger">
|
|
<i class="fas fa-sign-out-alt"></i> Logout
|
|
</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<div class="main-sidebar sidebar-style-2">
|
|
<aside id="sidebar-wrapper">
|
|
<div class="sidebar-brand">
|
|
<a href="index.html">Stisla</a>
|
|
</div>
|
|
<div class="sidebar-brand sidebar-brand-sm">
|
|
<a href="index.html">St</a>
|
|
</div>
|
|
<ul class="sidebar-menu">
|
|
<li class="menu-header">Dashboard</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>Dashboard</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="nav-link" href="index-0.html">General Dashboard</a></li>
|
|
<li><a class="nav-link" href="index.html">Ecommerce Dashboard</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="menu-header">Starter</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>Layout</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="nav-link" href="layout-default.html">Default Layout</a></li>
|
|
<li><a class="nav-link" href="layout-transparent.html">Transparent Sidebar</a></li>
|
|
<li><a class="nav-link" href="layout-top-navigation.html">Top Navigation</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>Blank Page</span></a></li>
|
|
<li class="dropdown active">
|
|
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>Bootstrap</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="nav-link" href="bootstrap-alert.html">Alert</a></li>
|
|
<li><a class="nav-link" href="bootstrap-badge.html">Badge</a></li>
|
|
<li><a class="nav-link" href="bootstrap-breadcrumb.html">Breadcrumb</a></li>
|
|
<li><a class="nav-link" href="bootstrap-buttons.html">Buttons</a></li>
|
|
<li><a class="nav-link" href="bootstrap-card.html">Card</a></li>
|
|
<li><a class="nav-link" href="bootstrap-carousel.html">Carousel</a></li>
|
|
<li><a class="nav-link" href="bootstrap-collapse.html">Collapse</a></li>
|
|
<li><a class="nav-link" href="bootstrap-dropdown.html">Dropdown</a></li>
|
|
<li><a class="nav-link" href="bootstrap-form.html">Form</a></li>
|
|
<li class=active><a class="nav-link" href="bootstrap-list-group.html">List Group</a></li>
|
|
<li><a class="nav-link" href="bootstrap-media-object.html">Media Object</a></li>
|
|
<li><a class="nav-link" href="bootstrap-modal.html">Modal</a></li>
|
|
<li><a class="nav-link" href="bootstrap-nav.html">Nav</a></li>
|
|
<li><a class="nav-link" href="bootstrap-navbar.html">Navbar</a></li>
|
|
<li><a class="nav-link" href="bootstrap-pagination.html">Pagination</a></li>
|
|
<li><a class="nav-link" href="bootstrap-popover.html">Popover</a></li>
|
|
<li><a class="nav-link" href="bootstrap-progress.html">Progress</a></li>
|
|
<li><a class="nav-link" href="bootstrap-table.html">Table</a></li>
|
|
<li><a class="nav-link" href="bootstrap-tooltip.html">Tooltip</a></li>
|
|
<li><a class="nav-link" href="bootstrap-typography.html">Typography</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="menu-header">Stisla</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>Components</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="nav-link" href="components-article.html">Article</a></li> <li><a class="nav-link beep beep-sidebar" href="components-avatar.html">Avatar</a></li> <li><a class="nav-link" href="components-chat-box.html">Chat Box</a></li> <li><a class="nav-link beep beep-sidebar" href="components-empty-state.html">Empty State</a></li> <li><a class="nav-link" href="components-gallery.html">Gallery</a></li>
|
|
<li><a class="nav-link beep beep-sidebar" href="components-hero.html">Hero</a></li> <li><a class="nav-link" href="components-multiple-upload.html">Multiple Upload</a></li>
|
|
<li><a class="nav-link beep beep-sidebar" href="components-pricing.html">Pricing</a></li> <li><a class="nav-link" href="components-statistic.html">Statistic</a></li> <li><a class="nav-link" href="components-tab.html">Tab</a></li>
|
|
<li><a class="nav-link" href="components-table.html">Table</a></li>
|
|
<li><a class="nav-link" href="components-user.html">User</a></li> <li><a class="nav-link beep beep-sidebar" href="components-wizard.html">Wizard</a></li> </ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>Forms</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="nav-link" href="forms-advanced-form.html">Advanced Form</a></li>
|
|
<li><a class="nav-link" href="forms-editor.html">Editor</a></li>
|
|
<li><a class="nav-link" href="forms-validation.html">Validation</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="fas fa-map-marker-alt"></i> <span>Google Maps</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="gmaps-advanced-route.html">Advanced Route</a></li>
|
|
<li><a href="gmaps-draggable-marker.html">Draggable Marker</a></li>
|
|
<li><a href="gmaps-geocoding.html">Geocoding</a></li>
|
|
<li><a href="gmaps-geolocation.html">Geolocation</a></li>
|
|
<li><a href="gmaps-marker.html">Marker</a></li>
|
|
<li><a href="gmaps-multiple-marker.html">Multiple Marker</a></li>
|
|
<li><a href="gmaps-route.html">Route</a></li>
|
|
<li><a href="gmaps-simple.html">Simple</a></li>
|
|
</ul>
|
|
</li> <li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>Modules</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="nav-link" href="modules-calendar.html">Calendar</a></li>
|
|
<li><a class="nav-link" href="modules-chartjs.html">ChartJS</a></li>
|
|
<li><a class="nav-link" href="modules-datatables.html">DataTables</a></li>
|
|
<li><a class="nav-link" href="modules-flag.html">Flag</a></li>
|
|
<li><a class="nav-link" href="modules-font-awesome.html">Font Awesome</a></li>
|
|
<li><a class="nav-link" href="modules-ion-icons.html">Ion Icons</a></li>
|
|
<li><a class="nav-link" href="modules-owl-carousel.html">Owl Carousel</a></li>
|
|
<li><a class="nav-link" href="modules-sparkline.html">Sparkline</a></li>
|
|
<li><a class="nav-link" href="modules-sweet-alert.html">Sweet Alert</a></li>
|
|
<li><a class="nav-link" href="modules-toastr.html">Toastr</a></li>
|
|
<li><a class="nav-link" href="modules-vector-map.html">Vector Map</a></li>
|
|
<li><a class="nav-link" href="modules-weather-icon.html">Weather Icon</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="menu-header">Pages</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>Auth</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="auth-forgot-password.html">Forgot Password</a></li>
|
|
<li><a href="auth-login.html">Login</a></li>
|
|
<li><a href="auth-register.html">Register</a></li>
|
|
<li><a href="auth-reset-password.html">Reset Password</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>Errors</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="nav-link" href="errors-503.html">503</a></li>
|
|
<li><a class="nav-link" href="errors-403.html">403</a></li>
|
|
<li><a class="nav-link" href="errors-404.html">404</a></li>
|
|
<li><a class="nav-link" href="errors-500.html">500</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="fas fa-bicycle"></i> <span>Features</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="nav-link" href="features-activities.html">Activities</a></li>
|
|
<li><a class="nav-link" href="features-post-create.html">Post Create</a></li>
|
|
<li><a class="nav-link" href="features-posts.html">Posts</a></li>
|
|
<li><a class="nav-link" href="features-profile.html">Profile</a></li>
|
|
<li><a class="nav-link" href="features-settings.html">Settings</a></li>
|
|
<li><a class="nav-link" href="features-setting-detail.html">Setting Detail</a></li>
|
|
<li><a class="nav-link" href="features-tickets.html">Tickets</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown">
|
|
<a href="#" class="nav-link has-dropdown"><i class="fas fa-ellipsis-h"></i> <span>Utilities</span></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="utilities-contact.html">Contact</a></li>
|
|
<li><a class="nav-link" href="utilities-invoice.html">Invoice</a></li>
|
|
<li><a href="utilities-subscribe.html">Subscribe</a></li>
|
|
</ul>
|
|
</li> <li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>Credits</span></a></li>
|
|
</ul>
|
|
|
|
<div class="mt-4 mb-4 p-3 hide-sidebar-mini">
|
|
<a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
|
|
<i class="fas fa-rocket"></i> Documentation
|
|
</a>
|
|
</div> </aside>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-content">
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h1>List Group</h1>
|
|
<div class="section-header-breadcrumb">
|
|
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
|
<div class="breadcrumb-item"><a href="#">Bootstrap Components</a></div>
|
|
<div class="breadcrumb-item">List Group</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-body">
|
|
<h2 class="section-title">List Group</h2>
|
|
<p class="section-lead">
|
|
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
|
|
</p>
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-md-6 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Basic</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-group">
|
|
<li class="list-group-item">Cras justo odio</li>
|
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
<li class="list-group-item">Morbi leo risus</li>
|
|
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Disabled</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-group">
|
|
<li class="list-group-item">Cras justo odio</li>
|
|
<li class="list-group-item disabled">Dapibus ac facilisis in</li>
|
|
<li class="list-group-item">Morbi leo risus</li>
|
|
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Flush</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item">Cras justo odio</li>
|
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
<li class="list-group-item">Morbi leo risus</li>
|
|
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Badges</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-group">
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Cras justo odio
|
|
<span class="badge badge-primary badge-pill">14</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Dapibus ac facilisis in
|
|
<span class="badge badge-primary badge-pill">2</span>
|
|
</li>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
Morbi leo risus
|
|
<span class="badge badge-primary badge-pill">1</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>JavaScript Behavior</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div class="list-group" id="list-tab" role="tablist">
|
|
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab">Home</a>
|
|
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab">Profile</a>
|
|
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab">Messages</a>
|
|
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab">Settings</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="tab-content" id="nav-tabContent">
|
|
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non.
|
|
</div>
|
|
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
|
|
Deserunt cupidatat anim ullamco ut dolor anim sint nulla amet incididunt tempor ad ut pariatur officia culpa laboris occaecat. Dolor in nisi aliquip in non magna amet nisi sed commodo proident anim deserunt nulla veniam occaecat reprehenderit esse ut eu culpa fugiat nostrud pariatur adipisicing incididunt consequat nisi non amet.
|
|
</div>
|
|
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
|
|
In quis non esse eiusmod sunt fugiat magna pariatur officia anim ex officia nostrud amet nisi pariatur eu est id ut exercitation ex ad reprehenderit dolore nostrud sit ut culpa consequat magna ad labore proident ad qui et tempor exercitation in aute veniam et velit dolore irure qui ex magna ex culpa enim anim ea mollit consequat ullamco exercitation in.
|
|
</div>
|
|
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
|
|
Lorem ipsum culpa in ad velit dolore anim labore incididunt do aliqua sit veniam commodo elit dolore do labore occaecat laborum sed quis proident fugiat sunt pariatur. Cupidatat ut fugiat anim ut dolore excepteur ut voluptate dolore excepteur mollit commodo.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6 col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Active</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-group">
|
|
<li class="list-group-item">Cras justo odio</li>
|
|
<li class="list-group-item active">Dapibus ac facilisis in</li>
|
|
<li class="list-group-item">Morbi leo risus</li>
|
|
<li class="list-group-item">Porta ac consectetur ac</li>
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Link</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="list-group">
|
|
<a href="#" class="list-group-item list-group-item-action active">
|
|
Cras justo odio
|
|
</a>
|
|
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
|
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
|
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
|
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Contextual Classes</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-group">
|
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
|
|
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
|
|
<li class="list-group-item list-group-item-success">A simple success list group item</li>
|
|
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
|
|
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
|
|
<li class="list-group-item list-group-item-info">A simple info list group item</li>
|
|
<li class="list-group-item list-group-item-light">A simple light list group item</li>
|
|
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4>Custom Content</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="list-group">
|
|
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
|
|
<div class="d-flex w-100 justify-content-between">
|
|
<h5 class="mb-1">List group item heading</h5>
|
|
<small>3 days ago</small>
|
|
</div>
|
|
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
|
<small>Donec id elit non mi porta.</small>
|
|
</a>
|
|
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
|
|
<div class="d-flex w-100 justify-content-between">
|
|
<h5 class="mb-1">List group item heading</h5>
|
|
<small class="text-muted">3 days ago</small>
|
|
</div>
|
|
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
|
<small class="text-muted">Donec id elit non mi porta.</small>
|
|
</a>
|
|
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
|
|
<div class="d-flex w-100 justify-content-between">
|
|
<h5 class="mb-1">List group item heading</h5>
|
|
<small class="text-muted">3 days ago</small>
|
|
</div>
|
|
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
|
<small class="text-muted">Donec id elit non mi porta.</small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<footer class="main-footer">
|
|
<div class="footer-left">
|
|
Copyright © 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
|
|
</div>
|
|
<div class="footer-right">
|
|
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- General JS Scripts -->
|
|
<script src="assets/modules/jquery.min.js"></script>
|
|
<script src="assets/modules/popper.js"></script>
|
|
<script src="assets/modules/tooltip.js"></script>
|
|
<script src="assets/modules/bootstrap/js/bootstrap.min.js"></script>
|
|
<script src="assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
|
|
<script src="assets/modules/moment.min.js"></script>
|
|
<script src="assets/js/stisla.js"></script>
|
|
|
|
<!-- JS Libraies -->
|
|
|
|
<!-- Page Specific JS File -->
|
|
|
|
<!-- Template JS File -->
|
|
<script src="assets/js/scripts.js"></script>
|
|
<script src="assets/js/custom.js"></script>
|
|
</body>
|
|
</html> |