897 lines
78 KiB
HTML
897 lines
78 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
|
|
<!-- Mirrored from technext.github.io/concept/pages/tabs.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 09 Oct 2021 09:53:30 GMT -->
|
|
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title>Concept - Bootstrap 4 Admin Dashboard Template</title>
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.min.css">
|
|
<link href="../assets/vendor/fonts/circular-std/style.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="../assets/libs/css/style.css">
|
|
<link rel="stylesheet" href="../assets/vendor/fonts/fontawesome/css/fontawesome-all.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- ============================================================== -->
|
|
<!-- main wrapper -->
|
|
<!-- ============================================================== -->
|
|
<div class="dashboard-main-wrapper">
|
|
<!-- ============================================================== -->
|
|
<!-- navbar -->
|
|
<!-- ============================================================== -->
|
|
<div class="dashboard-header">
|
|
<nav class="navbar navbar-expand-lg bg-white fixed-top">
|
|
<a class="navbar-brand" href="../index.html">Concept</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse " id="navbarSupportedContent">
|
|
<ul class="navbar-nav ml-auto navbar-right-top">
|
|
<li class="nav-item">
|
|
<div id="custom-search" class="top-search-bar">
|
|
<input class="form-control" type="text" placeholder="Search..">
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown notification">
|
|
<a class="nav-link nav-icons" href="#" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-fw fa-bell"></i> <span class="indicator"></span></a>
|
|
<ul class="dropdown-menu dropdown-menu-right notification-dropdown">
|
|
<li>
|
|
<div class="notification-title"> Notification</div>
|
|
<div class="notification-list">
|
|
<div class="list-group">
|
|
<a href="#" class="list-group-item list-group-item-action active">
|
|
<div class="notification-info">
|
|
<div class="notification-list-user-img"><img src="../assets/images/avatar-2.jpg" alt="" class="user-avatar-md rounded-circle"></div>
|
|
<div class="notification-list-user-block"><span class="notification-list-user-name">Jeremy Rakestraw</span>accepted your invitation to join the team.
|
|
<div class="notification-date">2 min ago</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="list-group-item list-group-item-action">
|
|
<div class="notification-info">
|
|
<div class="notification-list-user-img"><img src="../assets/images/avatar-3.jpg" alt="" class="user-avatar-md rounded-circle"></div>
|
|
<div class="notification-list-user-block"><span class="notification-list-user-name">John Abraham</span>is now following you
|
|
<div class="notification-date">2 days ago</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="list-group-item list-group-item-action">
|
|
<div class="notification-info">
|
|
<div class="notification-list-user-img"><img src="../assets/images/avatar-4.jpg" alt="" class="user-avatar-md rounded-circle"></div>
|
|
<div class="notification-list-user-block"><span class="notification-list-user-name">Monaan Pechi</span> is watching your main repository
|
|
<div class="notification-date">2 min ago</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="list-group-item list-group-item-action">
|
|
<div class="notification-info">
|
|
<div class="notification-list-user-img"><img src="../assets/images/avatar-5.jpg" alt="" class="user-avatar-md rounded-circle"></div>
|
|
<div class="notification-list-user-block"><span class="notification-list-user-name">Jessica Caruso</span>accepted your invitation to join the team.
|
|
<div class="notification-date">2 min ago</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="list-footer"> <a href="#">View all notifications</a></div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown connection">
|
|
<a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-fw fa-th"></i> </a>
|
|
<ul class="dropdown-menu dropdown-menu-right connection-dropdown">
|
|
<li class="connection-list">
|
|
<div class="row">
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
|
<a href="#" class="connection-item"><img src="../assets/images/github.png" alt="" > <span>Github</span></a>
|
|
</div>
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
|
<a href="#" class="connection-item"><img src="../assets/images/dribbble.png" alt="" > <span>Dribbble</span></a>
|
|
</div>
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
|
<a href="#" class="connection-item"><img src="../assets/images/dropbox.png" alt="" > <span>Dropbox</span></a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
|
<a href="#" class="connection-item"><img src="../assets/images/bitbucket.png" alt=""> <span>Bitbucket</span></a>
|
|
</div>
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
|
<a href="#" class="connection-item"><img src="../assets/images/mail_chimp.png" alt="" ><span>Mail chimp</span></a>
|
|
</div>
|
|
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 ">
|
|
<a href="#" class="connection-item"><img src="../assets/images/slack.png" alt="" > <span>Slack</span></a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="conntection-footer"><a href="#">More</a></div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown nav-user">
|
|
<a class="nav-link nav-user-img" href="#" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="../assets/images/avatar-1.jpg" alt="" class="user-avatar-md rounded-circle"></a>
|
|
<div class="dropdown-menu dropdown-menu-right nav-user-dropdown" aria-labelledby="navbarDropdownMenuLink2">
|
|
<div class="nav-user-info">
|
|
<h5 class="mb-0 text-white nav-user-name">John Abraham</h5>
|
|
<span class="status"></span><span class="ml-2">Available</span>
|
|
</div>
|
|
<a class="dropdown-item" href="#"><i class="fas fa-user mr-2"></i>Account</a>
|
|
<a class="dropdown-item" href="#"><i class="fas fa-cog mr-2"></i>Setting</a>
|
|
<a class="dropdown-item" href="#"><i class="fas fa-power-off mr-2"></i>Logout</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- end navbar -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- left sidebar -->
|
|
<!-- ============================================================== -->
|
|
<div class="nav-left-sidebar sidebar-dark">
|
|
<div class="menu-list">
|
|
<nav class="navbar navbar-expand-lg navbar-light">
|
|
<a class="d-xl-none d-lg-none" href="#">Dashboard</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav flex-column">
|
|
<li class="nav-divider">
|
|
Menu
|
|
</li>
|
|
<li class="nav-item ">
|
|
<a class="nav-link active" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1" aria-controls="submenu-1"><i class="fa fa-fw fa-user-circle"></i>Dashboard <span class="badge badge-success">6</span></a>
|
|
<div id="submenu-1" class="collapse submenu" style="">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="index.html" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1-2" aria-controls="submenu-1-2">E-Commerce</a>
|
|
<div id="submenu-1-2" class="collapse submenu" style="">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="../index.html">E Commerce Dashboard</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="../ecommerce-product.html">Product List</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="../ecommerce-product-single.html">Product Single</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="../ecommerce-product-checkout.html">Product Checkout</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="../dashboard-finance.html">Finance</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="../dashboard-sales.html">Sales</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1-1" aria-controls="submenu-1-1">Infulencer</a>
|
|
<div id="submenu-1-1" class="collapse submenu" style="">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="../dashboard-influencer.html">Influencer</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="../influencer-finder.html">Influencer Finder</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="../influencer-profile.html">Influencer Profile</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-2" aria-controls="submenu-2"><i class="fa fa-fw fa-rocket"></i>UI Elements</a>
|
|
<div id="submenu-2" class="collapse submenu" style="">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="cards.html">Cards <span class="badge badge-secondary">New</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="general.html">General</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="carousel.html">Carousel</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="listgroup.html">List Group</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="typography.html">Typography</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="accordions.html">Accordions</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="tabs.html">Tabs</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-3" aria-controls="submenu-3"><i class="fas fa-fw fa-chart-pie"></i>Chart</a>
|
|
<div id="submenu-3" class="collapse submenu" style="">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="chart-c3.html">C3 Charts</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="chart-chartist.html">Chartist Charts</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="chart-charts.html">Chart</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="chart-morris.html">Morris</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="chart-sparkline.html">Sparkline</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="chart-gauge.html">Guage</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item ">
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-4" aria-controls="submenu-4"><i class="fab fa-fw fa-wpforms"></i>Forms</a>
|
|
<div id="submenu-4" class="collapse submenu" style="">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="form-elements.html">Form Elements</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="form-validation.html">Parsely Validations</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="multiselect.html">Multiselect</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-5" aria-controls="submenu-5"><i class="fas fa-fw fa-table"></i>Tables</a>
|
|
<div id="submenu-5" class="collapse submenu" style="">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="general-table.html">General Tables</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="data-tables.html">Data Tables</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-divider">
|
|
Features
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-6" aria-controls="submenu-6"><i class="fas fa-fw fa-file"></i>Pages</a>
|
|
<div id="submenu-6" class="collapse submenu" style="">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="invoice.html">Invoice</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="blank-page.html">Blank Page</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="blank-page-header.html">Blank Page Header</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="login.html">Login</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="404-page.html">404 page</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="sign-up.html">Sign up Page</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="forgot-password.html">Forgot Password</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="pricing.html">Pricing Tables</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="timeline.html">Timeline</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="calendar.html">Calendar</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="sortable-nestable-lists.html">Sortable/Nestable List</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="widgets.html">Widgets</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="media-object.html">Media Objects</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="cropper-image.html">Cropper</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="color-picker.html">Color Picker</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-7" aria-controls="submenu-7"><i class="fas fa-fw fa-inbox"></i>Apps <span class="badge badge-secondary">New</span></a>
|
|
<div id="submenu-7" class="collapse submenu" style="">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="inbox.html">Inbox</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="email-details.html">Email Detail</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="email-compose.html">Email Compose</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="message-chat.html">Message Chat</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-8" aria-controls="submenu-8"><i class="fas fa-fw fa-columns"></i>Icons</a>
|
|
<div id="submenu-8" class="collapse submenu" style="">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="icon-fontawesome.html">FontAwesome Icons</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="icon-material.html">Material Icons</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="icon-simple-lineicon.html">Simpleline Icon</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="icon-themify.html">Themify Icon</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="icon-flag.html">Flag Icons</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="icon-weather.html">Weather Icon</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-9" aria-controls="submenu-9"><i class="fas fa-fw fa-map-marker-alt"></i>Maps</a>
|
|
<div id="submenu-9" class="collapse submenu" style="">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="map-google.html">Google Maps</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="map-vector.html">Vector Maps</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-10" aria-controls="submenu-10"><i class="fas fa-f fa-folder"></i>Menu Level</a>
|
|
<div id="submenu-10" class="collapse submenu" style="">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Level 1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-11" aria-controls="submenu-11">Level 2</a>
|
|
<div id="submenu-11" class="collapse submenu" style="">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Level 1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Level 2</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Level 3</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- end left sidebar -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- wrapper -->
|
|
<!-- ============================================================== -->
|
|
<div class="dashboard-wrapper">
|
|
<div class="container-fluid dashboard-content">
|
|
<!-- ============================================================== -->
|
|
<!-- pageheader -->
|
|
<!-- ============================================================== -->
|
|
<div class="row">
|
|
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
|
|
<div class="page-header">
|
|
<h2 class="pageheader-title">Tabs</h2>
|
|
<p class="pageheader-text">Proin placerat ante duiullam scelerisque a velit ac porta, fusce sit amet vestibulum mi. Morbi lobortis pulvinar quam.</p>
|
|
<div class="page-breadcrumb">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="#" class="breadcrumb-link">UI Elements</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Tabs</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- end pageheader -->
|
|
<!-- ============================================================== -->
|
|
|
|
<div class="row">
|
|
<!-- ============================================================== -->
|
|
<!-- basic tabs -->
|
|
<!-- ============================================================== -->
|
|
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 mb-5">
|
|
<div class="section-block">
|
|
<h5 class="section-title">Basic Tabs</h5>
|
|
<p>Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface..</p>
|
|
</div>
|
|
<div class="tab-regular">
|
|
<ul class="nav nav-tabs " id="myTab" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Tab Title #1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Tab Title #2</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Tab Title #3</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent">
|
|
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
|
|
<p class="lead"> All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. </p>
|
|
<p>Phasellus non ante gravida, ultricies neque a, fermentum leo. Etiam ornare enim arcu, at venenatis odio mollis quis. Mauris fermentum elementum ligula in efficitur. Aliquam id congue lorem. Proin consectetur feugiasse platea dictumst. Pellentesque sed justo aliquet, posuere sem nec, elementum ante.</p>
|
|
<a href="#" class="btn btn-secondary">Go somewhere</a>
|
|
</div>
|
|
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
|
|
<h3>Tab Content Heading</h3>
|
|
<p>Nullam et tellus ac ligula condimentum sodales. Aenean tincidunt viverra suscipit. Maecenas id molestie est, a commodo nisi. Quisque fringilla turpis nec elit eleifend vestibulum. Aliquam sed purus in odio ullamcorper congue consectetur in neque. Aenean sem ex, tempor et auctor sed, congue id neque. </p>
|
|
</div>
|
|
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
|
|
<h3>Tab Heading Content </h3>
|
|
<p>Vivamus pellentesque vestibulum lectus vitae auctor. Maecenas eu sodales arcu. Fusce lobortis, libero ac cursus feugiat, nibh ex ultricies tortor, id dictum massa nisl ac nisi. Fusce a eros pellentesque, ultricies urna nec, consectetur dolor. Nam dapibus scelerisque risus, a commodo mi tempus eu.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- end basic tabs -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- basic tabs -->
|
|
<!-- ============================================================== -->
|
|
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 mb-5">
|
|
<div class="section-block">
|
|
<h5 class="section-title">Outline Tabs</h5>
|
|
<p>Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface..</p>
|
|
</div>
|
|
<div class="tab-outline">
|
|
<ul class="nav nav-tabs" id="myTab2" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="tab-outline-one" data-toggle="tab" href="#outline-one" role="tab" aria-controls="home" aria-selected="true">Tab#1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="tab-outline-two" data-toggle="tab" href="#outline-two" role="tab" aria-controls="profile" aria-selected="false">Tab#2</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="tab-outline-three" data-toggle="tab" href="#outline-three" role="tab" aria-controls="contact" aria-selected="false">Tab#3</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent2">
|
|
<div class="tab-pane fade show active" id="outline-one" role="tabpanel" aria-labelledby="tab-outline-one">
|
|
<p class="lead"> All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. </p>
|
|
<p>Phasellus non ante gravida, ultricies neque a, fermentum leo. Etiam ornare enim arcu, at venenatis odio mollis quis. Mauris fermentum elementum ligula in efficitur. Aliquam id congue lorem. Proin consectetur feugiasse platea dictumst. Pellentesque sed justo aliquet, posuere sem nec, elementum ante.</p>
|
|
<a href="#" class="btn btn-secondary">Go somewhere</a>
|
|
</div>
|
|
<div class="tab-pane fade" id="outline-two" role="tabpanel" aria-labelledby="tab-outline-two">
|
|
<h3>Heading Title of Outline Tabs</h3>
|
|
<p>Nullam et tellus ac ligula condimentum sodales. Aenean tincidunt viverra suscipit. Maecenas id molestie est, a commodo nisi. Quisque fringilla turpis nec elit eleifend vestibulum. Aliquam sed purus in odio ullamcorper congue consectetur in neque. Aenean sem ex, tempor et auctor sed, congue id neque. </p>
|
|
<p>Fusce a eros pellentesque, ultricies urna nec, consectetur dolor. Maecenas eu sodales arcu. Fusce lobortis, libero ac cursus feugiat, nibh ex ultricies tortor, id dictum massa nisl ac nisi. </p>
|
|
</div>
|
|
<div class="tab-pane fade" id="outline-three" role="tabpanel" aria-labelledby="tab-outline-three">
|
|
<h3>Heading Title of Outline Tabs</h3>
|
|
<p>Vivamus pellentesque vestibulum lectus vitae auctor. Maecenas eu sodales arcu. Fusce lobortis, libero ac cursus feugiat, nibh ex ultricies tortor, id dictum massa nisl ac nisi. Fusce a eros pellentesque, ultricies urna nec, consectetur dolor. Nam dapibus scelerisque risus, a commodo mi tempus eu.</p>
|
|
<p>Maecenas eu sodales arcu. Fusce lobortis, libero ac cursus feugiat, nibh ex ultricies tortor, id dictum massa nisl ac nisi. Fusce a eros pellentesque, ultricies urna nec, consectetur dolor.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- end basic tabs -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- vertical tabs -->
|
|
<!-- ============================================================== -->
|
|
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 mb-5">
|
|
<div class="section-block">
|
|
<h5 class="section-title">Vertical tabs</h5>
|
|
<p>Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface..</p>
|
|
</div>
|
|
<div class="tab-vertical">
|
|
<ul class="nav nav-tabs" id="myTab3" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="home-vertical-tab" data-toggle="tab" href="#home-vertical" role="tab" aria-controls="home" aria-selected="true">Tab Vertical #1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="profile-vertical-tab" data-toggle="tab" href="#profile-vertical" role="tab" aria-controls="profile" aria-selected="false">Tab Vertical #2</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="contact-vertical-tab" data-toggle="tab" href="#contact-vertical" role="tab" aria-controls="contact" aria-selected="false">Tab Vertical #3</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent3">
|
|
<div class="tab-pane fade show active" id="home-vertical" role="tabpanel" aria-labelledby="home-vertical-tab">
|
|
<p class="lead"> All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. </p>
|
|
<p>Phasellus non ante gravida, ultricies neque a, fermentum leo. Etiam ornare enim arcu, at venenatis odio mollis quis. Mauris fermentum elementum ligula in efficitur. Aliquam id congue lorem. Proin consectetur feugiasse platea dictumst. Pellentesque sed justo aliquet, posuere sem nec, elementum ante.</p>
|
|
<a href="#" class="btn btn-secondary">Go somewhere</a>
|
|
</div>
|
|
<div class="tab-pane fade" id="profile-vertical" role="tabpanel" aria-labelledby="profile-vertical-tab">
|
|
<h3>Tab Heading Vertical Title</h3>
|
|
<p>Nullam et tellus ac ligula condimentum sodales. Aenean tincidunt viverra suscipit. Maecenas id molestie est, a commodo nisi. Quisque fringilla turpis nec elit eleifend vestibulum. Aliquam sed purus in odio ullamcorper congue consectetur in neque. Aenean sem ex, tempor et auctor sed, congue id neque. </p>
|
|
<p> Fusce a eros pellentesque, ultricies urna nec, consectetur dolor. Nam dapibus scelerisque risus, a commodo mi tempus eu.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="contact-vertical" role="tabpanel" aria-labelledby="contact-vertical-tab">
|
|
<h3>Tab Heading Vertical Title</h3>
|
|
<p>Vivamus pellentesque vestibulum lectus vitae auctor. Maecenas eu sodales arcu. Fusce lobortis, libero ac cursus feugiat, nibh ex ultricies tortor, id dictum massa nisl ac nisi. Fusce a eros pellentesque, ultricies urna nec, consectetur dolor. Nam dapibus scelerisque risus, a commodo mi tempus eu.</p>
|
|
<p> Fusce a eros pellentesque, ultricies urna nec, consectetur dolor. Nam dapibus scelerisque risus, a commodo mi tempus eu.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- end basic tabs -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- vertical tabs -->
|
|
<!-- ============================================================== -->
|
|
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 mb-5">
|
|
<div class="section-block">
|
|
<h5 class="section-title">Outline Vertical tabs</h5>
|
|
<p>Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface..</p>
|
|
</div>
|
|
<div class="tab-vertical-outline">
|
|
<ul class="nav nav-tabs " id="myTab4" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="home-outline-verti-tab" data-toggle="tab" href="#home-outline-vertical" role="tab" aria-controls="home" aria-selected="true">Tab#1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="profile-outline-verti-tab" data-toggle="tab" href="#profile-outline-vertical" role="tab" aria-controls="profile" aria-selected="false">Tab#2</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="contact-outline-verti-tab" data-toggle="tab" href="#contact-outline-vertical" role="tab" aria-controls="contact" aria-selected="false">Tab#3</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent4">
|
|
<div class="tab-pane fade show active" id="home-outline-vertical" role="tabpanel" aria-labelledby="home-outline-verti-tab">
|
|
<p class="lead"> All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. </p>
|
|
<p>Phasellus non ante gravida, ultricies neque a, fermentum leo. Etiam ornare enim arcu, at venenatis odio mollis quis. Mauris fermentum elementum ligula in efficitur. Aliquam id congue lorem. Proin consectetur feugiasse platea dictumst. Pellentesque sed justo aliquet, posuere sem nec, elementum ante.</p>
|
|
<a href="#" class="btn btn-secondary">Go somewhere</a>
|
|
</div>
|
|
<div class="tab-pane fade" id="profile-outline-vertical" role="tabpanel" aria-labelledby="profile-outline-verti-tab">
|
|
<h3>Outline Vertical tabs</h3>
|
|
<p>Nullam et tellus ac ligula condimentum sodales. Aenean tincidunt viverra suscipit. Maecenas id molestie est, a commodo nisi. Quisque fringilla turpis nec elit eleifend vestibulum. Aliquam sed purus in odio ullamcorper congue consectetur in neque. Aenean sem ex, tempor et auctor sed, congue id neque. </p>
|
|
<p>Pellentesque quis rutrum lacus. Aenean gravida massa dolor, mattis viverra quam luctus sed. Nunc nunc enim, aliquet sit amet consectetur sed, rutrum feugiat dolor. In convallis augue sed augue tincidunt, sit amet volutpat sapien cursus. Sed neque dolor, vehicula sit amet orci et, dapibus tincidunt mauris. </p>
|
|
</div>
|
|
<div class="tab-pane fade" id="contact-outline-vertical" role="tabpanel" aria-labelledby="contact-outline-verti-tab">
|
|
<h3>Outline Vertical tabs</h3>
|
|
<p>Vivamus pellentesque vestibulum lectus vitae auctor. Maecenas eu sodales arcu. Fusce lobortis, libero ac cursus feugiat, nibh ex ultricies tortor, id dictum massa nisl ac nisi. Fusce a eros pellentesque, ultricies urna nec, consectetur dolor. Nam dapibus scelerisque risus, a commodo mi tempus eu.</p>
|
|
<p>Aenean a malesuada libero, id consequat tellus. In in varius metus. Suspendisse cursus blandit ipsum, sit amet venenatis lacus finibus ut. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas bibendum turpis sit amet odio scelerisque, sit amet maximus metus hendrerit.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- end basic tabs -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- Simple tabs -->
|
|
<!-- ============================================================== -->
|
|
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 mb-5">
|
|
<div class="section-block">
|
|
<h5 class="section-title">Simple Card Tabs</h5>
|
|
<p>Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface..</p>
|
|
</div>
|
|
<div class="simple-card">
|
|
<ul class="nav nav-tabs" id="myTab5" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active border-left-0" id="home-tab-simple" data-toggle="tab" href="#home-simple" role="tab" aria-controls="home" aria-selected="true">Tab#1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="profile-tab-simple" data-toggle="tab" href="#profile-simple" role="tab" aria-controls="profile" aria-selected="false">Tab#2</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="contact-tab-simple" data-toggle="tab" href="#contact-simple" role="tab" aria-controls="contact" aria-selected="false">Tab#3</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent5">
|
|
<div class="tab-pane fade show active" id="home-simple" role="tabpanel" aria-labelledby="home-tab-simple">
|
|
<p class="lead"> All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. </p>
|
|
<p>Phasellus non ante gravida, ultricies neque a, fermentum leo. Etiam ornare enim arcu, at venenatis odio mollis quis. Mauris fermentum elementum ligula in efficitur. Aliquam id congue lorem. Proin consectetur feugiasse platea dictumst. Pellentesque sed justo aliquet, posuere sem nec, elementum ante.</p>
|
|
<a href="#" class="btn btn-secondary">Go somewhere</a>
|
|
</div>
|
|
<div class="tab-pane fade" id="profile-simple" role="tabpanel" aria-labelledby="profile-tab-simple">
|
|
<p>Nullam et tellus ac ligula condimentum sodales. Aenean tincidunt viverra suscipit. Maecenas id molestie est, a commodo nisi. Quisque fringilla turpis nec elit eleifend vestibulum. Aliquam sed purus in odio ullamcorper congue consectetur in neque. Aenean sem ex, tempor et auctor sed, congue id neque. </p>
|
|
</div>
|
|
<div class="tab-pane fade" id="contact-simple" role="tabpanel" aria-labelledby="contact-tab-simple">
|
|
<p>Vivamus pellentesque vestibulum lectus vitae auctor. Maecenas eu sodales arcu. Fusce lobortis, libero ac cursus feugiat, nibh ex ultricies tortor, id dictum massa nisl ac nisi. Fusce a eros pellentesque, ultricies urna nec, consectetur dolor. Nam dapibus scelerisque risus, a commodo mi tempus eu.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- end simple tabs -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- Simple outline tabs -->
|
|
<!-- ============================================================== -->
|
|
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 mb-5">
|
|
<div class="section-block">
|
|
<h5 class="section-title">Simple Card Outline Tabs</h5>
|
|
<p>Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface..</p>
|
|
</div>
|
|
<div class="simple-outline-card">
|
|
<ul class="nav nav-tabs" id="myTab6" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active border-left-0" id="home-tab-simple-outline" data-toggle="tab" href="#home-simple-outline" role="tab" aria-controls="home" aria-selected="true">Tab#1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="profile-tab-simple-outline" data-toggle="tab" href="#profile-simple-outline" role="tab" aria-controls="profile" aria-selected="false">Tab#2</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="contact-tab-simple-outline" data-toggle="tab" href="#contact-simple-outline" role="tab" aria-controls="contact" aria-selected="false">Tab#3</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent6">
|
|
<div class="tab-pane fade show active" id="home-simple-outline" role="tabpanel" aria-labelledby="home-tab-simple-outline">
|
|
<p class="lead"> All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. </p>
|
|
<p>Phasellus non ante gravida, ultricies neque a, fermentum leo. Etiam ornare enim arcu, at venenatis odio mollis quis. Mauris fermentum elementum ligula in efficitur. Aliquam id congue lorem. Proin consectetur feugiasse platea dictumst. Pellentesque sed justo aliquet, posuere sem nec, elementum ante.</p>
|
|
<a href="#" class="btn btn-secondary">Go somewhere</a>
|
|
</div>
|
|
<div class="tab-pane fade" id="profile-simple-outline" role="tabpanel" aria-labelledby="profile-tab-simple-outline">
|
|
<h3>Simple Card Outline Tabs</h3>
|
|
<p>Nullam et tellus ac ligula condimentum sodales. Aenean tincidunt viverra suscipit. Maecenas id molestie est, a commodo nisi. Quisque fringilla turpis nec elit eleifend vestibulum. Aliquam sed purus in odio ullamcorper congue consectetur in neque. Aenean sem ex, tempor et auctor sed, congue id neque. </p>
|
|
<p>Nullam et tellus ac ligula condimentum sodales. Aenean tincidunt viverra suscipit. Maecenas id molestie est, a commodo nisi. Quisque fringilla turpis nec elit eleifend vestibulum. Aliquam sed purus in odio ullamcorper congue consectetur in neque. Aenean sem ex, tempor et auctor sed, congue id neque. </p>
|
|
</div>
|
|
<div class="tab-pane fade" id="contact-simple-outline" role="tabpanel" aria-labelledby="contact-tab-simple-outline">
|
|
<h3>Simple Card Outline Tabs</h3>
|
|
<p>Vivamus pellentesque vestibulum lectus vitae auctor. Maecenas eu sodales arcu. Fusce lobortis, libero ac cursus feugiat, nibh ex ultricies tortor, id dictum massa nisl ac nisi. Fusce a eros pellentesque, ultricies urna nec, consectetur dolor. Nam dapibus scelerisque risus, a commodo mi tempus eu.</p>
|
|
<p>Vivamus pellentesque vestibulum lectus vitae auctor. Maecenas eu sodales arcu. Fusce lobortis, libero ac cursus feugiat, nibh ex ultricies tortor, id dictum massa nisl ac nisi. Fusce a eros pellentesque, ultricies urna nec, consectetur dolor. Nam dapibus scelerisque risus, a commodo mi tempus eu.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- end simple outline tabs -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- basic pills -->
|
|
<!-- ============================================================== -->
|
|
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 mb-5">
|
|
<div class="section-block">
|
|
<h5 class="section-title">Pills tabs</h5>
|
|
<p>Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface..</p>
|
|
</div>
|
|
<div class="pills-regular">
|
|
<ul class="nav nav-pills mb-1" id="pills-tab" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="home" aria-selected="true">Tab#1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="profile" aria-selected="false">Tab#2</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="contact" aria-selected="false">Tab#3</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="pills-tabContent">
|
|
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
|
|
<p>Phasellus non ante gravida, ultricies neque a, fermentum leo. Etiam ornare enim arcu, at venenatis odio mollis quis. Mauris fermentum elementum ligula in efficitur. Aliquam id congue lorem. Proin consectetur feugiat enim ut luctus. Aliquam pellentesque ut tellus ultricies bibendum. In hac habitasse platea dictumst. Pellentesque sed justo aliquet, posuere sem nec, elementum ante. Vestibulum dui tortor, consectetur quis sagittis vitae, dapibus ut magna. Cras ante dui, tincidunt et turpis vel, suscipit viverra eros. Ut auctor augue feugiat hendrerit feugiat.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
|
|
<p>Nullam et tellus ac ligula condimentum sodales. Aenean tincidunt viverra suscipit. Maecenas id molestie est, a commodo nisi. Quisque fringilla turpis nec elit eleifend vestibulum. Aliquam sed purus in odio ullamcorper congue consectetur in neque. Aenean sem ex, tempor et auctor sed, congue id neque. </p>
|
|
</div>
|
|
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
|
|
<p>Vivamus pellentesque vestibulum lectus vitae auctor. Maecenas eu sodales arcu. Fusce lobortis, libero ac cursus feugiat, nibh ex ultricies tortor, id dictum massa nisl ac nisi. Fusce a eros pellentesque, ultricies urna nec, consectetur dolor. Nam dapibus scelerisque risus, a commodo mi tempus eu.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- end basic pills -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- basic pills -->
|
|
<!-- ============================================================== -->
|
|
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 mb-5">
|
|
<div class="section-block">
|
|
<h5 class="section-title">Outline Pills tabs</h5>
|
|
<p>Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface..</p>
|
|
</div>
|
|
<div class="pills-outline">
|
|
<ul class="nav nav-pills mb-1" id="pills-tab1" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="pills-home-tab-outline" data-toggle="pill" href="#pills-home-outline" role="tab" aria-controls="home" aria-selected="true">Tab#1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-profile-tab-outline" data-toggle="pill" href="#pills-profile-outline" role="tab" aria-controls="profile" aria-selected="false">Tab#2</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="pills-contact-tab-outline" data-toggle="pill" href="#pills-contact-outline" role="tab" aria-controls="contact" aria-selected="false">Tab#3</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="pills-tabContent1">
|
|
<div class="tab-pane fade show active" id="pills-home-outline" role="tabpanel" aria-labelledby="pills-home-tab-outline">
|
|
<p>Phasellus non ante gravida, ultricies neque a, fermentum leo. Etiam ornare enim arcu, at venenatis odio mollis quis. Mauris fermentum elementum ligula in efficitur. Aliquam id congue lorem. Proin consectetur feugiat enim ut luctus. Aliquam pellentesque ut tellus ultricies bibendum. In hac habitasse platea dictumst. Pellentesque sed justo aliquet, posuere sem nec, elementum ante. Vestibulum dui tortor, consectetur quis sagittis vitae, dapibus ut magna. Cras ante dui, tincidunt et turpis vel, suscipit viverra eros. Ut auctor augue feugiat hendrerit feugiat.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="pills-profile-outline" role="tabpanel" aria-labelledby="pills-profile-tab-outline">
|
|
<p>Nullam et tellus ac ligula condimentum sodales. Aenean tincidunt viverra suscipit. Maecenas id molestie est, a commodo nisi. Quisque fringilla turpis nec elit eleifend vestibulum. Aliquam sed purus in odio ullamcorper congue consectetur in neque. Aenean sem ex, tempor et auctor sed, congue id neque. </p>
|
|
</div>
|
|
<div class="tab-pane fade" id="pills-contact-outline" role="tabpanel" aria-labelledby="pills-contact-tab-outline">
|
|
<p>Vivamus pellentesque vestibulum lectus vitae auctor. Maecenas eu sodales arcu. Fusce lobortis, libero ac cursus feugiat, nibh ex ultricies tortor, id dictum massa nisl ac nisi. Fusce a eros pellentesque, ultricies urna nec, consectetur dolor. Nam dapibus scelerisque risus, a commodo mi tempus eu.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- end basic pills -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- vertical pills -->
|
|
<!-- ============================================================== -->
|
|
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 mb-5">
|
|
<div class="section-block">
|
|
<h5 class="section-title">Vertical Pills tabs</h5>
|
|
<p>Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface..</p>
|
|
</div>
|
|
<div class="pills-vertical">
|
|
<div class="row">
|
|
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12">
|
|
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
|
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Tab#1</a>
|
|
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Tab#2</a>
|
|
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Tab#3</a>
|
|
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Tab#4</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12 ">
|
|
<div class="tab-content" id="v-pills-tabContent">
|
|
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
|
|
<p class="lead"> All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. </p>
|
|
<p>Phasellus non ante gravida, ultricies neque a, fermentum leo. Etiam ornare enim arcu, at venenatis odio mollis quis. Mauris fermentum elementum ligula in efficitur. Aliquam id congue lorem. Proin consectetur feugiasse platea dictumst. Pellentesque sed justo aliquet, posuere sem nec, elementum ante.</p>
|
|
<a href="#" class="btn btn-secondary">Go somewhere</a>
|
|
</div>
|
|
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
|
|
<p>Nullam et tellus ac ligula condimentum sodales. Aenean tincidunt viverra suscipit. Maecenas id molestie est, a commodo nisi. Quisque fringilla turpis nec elit eleifend vestibulum. Aliquam sed purus in odio ullamcorper congue consectetur in neque. Aenean sem ex, tempor et auctor sed, congue id neque. </p>
|
|
</div>
|
|
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
|
|
<p>Vivamus pellentesque vestibulum lectus vitae auctor. Maecenas eu sodales arcu. Fusce lobortis, libero ac cursus feugiat, nibh ex ultricies tortor, id dictum massa nisl ac nisi. Fusce a eros pellentesque, ultricies urna nec, consectetur dolor. Nam dapibus scelerisque risus, a commodo mi tempus eu.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
|
|
<p>Vivamus pellentesque vestibulum lectus vitae auctor. Maecenas eu sodales arcu. Fusce lobortis, libero ac cursus feugiat, nibh ex ultricies tortor, id dictum massa nisl ac nisi. Fusce a eros pellentesque, ultricies urna nec, consectetur dolor. Nam dapibus scelerisque risus, a commodo mi tempus eu.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- end vertical pills -->
|
|
<!-- ============================================================== -->
|
|
<!-- ============================================================== -->
|
|
<!-- justified tabs -->
|
|
<!-- ============================================================== -->
|
|
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-12 mb-5">
|
|
<div class="section-block">
|
|
<h5 class="section-title">Justified Tabs</h5>
|
|
<p>Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface..</p>
|
|
</div>
|
|
<div class="tab-regular">
|
|
<ul class="nav nav-tabs nav-fill" id="myTab7" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" id="home-tab-justify" data-toggle="tab" href="#home-justify" role="tab" aria-controls="home" aria-selected="true">Tab#1</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="profile-tab-justify" data-toggle="tab" href="#profile-justify" role="tab" aria-controls="profile" aria-selected="false">Tab#2</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" id="contact-tab-justify" data-toggle="tab" href="#contact-justify" role="tab" aria-controls="contact" aria-selected="false">Tab#3</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent7">
|
|
<div class="tab-pane fade show active" id="home-justify" role="tabpanel" aria-labelledby="home-tab-justify">
|
|
<p class="lead"> All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. </p>
|
|
<p>Phasellus non ante gravida, ultricies neque a, fermentum leo. Etiam ornare enim arcu, at venenatis odio mollis quis. Mauris fermentum elementum ligula in efficitur. Aliquam id congue lorem. Proin consectetur feugiasse platea dictumst. Pellentesque sed justo aliquet, posuere sem nec, elementum ante.</p>
|
|
<a href="#" class="btn btn-secondary">Go somewhere</a>
|
|
</div>
|
|
<div class="tab-pane fade" id="profile-justify" role="tabpanel" aria-labelledby="profile-tab-justify">
|
|
<p>Nullam et tellus ac ligula condimentum sodales. Aenean tincidunt viverra suscipit. Maecenas id molestie est, a commodo nisi. Quisque fringilla turpis nec elit eleifend vestibulum. Aliquam sed purus in odio ullamcorper congue consectetur in neque. Aenean sem ex, tempor et auctor sed, congue id neque. </p>
|
|
</div>
|
|
<div class="tab-pane fade" id="contact-justify" role="tabpanel" aria-labelledby="contact-tab-justify">
|
|
<p>Vivamus pellentesque vestibulum lectus vitae auctor. Maecenas eu sodales arcu. Fusce lobortis, libero ac cursus feugiat, nibh ex ultricies tortor, id dictum massa nisl ac nisi. Fusce a eros pellentesque, ultricies urna nec, consectetur dolor. Nam dapibus scelerisque risus, a commodo mi tempus eu.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- end justified tabs -->
|
|
<!-- ============================================================== -->
|
|
</div>
|
|
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- footer -->
|
|
<!-- ============================================================== -->
|
|
<div class="footer">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
|
Copyright © 2018 Concept. All rights reserved. Dashboard by <a href="https://colorlib.com/wp/">Colorlib</a>.
|
|
</div>
|
|
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
|
|
<div class="text-md-right footer-links d-none d-sm-block">
|
|
<a href="javascript: void(0);">About</a>
|
|
<a href="javascript: void(0);">Support</a>
|
|
<a href="javascript: void(0);">Contact Us</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- end footer -->
|
|
<!-- ============================================================== -->
|
|
</div>
|
|
</div>
|
|
<!-- ============================================================== -->
|
|
<!-- end main wrapper -->
|
|
<!-- ============================================================== -->
|
|
<!-- Optional JavaScript -->
|
|
<script src="../assets/vendor/jquery/jquery-3.3.1.min.js"></script>
|
|
<script src="../assets/vendor/bootstrap/js/bootstrap.bundle.js"></script>
|
|
<script src="../assets/vendor/slimscroll/jquery.slimscroll.js"></script>
|
|
<script src="../assets/libs/js/main-js.js"></script>
|
|
</body>
|
|
|
|
|
|
|
|
<!-- Mirrored from technext.github.io/concept/pages/tabs.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 09 Oct 2021 09:53:30 GMT -->
|
|
</html> |