File: /var/www/selfanalyse/school/html/ui-list-media.html
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.png">
<title>Adminmart Template - The Ultimate Multipurpose admin template</title>
<!-- Custom CSS -->
<link href="../dist/css/style.min.css" rel="stylesheet">
<!-- This Page CSS -->
<link rel="stylesheet" type="text/css" href="../assets/extra-libs/prism/prism.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper" data-theme="light" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full" data-sidebar-position="fixed" data-header-position="fixed" data-boxed-layout="full">
<!-- ============================================================== -->
<!-- Topbar header - style you can find in pages.scss -->
<!-- ============================================================== -->
<header class="topbar" data-navbarbg="skin6">
<nav class="navbar top-navbar navbar-expand-md">
<div class="navbar-header" data-logobg="skin6">
<!-- This is for the sidebar toggle which is visible on mobile only -->
<a class="nav-toggler waves-effect waves-light d-block d-md-none" href="javascript:void(0)"><i
class="ti-menu ti-close"></i></a>
<!-- ============================================================== -->
<!-- Logo -->
<!-- ============================================================== -->
<div class="navbar-brand">
<!-- Logo icon -->
<a href="index.html">
<b class="logo-icon">
<!-- Dark Logo icon -->
<img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
<!-- Light Logo icon -->
<img src="../assets/images/logo-icon.png" alt="homepage" class="light-logo" />
</b>
<!--End Logo icon -->
<!-- Logo text -->
<span class="logo-text">
<!-- dark Logo text -->
<img src="../assets/images/logo-text.png" alt="homepage" class="dark-logo" />
<!-- Light Logo text -->
<img src="../assets/images/logo-light-text.png" class="light-logo" alt="homepage" />
</span>
</a>
</div>
<!-- ============================================================== -->
<!-- End Logo -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Toggle which is visible on mobile only -->
<!-- ============================================================== -->
<a class="topbartoggler d-block d-md-none waves-effect waves-light" href="javascript:void(0)"
data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i
class="ti-more"></i></a>
</div>
<!-- ============================================================== -->
<!-- End Logo -->
<!-- ============================================================== -->
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<!-- ============================================================== -->
<!-- toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav float-left mr-auto ml-3 pl-1">
<!-- Notification -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle pl-md-3 position-relative" href="javascript:void(0)"
id="bell" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<span><i data-feather="bell" class="svg-icon"></i></span>
<span class="badge badge-primary notify-no rounded-circle">5</span>
</a>
<div class="dropdown-menu dropdown-menu-left mailbox animated bounceInDown">
<ul class="list-style-none">
<li>
<div class="message-center notifications position-relative">
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<div class="btn btn-danger rounded-circle btn-circle"><i
data-feather="airplay" class="text-white"></i></div>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Luanch Admin</h6>
<span class="font-12 text-nowrap d-block text-muted">Just see
the my new
admin!</span>
<span class="font-12 text-nowrap d-block text-muted">9:30 AM</span>
</div>
</a>
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<span class="btn btn-success text-white rounded-circle btn-circle"><i
data-feather="calendar" class="text-white"></i></span>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Event today</h6>
<span
class="font-12 text-nowrap d-block text-muted text-truncate">Just
a reminder that you have event</span>
<span class="font-12 text-nowrap d-block text-muted">9:10 AM</span>
</div>
</a>
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<span class="btn btn-info rounded-circle btn-circle"><i
data-feather="settings" class="text-white"></i></span>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Settings</h6>
<span
class="font-12 text-nowrap d-block text-muted text-truncate">You
can customize this template
as you want</span>
<span class="font-12 text-nowrap d-block text-muted">9:08 AM</span>
</div>
</a>
<!-- Message -->
<a href="javascript:void(0)"
class="message-item d-flex align-items-center border-bottom px-3 py-2">
<span class="btn btn-primary rounded-circle btn-circle"><i
data-feather="box" class="text-white"></i></span>
<div class="w-75 d-inline-block v-middle pl-2">
<h6 class="message-title mb-0 mt-1">Pavan kumar</h6> <span
class="font-12 text-nowrap d-block text-muted">Just
see the my admin!</span>
<span class="font-12 text-nowrap d-block text-muted">9:02 AM</span>
</div>
</a>
</div>
</li>
<li>
<a class="nav-link pt-3 text-center text-dark" href="javascript:void(0);">
<strong>Check all notifications</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
</div>
</li>
<!-- End Notification -->
<!-- ============================================================== -->
<!-- create new -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i data-feather="settings" class="svg-icon"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item d-none d-md-block">
<a class="nav-link" href="javascript:void(0)">
<div class="customize-input">
<select
class="custom-select form-control bg-white custom-radius custom-shadow border-0">
<option selected>EN</option>
<option value="1">AB</option>
<option value="2">AK</option>
<option value="3">BE</option>
</select>
</div>
</a>
</li>
</ul>
<!-- ============================================================== -->
<!-- Right side toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav float-right">
<!-- ============================================================== -->
<!-- Search -->
<!-- ============================================================== -->
<li class="nav-item d-none d-md-block">
<a class="nav-link" href="javascript:void(0)">
<form>
<div class="customize-input">
<input class="form-control custom-shadow custom-radius border-0 bg-white"
type="search" placeholder="Search" aria-label="Search">
<i class="form-control-icon" data-feather="search"></i>
</div>
</form>
</a>
</li>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<img src="../assets/images/users/profile-pic.jpg" alt="user" class="rounded-circle"
width="40">
<span class="ml-2 d-none d-lg-inline-block"><span>Hello,</span> <span
class="text-dark">Jason Doe</span> <i data-feather="chevron-down"
class="svg-icon"></i></span>
</a>
<div class="dropdown-menu dropdown-menu-right user-dd animated flipInY">
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="user"
class="svg-icon mr-2 ml-1"></i>
My Profile</a>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="credit-card"
class="svg-icon mr-2 ml-1"></i>
My Balance</a>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="mail"
class="svg-icon mr-2 ml-1"></i>
Inbox</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="settings"
class="svg-icon mr-2 ml-1"></i>
Account Setting</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)"><i data-feather="power"
class="svg-icon mr-2 ml-1"></i>
Logout</a>
<div class="dropdown-divider"></div>
<div class="pl-4 p-3"><a href="javascript:void(0)" class="btn btn-sm btn-info">View
Profile</a></div>
</div>
</li>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
</ul>
</div>
</nav>
</header>
<!-- ============================================================== -->
<!-- End Topbar header -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<aside class="left-sidebar" data-sidebarbg="skin6">
<!-- Sidebar scroll-->
<div class="scroll-sidebar" data-sidebarbg="skin6">
<!-- Sidebar navigation-->
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="index.html"
aria-expanded="false"><i data-feather="home" class="feather-icon"></i><span
class="hide-menu">Dashboard</span></a></li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Applications</span></li>
<li class="sidebar-item"> <a class="sidebar-link" href="ticket-list.html"
aria-expanded="false"><i data-feather="tag" class="feather-icon"></i><span
class="hide-menu">Ticket List
</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="app-chat.html"
aria-expanded="false"><i data-feather="message-square" class="feather-icon"></i><span
class="hide-menu">Chat</span></a></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="app-calendar.html"
aria-expanded="false"><i data-feather="calendar" class="feather-icon"></i><span
class="hide-menu">Calendar</span></a></li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Components</span></li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="file-text" class="feather-icon"></i><span
class="hide-menu">Forms </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="form-inputs.html" class="sidebar-link"><span
class="hide-menu"> Form Inputs
</span></a>
</li>
<li class="sidebar-item"><a href="form-input-grid.html" class="sidebar-link"><span
class="hide-menu"> Form Grids
</span></a>
</li>
<li class="sidebar-item"><a href="form-checkbox-radio.html" class="sidebar-link"><span
class="hide-menu"> Checkboxes &
Radios
</span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="grid" class="feather-icon"></i><span
class="hide-menu">Tables </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="table-basic.html" class="sidebar-link"><span
class="hide-menu"> Basic Table
</span></a>
</li>
<li class="sidebar-item"><a href="table-dark-basic.html" class="sidebar-link"><span
class="hide-menu"> Dark Basic Table
</span></a>
</li>
<li class="sidebar-item"><a href="table-sizing.html" class="sidebar-link"><span
class="hide-menu">
Sizing Table
</span></a>
</li>
<li class="sidebar-item"><a href="table-layout-coloured.html" class="sidebar-link"><span
class="hide-menu">
Coloured
Table Layout
</span></a>
</li>
<li class="sidebar-item"><a href="table-datatable-basic.html" class="sidebar-link"><span
class="hide-menu">
Basic
Datatables
Layout
</span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="bar-chart" class="feather-icon"></i><span
class="hide-menu">Charts </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="chart-morris.html" class="sidebar-link"><span
class="hide-menu"> Morris Chart
</span></a>
</li>
<li class="sidebar-item"><a href="chart-chart-js.html" class="sidebar-link"><span
class="hide-menu"> ChartJs
</span></a>
</li>
<li class="sidebar-item"><a href="chart-knob.html" class="sidebar-link"><span
class="hide-menu">
Knob Chart
</span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="box" class="feather-icon"></i><span
class="hide-menu">UI Elements </span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="ui-buttons.html" class="sidebar-link"><span
class="hide-menu"> Buttons
</span></a>
</li>
<li class="sidebar-item"><a href="ui-modals.html" class="sidebar-link"><span
class="hide-menu"> Modals </span></a>
</li>
<li class="sidebar-item"><a href="ui-tab.html" class="sidebar-link"><span
class="hide-menu"> Tabs </span></a></li>
<li class="sidebar-item"><a href="ui-tooltip-popover.html" class="sidebar-link"><span
class="hide-menu"> Tooltip &
Popover</span></a></li>
<li class="sidebar-item"><a href="ui-notification.html" class="sidebar-link"><span
class="hide-menu">Notification</span></a></li>
<li class="sidebar-item"><a href="ui-progressbar.html" class="sidebar-link"><span
class="hide-menu">Progressbar</span></a></li>
<li class="sidebar-item"><a href="ui-typography.html" class="sidebar-link"><span
class="hide-menu">Typography</span></a></li>
<li class="sidebar-item"><a href="ui-bootstrap.html" class="sidebar-link"><span
class="hide-menu">Bootstrap
UI</span></a></li>
<li class="sidebar-item"><a href="ui-breadcrumb.html" class="sidebar-link"><span
class="hide-menu">Breadcrumb</span></a></li>
<li class="sidebar-item"><a href="ui-list-media.html" class="sidebar-link"><span
class="hide-menu">List
Media</span></a></li>
<li class="sidebar-item"><a href="ui-grid.html" class="sidebar-link"><span
class="hide-menu"> Grid </span></a></li>
<li class="sidebar-item"><a href="ui-carousel.html" class="sidebar-link"><span
class="hide-menu">
Carousel</span></a></li>
<li class="sidebar-item"><a href="ui-scrollspy.html" class="sidebar-link"><span
class="hide-menu">
Scrollspy</span></a></li>
<li class="sidebar-item"><a href="ui-toasts.html" class="sidebar-link"><span
class="hide-menu"> Toasts</span></a>
</li>
<li class="sidebar-item"><a href="ui-spinner.html" class="sidebar-link"><span
class="hide-menu"> Spinner </span></a>
</li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="ui-cards.html"
aria-expanded="false"><i data-feather="sidebar" class="feather-icon"></i><span
class="hide-menu">Cards
</span></a>
</li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Authentication</span></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="authentication-login1.html"
aria-expanded="false"><i data-feather="lock" class="feather-icon"></i><span
class="hide-menu">Login
</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link"
href="authentication-register1.html" aria-expanded="false"><i data-feather="lock"
class="feather-icon"></i><span class="hide-menu">Register
</span></a>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="feather" class="feather-icon"></i><span
class="hide-menu">Icons
</span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="icon-fontawesome.html" class="sidebar-link"><span
class="hide-menu"> Fontawesome Icons </span></a></li>
<li class="sidebar-item"><a href="icon-simple-lineicon.html" class="sidebar-link"><span
class="hide-menu"> Simple Line Icons </span></a></li>
</ul>
</li>
<li class="sidebar-item"> <a class="sidebar-link has-arrow" href="javascript:void(0)"
aria-expanded="false"><i data-feather="crosshair" class="feather-icon"></i><span
class="hide-menu">Multi
level
dd</span></a>
<ul aria-expanded="false" class="collapse first-level base-level-line">
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item 1.1</span></a>
</li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item 1.2</span></a>
</li>
<li class="sidebar-item"> <a class="has-arrow sidebar-link" href="javascript:void(0)"
aria-expanded="false"><span class="hide-menu">Menu 1.3</span></a>
<ul aria-expanded="false" class="collapse second-level base-level-line">
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.1</span></a></li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.2</span></a></li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.3</span></a></li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.3.4</span></a></li>
</ul>
</li>
<li class="sidebar-item"><a href="javascript:void(0)" class="sidebar-link"><span
class="hide-menu"> item
1.4</span></a></li>
</ul>
</li>
<li class="list-divider"></li>
<li class="nav-small-cap"><span class="hide-menu">Extra</span></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="../../docs/docs.html"
aria-expanded="false"><i data-feather="edit-3" class="feather-icon"></i><span
class="hide-menu">Documentation</span></a></li>
<li class="sidebar-item"> <a class="sidebar-link sidebar-link" href="authentication-login1.html"
aria-expanded="false"><i data-feather="log-out" class="feather-icon"></i><span
class="hide-menu">Logout</span></a></li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<!-- ============================================================== -->
<!-- End Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Page wrapper -->
<!-- ============================================================== -->
<div class="page-wrapper">
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="page-breadcrumb">
<div class="row">
<div class="col-7 align-self-center">
<h4 class="page-title text-truncate text-dark font-weight-medium mb-1">List Media</h4>
<div class="d-flex align-items-center">
<nav aria-label="breadcrumb">
<ol class="breadcrumb m-0 p-0">
<li class="breadcrumb-item"><a href="index.html" class="text-muted">Home</a></li>
<li class="breadcrumb-item text-muted active" aria-current="page">Library</li>
</ol>
</nav>
</div>
</div>
<div class="col-5 align-self-center">
<div class="customize-input float-right">
<select class="custom-select custom-select-set form-control bg-white border-0 custom-shadow custom-radius">
<option selected>Aug 19</option>
<option value="1">July 19</option>
<option value="2">Jun 19</option>
</select>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Container fluid -->
<!-- ============================================================== -->
<div class="container-fluid">
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<!-- .row -->
<div class="row">
<div class="col-md-4 col-sm-4 p-4">
<h4 class="card-title">Basic example</h4>
<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 class="col-md-4 col-sm-4 p-4">
<h4 class="card-title">Linked items</h4>
<div class="list-group"> <a href="javascript:void(0)"
class="list-group-item active">Cras justo odio</a> <a
href="javascript:void(0)" class="list-group-item">Dapibus ac facilisis
in</a> <a href="javascript:void(0)" class="list-group-item">Morbi leo
risus</a> <a href="javascript:void(0)" class="list-group-item">Porta ac
consectetur ac</a> <a href="javascript:void(0)"
class="list-group-item">Vestibulum at eros</a> </div>
</div>
<div class="col-md-4 col-sm-4 p-4">
<h4 class="card-title">With Badges</h4>
<ul class="list-group list-group-full">
<li class="list-group-item"> Cras justo odio <span
class="badge badge-info ml-auto">6</span></li>
<li class="list-group-item"> Dapibus ac facilisis in </li>
<li class="list-group-item"> Morbi leo risus <span
class="badge badge-danger ml-auto">3</span></li>
<li class="list-group-item active"> Porta ac consectetur ac <span
class="badge badge-success ml-auto">10</span></li>
<li class="list-group-item"> Vestibulum at eros </li>
</ul>
</div>
</div>
<!-- / .row -->
<!-- .row -->
<div class="row">
<div class="col-md-4 col-sm-4 p-4">
<h4 class="card-title">Button items</h4>
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis
in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur
ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
</div>
<div class="col-md-4 col-sm-4 p-4">
<h4 class="card-title">Disabled items</h4>
<div class="list-group">
<a href="javascript:void(0)" class="list-group-item disabled">Cras justo
odio </a>
<a href="javascript:void(0)" class="list-group-item">Dapibus ac facilisis
in</a>
<a href="javascript:void(0)" class="list-group-item">Morbi leo risus</a>
<a href="javascript:void(0)" class="list-group-item">Porta ac consectetur
ac</a>
<a href="javascript:void(0)" class="list-group-item">Vestibulum at eros</a>
</div>
</div>
<div class="col-md-4 col-sm-4 p-4">
<h4 class="card-title">Disabled items</h4>
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in
</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero
</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac
</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
<li class="list-group-item list-group-item-default">Vestibulum at eros</li>
</ul>
</div>
</div>
<!-- /.row -->
<!-- .row -->
<div class="row">
<div class="col-md-8 p-4">
<h4 class="card-title">Media object</h4>
<ul class="list-unstyled">
<li class="media">
<img class="d-flex mr-3" src="../assets/images/users/1.jpg" width="60"
alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media my-4">
<img class="d-flex mr-3" src="../assets/images/users/2.jpg" width="60"
alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media">
<img class="d-flex mr-3" src="../assets/images/users/3.jpg" width="60"
alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.
<div class="media mt-3">
<a class="d-flex pr-3" href="javascript:void(0)">
<img src="../assets/images/users/4.jpg" width="60"
height="60" alt="Generic placeholder image">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5> Cras sit amet nibh
libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at,
tempus viverra turpis. Fusce condimentum nunc ac nisi
vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="col-md-4 col-sm-12 p-4">
<h4 class="card-title">Custom content</h4>
<div class="list-group">
<a href="javascript:void(0)"
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 text-white">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="javascript:void(0)"
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="javascript:void(0)"
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 class="col-md-8 mt-4">
<h4 class="card-title">JavaScript behavior</h4>
<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" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action"
id="list-profile-list" data-toggle="list" href="#list-profile"
role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action"
id="list-messages-list" data-toggle="list" href="#list-messages"
role="tab" aria-controls="messages">Messages</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">
Irure enim occaecat labore sit qui aliquip reprehenderit amet
velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia
magna sit occaecat laboris sunt dolor.
</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel"
aria-labelledby="list-profile-list">
Irure enim occaecat labore sit qui aliquip reprehenderit amet
velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia
magna sit occaecat laboris sunt dolor.
</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel"
aria-labelledby="list-messages-list">
Irure enim occaecat labore sit qui aliquip reprehenderit amet
velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia
magna sit occaecat laboris sunt dolor.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Media heading</h5>
<div class="media">
<img class="mr-3 img-fluid w-25" src="../assets/images/big/img1.jpg"
alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5> Cras sit amet nibh libero, in
gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
in faucibus.
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Nesting</h5>
<div class="media">
<img class="mr-3 w-25" src="../assets/images/big/img1.jpg"
alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Media heading</h5> Cras sit amet nibh libero, in
gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
in faucibus.
<div class="media mt-3">
<a class="pr-3 w-25" href="#">
<img src="../assets/images/big/img1.jpg" class="w-100"
alt="Generic placeholder image">
</a>
<div class="media-body">
<h5 class="mt-0">Media heading</h5> Cras sit amet nibh libero,
in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
Cras purus odio, vestibulum in vulputate at, tempus viverra
turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Alignment</h5>
<div class="media">
<img class="align-self-start w-25 mr-3" src="../assets/images/big/img1.jpg"
alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Top-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu
leo. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Center-aligned media</h5>
<div class="media">
<img class="align-self-center w-25 mr-3" src="../assets/images/big/img1.jpg"
alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Center-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis
ornare vel eu leo. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Bottom-aligned media</h5>
<div class="media">
<img class="align-self-end mr-3 w-25" src="../assets/images/big/img1.jpg"
alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Bottom-aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
<p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis
ornare vel eu leo. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Order</h5>
<div class="media">
<div class="media-body">
<h5 class="mt-0 mb-1">Media object</h5> Cras sit amet nibh libero, in
gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
in faucibus.
</div>
<img class="ml-3 w-25" src="../assets/images/big/img1.jpg"
alt="Generic placeholder image">
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Media list</h5>
<ul class="list-unstyled">
<li class="media">
<img class="mr-3 w-25" src="../assets/images/big/img1.jpg"
alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media my-4">
<img class="mr-3 w-25" src="../assets/images/big/img1.jpg"
alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media">
<img class="mr-3 w-25" src="../assets/images/big/img1.jpg"
alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5> Cras sit amet
nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus
viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Page Content -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Container fluid -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- footer -->
<!-- ============================================================== -->
<footer class="footer text-center text-muted">
All Rights Reserved by Adminmart. Designed and Developed by <a
href="https://wrappixel.com">WrapPixel</a>.
</footer>
<!-- ============================================================== -->
<!-- End footer -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Page wrapper -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="../assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="../assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- apps -->
<!-- apps -->
<script src="../dist/js/app-style-switcher.js"></script>
<script src="../dist/js/feather.min.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="../assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="../assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<!-- themejs -->
<!--Menu sidebar -->
<script src="../dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="../dist/js/custom.min.js"></script>
<!-- This Page JS -->
<script src="../assets/extra-libs/prism/prism.js"></script>
</body>
</html>