Framework
Theme
All
689
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
General
6
Features
25
Cards Section
38
Teams Section
11
Faq
9
Headers
47
Blogs
15
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Authentication
15
Call To Actions
21
Http Codes
6
Teams
16
Pricing
13
UI Components Library
Discover 689 components available in Loopple’s library! Create modern templates without creativity of a designer
Card Stats
Component from
Adminkit
Builder
<div class="card draggable">
<div class="card-body">
<div class="row">
<div class="col mt-0">
<h5 class="card-title">Sales</h5>
</div>
<div class="col-auto">
<div class="stat text-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-truck align-middle"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>
</div>
</div>
</div>
<h1 class="mt-1 mb-3">2.382</h1>
<div class="mb-0">
<span class="text-danger"> <i class="mdi mdi-arrow-bottom-right"></i> -3.65% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
</div>Nav Pills
Component from
Adminkit
Builder
<ul class="nav nav-pills mb-3 draggable" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</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>This is the last time a fiat currency bubble pops, because it’s the first time we have a viable alternative.</p>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<p>Live long enough, and you’ll become a philosopher.</p>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<p>It’s the nature of truth that once you see it, you can’t unsee it.</p>
</div>
</div>Card Profile
Component from
Argon Dashboard
Builder
<div class="card card-profile draggable">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/img-1-1000x600.jpg" alt="Image placeholder" class="card-img-top">
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-2">
<div class="card-profile-image">
<a href="#">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg" class="rounded-circle">
</a>
</div>
</div>
</div>
<div class="card-header text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4">
<div class="d-flex justify-content-between">
<a href="#" class="btn btn-sm btn-info mr-4 ">Connect</a>
<a href="#" class="btn btn-sm btn-default float-right">Message</a>
</div>
</div>
<div class="card-body pt-0">
<div class="row">
<div class="col">
<div class="card-profile-stats d-flex justify-content-center">
<div>
<span class="heading">22</span>
<span class="description">Friends</span>
</div>
<div>
<span class="heading">10</span>
<span class="description">Photos</span>
</div>
<div>
<span class="heading">89</span>
<span class="description">Comments</span>
</div>
</div>
</div>
</div>
<div class="text-center">
<h5 class="h3"> Jessica Jones <span class="font-weight-light">, 27</span>
</h5>
<h5 class="font-weight-300"> Bucharest, Romania </h5>
<h5 class="h5 mt-4"> Solution Manager - Creative Tim Officer </h5>
<h5> University of Computer Science </h5>
</div>
</div>
</div>Table Ecommerce
Sidebar With Logo
Component from
Argon Dashboard
Builder
<div class="sidenav-header align-items-center">
<a class="navbar-brand" href="javascript:void(0)">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/brand/blue.png" class="navbar-brand-img" alt="...">
</a>
</div>
<div class="navbar-inner">
<div class="collapse navbar-collapse" id="sidenav-collapse-main">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="javascript:">
<i class="fa fa-desktop text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-lock text-danger"></i>
<span class="nav-link-text">Login</span>
</a>
</li>
</ul>
</div>
</div>Section Profile
Component from
Argon Dashboard
Builder
<div class="row removable">
<div class="col-xl-4 order-xl-2 drop-zone">
<div class="card card-profile draggable">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/img-1-1000x600.jpg" alt="Image placeholder" class="card-img-top">
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-2">
<div class="card-profile-image">
<a href="#">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg" class="rounded-circle">
</a>
</div>
</div>
</div>
<div class="card-header text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4">
<div class="d-flex justify-content-between">
<a href="#" class="btn btn-sm btn-info mr-4 ">Connect</a>
<a href="#" class="btn btn-sm btn-default float-right">Message</a>
</div>
</div>
<div class="card-body pt-0">
<div class="row">
<div class="col">
<div class="card-profile-stats d-flex justify-content-center">
<div>
<span class="heading">22</span>
<span class="description">Friends</span>
</div>
<div>
<span class="heading">10</span>
<span class="description">Photos</span>
</div>
<div>
<span class="heading">89</span>
<span class="description">Comments</span>
</div>
</div>
</div>
</div>
<div class="text-center">
<h5 class="h3">
Jessica Jones<span class="font-weight-light">, 27</span>
</h5>
<div class="h5 font-weight-300">
<i class="ni location_pin mr-2"></i>Bucharest, Romania
</div>
<div class="h5 mt-4">
<i class="ni business_briefcase-24 mr-2"></i>Solution Manager - Creative Tim Officer
</div>
<div>
<i class="ni education_hat mr-2"></i>University of Computer Science
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-8 order-xl-1 drop-zone">
<div class="card draggable">
<div class="card-header">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">Edit profile </h3>
</div>
<div class="col-4 text-right">
<a href="#!" class="btn btn-sm btn-primary">Settings</a>
</div>
</div>
</div>
<div class="card-body">
<form>
<h6 class="heading-small text-muted mb-4">User information</h6>
<div class="pl-lg-4">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-username">Username</label>
<input type="text" id="input-username" class="form-control" placeholder="Username" value="lucky.jesse">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-email">Email address</label>
<input type="email" id="input-email" class="form-control" placeholder="[email protected]">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-first-name">First name</label>
<input type="text" id="input-first-name" class="form-control" placeholder="First name" value="Lucky">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label" for="input-last-name">Last name</label>
<input type="text" id="input-last-name" class="form-control" placeholder="Last name" value="Jesse">
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- Address -->
<h6 class="heading-small text-muted mb-4">Contact information</h6>
<div class="pl-lg-4">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="form-control-label" for="input-address">Address</label>
<input id="input-address" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-city">City</label>
<input type="text" id="input-city" class="form-control" placeholder="City" value="New York">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-country">Country</label>
<input type="text" id="input-country" class="form-control" placeholder="Country" value="United States">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label" for="input-country">Postal code</label>
<input type="number" id="input-postal-code" class="form-control" placeholder="Postal code">
</div>
</div>
</div>
</div>
<hr class="my-4">
<!-- Description -->
<h6 class="heading-small text-muted mb-4">About me</h6>
<div class="pl-lg-4">
<div class="form-group">
<label class="form-control-label">About Me</label>
<textarea rows="4" class="form-control" placeholder="A few words about you ...">A beautiful Dashboard for Bootstrap 4. It is Free and Open Source.</textarea>
</div>
</div>
</form>
</div>
</div>
</div>
</div>Section Projects
Component from
Argon Dashboard
Builder
<div class="row removable">
<div class="col-xl-6 drop-zone">
<!-- Members list group card -->
<div class="card draggable">
<!-- Card header -->
<div class="card-header">
<!-- Title -->
<h5 class="h3 mb-0">Team members</h5>
</div>
<!-- Card body -->
<div class="card-body">
<!-- List group -->
<ul class="list-group list-group-flush list my--3">
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">John Michael</a>
</h4>
<span class="text-success">●</span>
<small>Online</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">Alex Smith</a>
</h4>
<span class="text-warning">●</span>
<small>In a meeting</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">Samantha Ivy</a>
</h4>
<span class="text-danger">●</span>
<small>Offline</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!">John Michael</a>
</h4>
<span class="text-success">●</span>
<small>Online</small>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xl-6 drop-zone">
<!-- Progress track -->
<div class="card draggable">
<!-- Card header -->
<div class="card-header">
<!-- Title -->
<h5 class="h3 mb-0">Progress track</h5>
</div>
<!-- Card body -->
<div class="card-body">
<!-- List group -->
<ul class="list-group list-group-flush list my--3">
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/bootstrap.jpg">
</a>
</div>
<div class="col">
<h5>Argon Design System</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-orange" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/angular.jpg">
</a>
</div>
<div class="col">
<h5>Angular Now UI Kit PRO</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-green" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/sketch.jpg">
</a>
</div>
<div class="col">
<h5>Black Dashboard</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-red" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
</div>
</div>
</div>
</li>
<li class="list-group-item px-0">
<div class="row align-items-center">
<div class="col-auto">
<!-- Avatar -->
<a href="#" class="avatar rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/react.jpg">
</a>
</div>
<div class="col">
<h5>React Material Dashboard</h5>
<div class="progress progress-xs mb-0">
<div class="progress-bar bg-teal" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>Sidebar Simple
Component from
Argon Dashboard
Builder
<div class="navbar-inner">
<div class="collapse navbar-collapse" id="sidenav-collapse-main">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="javascript:">
<i class="fa fa-desktop text-primary"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:">
<i class="fa fa-lock text-danger"></i>
<span class="nav-link-text">Login</span>
</a>
</li>
</ul>
</div>
</div>Table Dark
Component from
Argon Dashboard
Builder
<div class="card bg-default shadow draggable">
<div class="card-header bg-transparent border-0">
<h3 class="text-white mb-0">Dark table</h3>
</div>
<div class="table-responsive">
<table class="table align-items-center table-dark table-flush">
<thead class="thead-dark">
<tr>
<th scope="col" class="sort" data-sort="name">Project</th>
<th scope="col" class="sort" data-sort="budget">Budget</th>
<th scope="col" class="sort" data-sort="status">Status</th>
<th scope="col">Users</th>
<th scope="col" class="sort" data-sort="completion">Completion</th>
<th scope="col"></th>
</tr>
</thead>
<tbody class="list">
<tr>
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/bootstrap.jpg">
</a>
<div class="media-body">
<span class="name mb-0 text-sm">Argon Design System</span>
</div>
</div>
</th>
<td class="budget">
$2500 USD
</td>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-warning"></i>
<span class="status">pending</span>
</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">60%</span>
<div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/angular.jpg">
</a>
<div class="media-body">
<span class="name mb-0 text-sm">Angular Now UI Kit PRO</span>
</div>
</div>
</th>
<td class="budget">
$1800 USD
</td>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-success"></i>
<span class="status">completed</span>
</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">100%</span>
<div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/sketch.jpg">
</a>
<div class="media-body">
<span class="name mb-0 text-sm">Black Dashboard</span>
</div>
</div>
</th>
<td class="budget">
$3150 USD
</td>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-danger"></i>
<span class="status">delayed</span>
</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">72%</span>
<div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/react.jpg">
</a>
<div class="media-body">
<span class="name mb-0 text-sm">React Material Dashboard</span>
</div>
</div>
</th>
<td class="budget">
$4400 USD
</td>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-info"></i>
<span class="status">on schedule</span>
</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">90%</span>
<div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</td>
</tr>
<tr>
<th scope="row">
<div class="media align-items-center">
<a href="#" class="avatar rounded-circle mr-3">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/vue.jpg">
</a>
<div class="media-body">
<span class="name mb-0 text-sm">Vue Paper UI Kit PRO</span>
</div>
</div>
</th>
<td class="budget">
$2200 USD
</td>
<td>
<span class="badge badge-dot mr-4">
<i class="bg-success"></i>
<span class="status">completed</span>
</span>
</td>
<td>
<div class="avatar-group">
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg">
</a>
<a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
</a>
</div>
</td>
<td>
<div class="d-flex align-items-center">
<span class="completion mr-2">100%</span>
<div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
</div>
</div>
</div>
</td>
<td class="text-right">
<div class="dropdown">
<a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-ellipsis-v"></i>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>Navbar Simple
Component from
Argon Dashboard
Builder
<div class="container">
<a class="text-white" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-primary">
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="javascript:void(0)">
<img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/brand/blue.png">
</a>
</div>
<div class="col-6 collapse-close">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
</button>
</div>
</div>
</div>
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
<a class="nav-link" href="#">Discover <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbar-primary_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-primary_dropdown_1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>