| Server IP : 172.67.201.108 / Your IP : 216.73.216.37 Web Server : Apache/2.4.68 (Amazon Linux) OpenSSL/3.5.5 System : Linux ip-172-31-69-123.ec2.internal 6.1.176-223.369.amzn2023.x86_64 #1 SMP PREEMPT_DYNAMIC Fri Jul 24 13:34:27 UTC 2026 x86_64 User : ec2-user ( 1000) PHP Version : 8.4.23 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /home/home2/cgny/nympadmin/theme/horizontal/ |
Upload File : |
<!DOCTYPE html>
<html 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>Admin Press Admin Template - The Ultimate Bootstrap 4 Admin Template</title>
<!-- Bootstrap Core CSS -->
<link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- You can change the theme colors from here -->
<link href="css/colors/blue.css" id="theme" rel="stylesheet">
<!-- 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 class="fix-header card-no-border logo-center">
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<svg class="circular" viewBox="25 25 50 50">
<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper">
<!-- ============================================================== -->
<!-- Topbar header - style you can find in pages.scss -->
<!-- ============================================================== -->
<header class="topbar">
<nav class="navbar top-navbar navbar-expand-md navbar-light">
<!-- ============================================================== -->
<!-- Logo -->
<!-- ============================================================== -->
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<!-- Logo icon --><b>
<!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
<!-- Dark Logo icon -->
<img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
<!-- Light Logo icon -->
<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo" />
</b>
<!--End Logo icon -->
<!-- Logo text --><span>
<!-- 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 -->
<!-- ============================================================== -->
<div class="navbar-collapse">
<!-- ============================================================== -->
<!-- toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav mr-auto mt-md-0">
<!-- This is -->
<li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="mdi mdi-menu"></i></a> </li>
<!-- ============================================================== -->
<!-- Comment -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted text-muted waves-effect waves-dark" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-message"></i>
<div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
</a>
<div class="dropdown-menu mailbox animated slideInUp">
<ul>
<li>
<div class="drop-title">Notifications</div>
</li>
<li>
<div class="message-center">
<!-- Message -->
<a href="#">
<div class="btn btn-danger btn-circle"><i class="fa fa-link"></i></div>
<div class="mail-contnet">
<h5>Luanch Admin</h5> <span class="mail-desc">Just see the my new admin!</span> <span class="time">9:30 AM</span> </div>
</a>
<!-- Message -->
<a href="#">
<div class="btn btn-success btn-circle"><i class="ti-calendar"></i></div>
<div class="mail-contnet">
<h5>Event today</h5> <span class="mail-desc">Just a reminder that you have event</span> <span class="time">9:10 AM</span> </div>
</a>
<!-- Message -->
<a href="#">
<div class="btn btn-info btn-circle"><i class="ti-settings"></i></div>
<div class="mail-contnet">
<h5>Settings</h5> <span class="mail-desc">You can customize this template as you want</span> <span class="time">9:08 AM</span> </div>
</a>
<!-- Message -->
<a href="#">
<div class="btn btn-primary btn-circle"><i class="ti-user"></i></div>
<div class="mail-contnet">
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
</a>
</div>
</li>
<li>
<a class="nav-link text-center" href="javascript:void(0);"> <strong>Check all notifications</strong> <i class="fa fa-angle-right"></i> </a>
</li>
</ul>
</div>
</li>
<!-- ============================================================== -->
<!-- End Comment -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Messages -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="" id="2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="mdi mdi-email"></i>
<div class="notify"> <span class="heartbit"></span> <span class="point"></span> </div>
</a>
<div class="dropdown-menu mailbox animated slideInUp" aria-labelledby="2">
<ul>
<li>
<div class="drop-title">You have 4 new messages</div>
</li>
<li>
<div class="message-center">
<!-- Message -->
<a href="#">
<div class="user-img"> <img src="../assets/images/users/1.jpg" alt="user" class="img-circle"> <span class="profile-status online pull-right"></span> </div>
<div class="mail-contnet">
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:30 AM</span> </div>
</a>
<!-- Message -->
<a href="#">
<div class="user-img"> <img src="../assets/images/users/2.jpg" alt="user" class="img-circle"> <span class="profile-status busy pull-right"></span> </div>
<div class="mail-contnet">
<h5>Sonu Nigam</h5> <span class="mail-desc">I've sung a song! See you at</span> <span class="time">9:10 AM</span> </div>
</a>
<!-- Message -->
<a href="#">
<div class="user-img"> <img src="../assets/images/users/3.jpg" alt="user" class="img-circle"> <span class="profile-status away pull-right"></span> </div>
<div class="mail-contnet">
<h5>Arijit Sinh</h5> <span class="mail-desc">I am a singer!</span> <span class="time">9:08 AM</span> </div>
</a>
<!-- Message -->
<a href="#">
<div class="user-img"> <img src="../assets/images/users/4.jpg" alt="user" class="img-circle"> <span class="profile-status offline pull-right"></span> </div>
<div class="mail-contnet">
<h5>Pavan kumar</h5> <span class="mail-desc">Just see the my admin!</span> <span class="time">9:02 AM</span> </div>
</a>
</div>
</li>
<li>
<a class="nav-link text-center" href="javascript:void(0);"> <strong>See all e-Mails</strong> <i class="fa fa-angle-right"></i> </a>
</li>
</ul>
</div>
</li>
<!-- ============================================================== -->
<!-- End Messages -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Messages -->
<!-- ============================================================== -->
<li class="nav-item dropdown mega-dropdown"> <a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="mdi mdi-view-grid"></i></a>
<div class="dropdown-menu animated slideInUp">
<ul class="mega-dropdown-menu row">
<li class="col-lg-3 col-xlg-2 m-b-30">
<h4 class="m-b-20">CAROUSEL</h4>
<!-- CAROUSEL -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="container"> <img class="d-block img-fluid" src="../assets/images/big/img1.jpg" alt="First slide"></div>
</div>
<div class="carousel-item">
<div class="container"><img class="d-block img-fluid" src="../assets/images/big/img2.jpg" alt="Second slide"></div>
</div>
<div class="carousel-item">
<div class="container"><img class="d-block img-fluid" src="../assets/images/big/img3.jpg" alt="Third slide"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
<!-- End CAROUSEL -->
</li>
<li class="col-lg-3 m-b-30">
<h4 class="m-b-20">ACCORDION</h4>
<!-- Accordian -->
<div id="accordion" class="nav-accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h5> </div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high. </div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h5> </div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h5> </div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. </div>
</div>
</div>
</div>
</li>
<li class="col-lg-3 m-b-30">
<h4 class="m-b-20">CONTACT US</h4>
<!-- Contact -->
<form>
<div class="form-group">
<input type="text" class="form-control" id="exampleInputname1" placeholder="Enter Name"> </div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email"> </div>
<div class="form-group">
<textarea class="form-control" id="exampleTextarea" rows="3" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-info">Submit</button>
</form>
</li>
<li class="col-lg-3 col-xlg-4 m-b-30">
<h4 class="m-b-20">List style</h4>
<!-- List style -->
<ul class="list-style-none">
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> You can give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Another Give link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Forth link</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-success"></i> Another fifth link</a></li>
</ul>
</li>
</ul>
</div>
</li>
<!-- ============================================================== -->
<!-- End Messages -->
<!-- ============================================================== -->
</ul>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
<ul class="navbar-nav my-lg-0">
<!-- ============================================================== -->
<!-- Search -->
<!-- ============================================================== -->
<li class="nav-item hidden-sm-down search-box"> <a class="nav-link hidden-sm-down text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="ti-search"></i></a>
<form class="app-search">
<input type="text" class="form-control" placeholder="Search & enter"> <a class="srh-btn"><i class="ti-close"></i></a> </form>
</li>
<!-- ============================================================== -->
<!-- Language -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="flag-icon flag-icon-us"></i></a>
<div class="dropdown-menu dropdown-menu-right scale-up"> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-in"></i> India</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-fr"></i> French</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-cn"></i> China</a> <a class="dropdown-item" href="#"><i class="flag-icon flag-icon-de"></i> Dutch</a> </div>
</li>
<!-- ============================================================== -->
<!-- Profile -->
<!-- ============================================================== -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-muted waves-effect waves-dark" href="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="../assets/images/users/1.jpg" alt="user" class="profile-pic" /></a>
<div class="dropdown-menu dropdown-menu-right scale-up">
<ul class="dropdown-user">
<li>
<div class="dw-user-box">
<div class="u-img"><img src="../assets/images/users/1.jpg" alt="user"></div>
<div class="u-text">
<h4>Steave Jobs</h4>
<p class="text-muted">[email protected]</p><a href="pages-profile.html" class="btn btn-rounded btn-danger btn-sm">View Profile</a></div>
</div>
</li>
<li role="separator" class="divider"></li>
<li><a href="#"><i class="ti-user"></i> My Profile</a></li>
<li><a href="#"><i class="ti-wallet"></i> My Balance</a></li>
<li><a href="#"><i class="ti-email"></i> Inbox</a></li>
<li role="separator" class="divider"></li>
<li><a href="#"><i class="ti-settings"></i> Account Setting</a></li>
<li role="separator" class="divider"></li>
<li><a href="#"><i class="fa fa-power-off"></i> Logout</a></li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
</header>
<!-- ============================================================== -->
<!-- End Topbar header -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<aside class="left-sidebar">
<!-- Sidebar scroll-->
<div class="scroll-sidebar">
<!-- Sidebar navigation-->
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li class="nav-small-cap">PERSONAL</li>
<li> <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-gauge"></i><span class="hide-menu">Dashboard</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="index.html">Minimal </a></li>
<li><a href="index2.html">Analytical</a></li>
<li><a href="index3.html">Demographical</a></li>
<li><a href="index4.html">Modern</a></li>
</ul>
</li>
<li> <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-bullseye"></i><span class="hide-menu">Apps</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="app-calendar.html">Calendar</a></li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Inbox</a>
<ul aria-expanded="false" class="collapse">
<li><a href="app-email.html">Mailbox</a></li>
<li><a href="app-email-detail.html">Mailbox Detail</a></li>
<li><a href="app-compose.html">Compose Mail</a></li>
</ul>
</li>
<li><a href="app-chat.html">Chat app</a></li>
<li><a href="app-ticket.html">Support Ticket</a></li>
<li><a href="app-contact.html">Contact / Employee</a></li>
<li><a href="app-contact2.html">Contact Grid</a></li>
<li><a href="app-contact-detail.html">Contact Detail</a></li>
</ul>
</li>
<li class="three-column"> <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-chart-bubble"></i><span class="hide-menu">Ui Elements</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="ui-cards.html">Cards</a></li>
<li><a href="ui-user-card.html">User Cards</a></li>
<li><a href="ui-buttons.html">Buttons</a></li>
<li><a href="ui-modals.html">Modals</a></li>
<li><a href="ui-tab.html">Tab</a></li>
<li><a href="ui-tooltip-popover.html">Tooltip & Popover</a></li>
<li><a href="ui-tooltip-stylish.html">Tooltip stylish</a></li>
<li><a href="ui-sweetalert.html">Sweet Alert</a></li>
<li><a href="ui-notification.html">Notification</a></li>
<li><a href="ui-progressbar.html">Progressbar</a></li>
<li><a href="ui-nestable.html">Nestable</a></li>
<li><a href="ui-range-slider.html">Range slider</a></li>
<li><a href="ui-timeline.html">Timeline</a></li>
<li><a href="ui-typography.html">Typography</a></li>
<li><a href="ui-horizontal-timeline.html">Horizontal Timeline</a></li>
<li><a href="ui-session-timeout.html">Session Timeout</a></li>
<li><a href="ui-session-ideal-timeout.html">Session Ideal Timeout</a></li>
<li><a href="ui-bootstrap.html">Bootstrap Ui</a></li>
<li><a href="ui-breadcrumb.html">Breadcrumb</a></li>
<li><a href="ui-bootstrap-switch.html">Bootstrap Switch</a></li>
<li><a href="ui-list-media.html">List Media</a></li>
<li><a href="ui-ribbons.html">Ribbons</a></li>
<li><a href="ui-grid.html">Grid</a></li>
<li><a href="ui-carousel.html">Carousel</a></li>
<li><a href="ui-date-paginator.html">Date-paginator</a></li>
<li><a href="ui-dragable-portlet.html">Dragable Portlet</a></li>
<li><a href="ui-spinner.html">Spinner</a></li>
<li><a href="ui-scrollspy.html">Scrollspy</a></li>
<li><a href="ui-toasts.html">Toasts</a></li>
</ul>
</li>
<li class="two-column"> <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-book-open-variant"></i><span class="hide-menu">Pages</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="starter-kit.html">Starter Kit</a></li>
<li><a href="pages-profile.html">Profile page</a></li>
<li><a href="pages-animation.html">Animation</a></li>
<li><a href="pages-fix-innersidebar.html">Sticky Left sidebar</a></li>
<li><a href="pages-fix-inner-right-sidebar.html">Sticky Right sidebar</a></li>
<li><a href="pages-invoice.html">Invoice</a></li>
<li><a href="pages-treeview.html">Treeview</a></li>
<li><a href="pages-utility-classes.html">Helper Classes</a></li>
<li><a href="pages-search-result.html">Search result</a></li>
<li><a href="pages-scroll.html">Scrollbar</a></li>
<li><a href="pages-pricing.html">Pricing</a></li>
<li><a href="pages-lightbox-popup.html">Lighbox popup</a></li>
<li><a href="pages-gallery.html">Gallery</a></li>
<li><a href="pages-faq.html">Faqs</a></li>
<li><a href="#" class="has-arrow">Error Pages</a>
<ul aria-expanded="false" class="collapse">
<li><a href="pages-error-400.html">400</a></li>
<li><a href="pages-error-403.html">403</a></li>
<li><a href="pages-error-404.html">404</a></li>
<li><a href="pages-error-500.html">500</a></li>
<li><a href="pages-error-503.html">503</a></li>
</ul>
</li>
<li><a href="#" class="has-arrow">Authentication</a>
<ul aria-expanded="false" class="collapse">
<li><a href="pages-login.html">Login 1</a></li>
<li><a href="pages-login-2.html">Login 2</a></li>
<li><a href="pages-register.html">Register</a></li>
<li><a href="pages-register2.html">Register 2</a></li>
<li><a href="pages-lockscreen.html">Lockscreen</a></li>
<li><a href="pages-recover-password.html">Recover password</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-small-cap">FORMS, TABLE & WIDGETS</li>
<li class="two-column"> <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-file"></i><span class="hide-menu">Forms</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="form-basic.html">Basic Forms</a></li>
<li><a href="form-layout.html">Form Layouts</a></li>
<li><a href="form-addons.html">Form Addons</a></li>
<li><a href="form-material.html">Form Material</a></li>
<li><a href="form-float-input.html">Floating Lable</a></li>
<li><a href="form-pickers.html">Form Pickers</a></li>
<li><a href="form-upload.html">File Upload</a></li>
<li><a href="form-mask.html">Form Mask</a></li>
<li><a href="form-validation.html">Form Validation</a></li>
<li><a href="form-bootstrap-validation.html">Form Bootstrap Validation</a></li>
<li><a href="form-dropzone.html">File Dropzone</a></li>
<li><a href="form-icheck.html">Icheck control</a></li>
<li><a href="form-img-cropper.html">Image Cropper</a></li>
<li><a href="form-bootstrapwysihtml5.html">HTML5 Editor</a></li>
<li><a href="form-typehead.html">Form Typehead</a></li>
<li><a href="form-wizard.html">Form Wizard</a></li>
<li><a href="form-xeditable.html">Xeditable Editor</a></li>
<li><a href="form-summernote.html">Summernote Editor</a></li>
<li><a href="form-tinymce.html">Tinymce Editor</a></li>
</ul>
</li>
<li> <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-table"></i><span class="hide-menu">Tables</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="table-basic.html">Basic Tables</a></li>
<li><a href="table-layout.html">Table Layouts</a></li>
<li><a href="table-data-table.html">Data Tables</a></li>
<li><a href="table-footable.html">Footable</a></li>
<li><a href="table-jsgrid.html">Js Grid Table</a></li>
<li><a href="table-responsive.html">Responsive Table</a></li>
<li><a href="table-bootstrap.html">Bootstrap Tables</a></li>
<li><a href="table-editable-table.html">Editable Table</a></li>
</ul>
</li>
<li>
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-widgets"></i><span class="hide-menu">Extra</span></a>
<ul aria-expanded="false" class="collapse">
<li>
<a class="has-arrow " href="#" aria-expanded="false">Widgets</a>
<ul aria-expanded="false" class="collapse">
<li><a href="widget-apps.html">Data Widgets</a></li>
<li><a href="widget-data.html">Statestic Widgets</a></li>
</ul>
</li>
<li>
<a class="has-arrow " href="#" aria-expanded="false">Maps</a>
<ul aria-expanded="false" class="collapse">
<li><a href="map-google.html">Google Maps</a></li>
<li><a href="map-vector.html">Vector Maps</a></li>
</ul>
</li>
<li>
<a class="has-arrow " href="#" aria-expanded="false">Icons</a>
<ul aria-expanded="false" class="collapse">
<li><a href="icon-material.html">Material Icons</a></li>
<li><a href="icon-fontawesome.html">Fontawesome Icons</a></li>
<li><a href="icon-themify.html">Themify Icons</a></li>
<li><a href="icon-linea.html">Linea Icons</a></li>
<li><a href="icon-weather.html">Weather Icons</a></li>
<li><a href="icon-simple-lineicon.html">Simple Lineicons</a></li>
<li><a href="icon-flag.html">Flag Icons</a></li>
</ul>
</li>
<li>
<a class="has-arrow " href="#" aria-expanded="false">Charts</a>
<ul aria-expanded="false" class="collapse">
<li><a href="chart-morris.html">Morris Chart</a></li>
<li><a href="chart-chartist.html">Chartis Chart</a></li>
<li><a href="chart-echart.html">Echarts</a></li>
<li><a href="chart-flot.html">Flot Chart</a></li>
<li><a href="chart-knob.html">Knob Chart</a></li>
<li><a href="chart-chart-js.html">Chartjs</a></li>
<li><a href="chart-sparkline.html">Sparkline Chart</a></li>
<li><a href="chart-extra-chart.html">Extra chart</a></li>
<li><a href="chart-peity.html">Peity Charts</a></li>
</ul>
</li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Page Layout</a>
<ul aria-expanded="false" class="collapse">
<li><a href="layout-single-column.html">1 Column</a></li>
<li><a href="layout-fix-header.html">Fix header</a></li>
<li><a href="layout-fix-sidebar.html">Fix sidebar</a></li>
<li><a href="layout-fix-header-sidebar.html">Fixe header & Sidebar</a></li>
<li><a href="layout-boxed.html">Boxed Layout</a></li>
<li><a href="layout-logo-center.html">Logo in Center</a></li>
</ul>
</li>
<li>
</li>
</ul>
</li>
<li> <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-arrange-send-backward"></i><span class="hide-menu">Multi level dd</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="#">item 1.1</a></li>
<li><a href="#">item 1.2</a></li>
<li> <a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
<ul aria-expanded="false" class="collapse">
<li><a href="#">item 1.3.1</a></li>
<li><a href="#">item 1.3.2</a></li>
<li><a href="#">item 1.3.3</a></li>
<li><a href="#">item 1.3.4</a></li>
</ul>
</li>
<li><a href="#">item 1.4</a></li>
</ul>
</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="row page-titles">
<div class="col-md-5 align-self-center">
<h3 class="text-themecolor">Grid</h3>
</div>
<div class="col-md-7 align-self-center">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item">Ui Element</li>
<li class="breadcrumb-item active">Grid</li>
</ol>
</div>
<div>
<button class="right-side-toggle waves-effect waves-light btn-inverse btn btn-circle btn-sm pull-right m-l-10"><i class="ti-settings text-white"></i></button>
</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">
<h4 class="card-title">Grid options</h4>
<h6 class="card-subtitle">See how aspects of the Bootstrap grid system work across multiple devices with a handy table. check the <a href="https://v4-alpha.getbootstrap.com/layout/grid/">official website grid page</a></h6>
<div class="table-responsive">
<table class="table table-bordered table-striped ">
<thead>
<tr>
<th></th>
<th class="text-center"> Extra small
<br> <small><576px</small> </th>
<th class="text-center"> Small
<br> <small>≥576px</small> </th>
<th class="text-center"> Medium
<br> <small>≥768px</small> </th>
<th class="text-center"> Large
<br> <small>≥992px</small> </th>
<th class="text-center"> Extra large
<br> <small>≥1200px</small> </th>
</tr>
</thead>
<tbody>
<tr>
<th class="text-nowrap" scope="row">Grid behavior</th>
<td>Horizontal at all times</td>
<td colspan="4">Collapsed to start, horizontal above breakpoints</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Max container width</th>
<td>None (auto)</td>
<td>540px</td>
<td>720px</td>
<td>960px</td>
<td>1140px</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Class prefix</th>
<td><code>.col-</code></td>
<td><code>.col-sm-</code></td>
<td><code>.col-md-</code></td>
<td><code>.col-lg-</code></td>
<td><code>.col-xl-</code></td>
</tr>
<tr>
<th class="text-nowrap" scope="row"># of columns</th>
<td colspan="5">12</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Gutter width</th>
<td colspan="5">30px (15px on each side of a column)</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Nestable</th>
<td colspan="5">Yes</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Offsets</th>
<td colspan="5">Yes</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Column ordering</th>
<td colspan="5">Yes</td>
</tr>
</tbody>
</table>
</div>
<p>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Example: Stacked-to-horizontal</h4>
<h6 class="card-subtitle">Using a single set of <code>.col-md-*</code> grid classes, you can create a default grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any <code>.row</code>.</h6>
<div class="row show-grid">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row show-grid">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Example: Mobile and desktop</h4>
<h6 class="card-subtitle">Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</h6>
<div class="row show-grid">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Example: Mobile, tablet, desktops</h4>
<h6 class="card-subtitle">Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</h6>
<div class="row show-grid">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row show-grid">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Responsive column resets</h4>
<h6 class="card-subtitle">With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a <code>.clearfix</code> and our responsive utility classes.</h6>
<div class="row show-grid">
<div class="col-xs-6 col-sm-3"> .col-xs-6 .col-sm-3
<br> Resize your viewport or check it out on your phone for an example. </div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Offsetting columns</h4>
<h6 class="card-subtitle">Move columns to the right using <code>.offset-md--*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.offset-md-4</code> moves <code>.col-md-4</code> over four columns.</h6>
<div class="row show-grid">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row show-grid">
<div class="col-md-3 offset-md-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row show-grid">
<div class="col-md-6 offset-md-3">.col-md-6 .col-md-offset-3</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Gutters</h4>
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 bg-light border">Custom column padding</div>
<div class="col py-3 px-lg-5 bg-light border">Custom column padding</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Order classes</h4>
<div class="container">
<div class="row">
<div class="col bg-light border p-3">
First, but unordered
</div>
<div class="col order-12 bg-light border p-3">
Second, but last
</div>
<div class="col order-1 bg-light border p-3">
Third, but first
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Offsetting columns</h4>
<div class="container">
<div class="row">
<div class="col-md-4 bg-light border p-3">.col-md-4</div>
<div class="col-md-4 offset-md-4 bg-light border p-3">.col-md-4 .offset-md-4</div>
</div>
<div class="row mt-3">
<div class="col-md-3 offset-md-3 bg-light border p-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3 bg-light border p-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row mt-3">
<div class="col-md-6 offset-md-3 bg-light border p-3">.col-md-6 .offset-md-3</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">Nesting</h4>
<div class="container">
<div class="row">
<div class="col-sm-9 bg-light border p-3">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6 bg-light border p-3">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6 bg-light border p-3">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Right sidebar -->
<!-- ============================================================== -->
<!-- .right-sidebar -->
<div class="right-sidebar">
<div class="slimscrollright">
<div class="rpanel-title"> Service Panel <span><i class="ti-close right-side-toggle"></i></span> </div>
<div class="r-panel-body">
<ul id="themecolors" class="m-t-20">
<li><b>With Light sidebar</b></li>
<li><a href="javascript:void(0)" data-theme="default" class="default-theme">1</a></li>
<li><a href="javascript:void(0)" data-theme="green" class="green-theme">2</a></li>
<li><a href="javascript:void(0)" data-theme="red" class="red-theme">3</a></li>
<li><a href="javascript:void(0)" data-theme="blue" class="blue-theme working">4</a></li>
<li><a href="javascript:void(0)" data-theme="purple" class="purple-theme">5</a></li>
<li><a href="javascript:void(0)" data-theme="megna" class="megna-theme">6</a></li>
<li class="d-block m-t-30"><b>With Dark sidebar</b></li>
<li><a href="javascript:void(0)" data-theme="default-dark" class="default-dark-theme">7</a></li>
<li><a href="javascript:void(0)" data-theme="green-dark" class="green-dark-theme">8</a></li>
<li><a href="javascript:void(0)" data-theme="red-dark" class="red-dark-theme">9</a></li>
<li><a href="javascript:void(0)" data-theme="blue-dark" class="blue-dark-theme">10</a></li>
<li><a href="javascript:void(0)" data-theme="purple-dark" class="purple-dark-theme">11</a></li>
<li><a href="javascript:void(0)" data-theme="megna-dark" class="megna-dark-theme ">12</a></li>
</ul>
<ul class="m-t-20 chatonline">
<li><b>Chat option</b></li>
<li>
<a href="javascript:void(0)"><img src="../assets/images/users/1.jpg" alt="user-img" class="img-circle"> <span>Varun Dhavan <small class="text-success">online</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="../assets/images/users/2.jpg" alt="user-img" class="img-circle"> <span>Genelia Deshmukh <small class="text-warning">Away</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="../assets/images/users/3.jpg" alt="user-img" class="img-circle"> <span>Ritesh Deshmukh <small class="text-danger">Busy</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="../assets/images/users/4.jpg" alt="user-img" class="img-circle"> <span>Arijit Sinh <small class="text-muted">Offline</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="../assets/images/users/5.jpg" alt="user-img" class="img-circle"> <span>Govinda Star <small class="text-success">online</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="../assets/images/users/6.jpg" alt="user-img" class="img-circle"> <span>John Abraham<small class="text-success">online</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="../assets/images/users/7.jpg" alt="user-img" class="img-circle"> <span>Hritik Roshan<small class="text-success">online</small></span></a>
</li>
<li>
<a href="javascript:void(0)"><img src="../assets/images/users/8.jpg" alt="user-img" class="img-circle"> <span>Pwandeep rajan <small class="text-success">online</small></span></a>
</li>
</ul>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Right sidebar -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Container fluid -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- footer -->
<!-- ============================================================== -->
<footer class="footer">
© 2019 Admin Press Admin by themedesigner.in
</footer>
<!-- ============================================================== -->
<!-- End footer -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Page wrapper -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="../assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="../assets/plugins/bootstrap/js/popper.min.js"></script>
<script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="js/jquery.slimscroll.js"></script>
<!--Wave Effects -->
<script src="js/waves.js"></script>
<!--Menu sidebar -->
<script src="js/sidebarmenu.js"></script>
<!--stickey kit -->
<script src="../assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
<script src="../assets/plugins/sparkline/jquery.sparkline.min.js"></script>
<!--Custom JavaScript -->
<script src="js/custom.min.js"></script>
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="../assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
</body>
</html>