Framework
Theme
All
380
Charts
14
Charts Section
4
Cards
38
Sidebars
19
Navbars
27
Cards Section
28
Components
27
Profiles Section
8
Projects Section
10
Forms
9
Tables
24
Tables Section
11
Teams Section
8
Typography
24
Headers
30
Contacts Section
9
Testimonials
9
Faq
1
Blogs
11
Contents
10
Stats
4
Authentication
7
Features
16
Teams
5
Call To Actions
9
Logo Areas
3
Contact Us
2
Pricing
4
Bootstrap - All Components
Discover 380 Bootstrap components available in Loopple
Input Group
Component from
Asteria Dashboard
Builder
<div class="form-group mb-4 draggable">
<div class="input-group">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
</div>Dropdown
Component from
Asteria Dashboard
Builder
<div class="dropdown draggable">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false"> Primary </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>Card Carousel
Component from
Asteria Dashboard
Builder
<div class="card min-height-300 h-100 draggable">
<div class="overflow-hidden position-relative border-radius-lg min-height-300 h-100">
<div class="card-body position-relative z-index-1 d-flex flex-column min-height-300 h-100 p-0">
<div id="carouselImageSlide" class="carousel slide min-height-300 h-100" data-bs-ride="carousel">
<div class="carousel-inner min-height-300 h-100">
<div class="carousel-item min-height-300 h-100 bg-cover" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1514894780887-121968d00567?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1746&q=80');">
<span class="mask bg-gradient-dark"></span>
<div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
<h5 class="text-white font-weight-bolder mb-2 pt-2">Go slow until you win</h5>
<p class="text-white text-sm mb-0">Remote work starts with eliminating commutes and cubicles.</p>
</div>
</div>
<div class="carousel-item min-height-300 h-100 bg-cover active" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1489710437720-ebb67ec84dd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1740&q=80');">
<span class="mask bg-gradient-dark"></span>
<div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
<h5 class="text-white font-weight-bolder mb-2 pt-2">Work with the rockets</h5>
<p class="text-white text-sm mb-0">Wealth creation is an evolutionarily recent positive-sum game.</p>
</div>
</div>
<div class="carousel-item min-height-300 h-100 bg-cover" data-bs-interval="3000" style="background-image: url('https://images.unsplash.com/photo-1511497584788-876760111969?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2064&q=80');">
<span class="mask bg-gradient-dark"></span>
<div class="position-relative min-height-300 h-100 d-flex flex-column justify-content-end mt-auto p-4">
<h5 class="text-white font-weight-bolder mb-2 pt-2">Books don’t need an audience.</h5>
<p class="text-white text-sm mb-0">Set and enforce an aspirational hourly rate.</p>
</div>
</div>
</div>
<button class="carousel-control-prev ms-auto end-8 w-5" type="button" data-bs-target="#carouselImageSlide" data-bs-slide="prev">
<span class="carousel-control-prev-icon position-absolute top-4 right-10" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next w-5 end-3" type="button" data-bs-target="#carouselImageSlide" data-bs-slide="next">
<span class="carousel-control-next-icon position-absolute top-4 right-10 text-sm" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>Progress
Component from
Asteria Dashboard
Builder
<div class="progress-wrapper mb-4 draggable">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold">80%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-syccess w-80" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>Section Tables Dark
Component from
Asteria Dashboard
Builder
<div class="row mt-4 removable">
<div class="col-lg-8 col-md-6 mb-4 drop-zone">
<div class="card draggable bg-dark">
<div class="card-header pb-0 bg-transparent">
<div class="row">
<div class="col-lg-6 col-7">
<h6 class="text-white">Projects</h6>
</div>
<div class="col-lg-6 col-5 my-auto text-end text-white">
<p class="text-sm mb-0">
<i class="fa fa-check text-success" aria-hidden="true"></i>
<span class="font-weight-bold ms-1">21 done</span> this month
</p>
</div>
</div>
</div>
<div class="card-body px-0 pb-2">
<div class="table-responsive">
<table class="table align-items-center mb-0">
<thead>
<tr>
<th class="text-white text-sm font-weight-bolder opacity-7">Companies</th>
<th class="text-white text-sm font-weight-bolder opacity-7 ps-2">Members</th>
<th class="text-center text-white text-sm font-weight-bolder opacity-7">Budget</th>
<th class="text-center text-white text-sm font-weight-bolder opacity-7">Completion</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border-dark">
<div class="d-flex px-2 py-1 ms-2">
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm text-white">Artensia UI Version</h6>
</div>
</div>
</td>
<td class="border-dark">
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Ryan Tompson">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMHBob3RvfGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Romina Hadid">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cHJvZmlsZSUyMHBob3RvfGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Alexander Smith">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1623577284502-d65cdc6ba0b6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nzd8fHByb2ZpbGUlMjBwaG90b3xlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Jessica Doe">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60">
</a>
</div>
</td>
<td class="align-middle text-center text-sm border-dark">
<span class="text-xs font-weight-bold text-white"> $14,000 </span>
</td>
<td class="align-middle border-dark">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold text-white">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-info w-60" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
</tr>
<tr>
<td class="border-dark">
<div class="d-flex px-2 py-1 ms-2">
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm text-white">Add Progress Track</h6>
</div>
</div>
</td>
<td class="border-dark">
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Jessica Doe">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Jessica Doe">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-4.jpg">
</a>
</div>
</td>
<td class="align-middle text-center text-sm border-dark">
<span class="text-xs font-weight-bold text-white"> $3,000 </span>
</td>
<td class="align-middle border-dark">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold text-white">10%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-info w-10" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
</tr>
<tr>
<td class="border-dark">
<div class="d-flex px-2 py-1 ms-2">
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm text-white">Fix Platform Errors</h6>
</div>
</div>
</td>
<td class="border-dark">
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Romina Hadid">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cHJvZmlsZSUyMHBob3RvfGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Jessica Doe">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-1.jpg">
</a>
</div>
</td>
<td class="align-middle text-center text-sm border-dark">
<span class="text-xs font-weight-bold text-white"> Not set </span>
</td>
<td class="align-middle border-dark">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold text-white">100%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-success w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
</tr>
<tr>
<td class="border-dark">
<div class="d-flex px-2 py-1 ms-2">
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm text-white">Launch our Mobile App</h6>
</div>
</div>
</td>
<td class="border-dark">
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Ryan Tompson">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMHBob3RvfGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Jessica Doe">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Romina Hadid">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cHJvZmlsZSUyMHBob3RvfGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60">
</a>
</div>
</td>
<td class="align-middle text-center text-sm border-dark">
<span class="text-xs font-weight-bold text-white"> $20,500 </span>
</td>
<td class="align-middle border-dark">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold text-white">100%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-success w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
</tr>
<tr>
<td class="border-dark">
<div class="d-flex px-2 py-1 ms-2">
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm text-white">Add the New Pricing Page</h6>
</div>
</div>
</td>
<td class="border-dark">
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Ryan Tompson">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-4.jpg">
</a>
</div>
</td>
<td class="align-middle text-center text-sm border-dark">
<span class="text-xs font-weight-bold text-white"> $500 </span>
</td>
<td class="align-middle border-dark">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold text-white">25%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-info w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="25"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="d-flex px-2 py-1 ms-2">
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm text-white">Redesign New Online Shop</h6>
</div>
</div>
</td>
<td>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Ryan Tompson">
<img alt="Image placeholder" src="https://demos.creative-tim.com/soft-ui-dashboard/assets/img/team-1.jpg">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Ryan Tompson">
<img alt="Image placeholder" src="https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMHBob3RvfGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60">
</a>
</div>
</td>
<td class="align-middle text-center text-sm">
<span class="text-xs font-weight-bold text-white"> $2,000 </span>
</td>
<td class="align-middle">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold text-white ">40%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-info w-40" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4 drop-zone">
<div class="card draggable h-100 bg-dark">
<div class="card-header pb-0 bg-transparent">
<div class="row">
<div class="col-lg-6 col-7">
<h6 class="text-white">Orders overview</h6>
</div>
<div class="col-lg-6 col-5 my-auto text-end">
<p class="text-sm text-white">
<i class="fa fa-arrow-up text-success" aria-hidden="true"></i>
<span class="font-weight-bold text-success">24%</span> this month
</p>
</div>
</div>
</div>
<div class="card-body p-3">
<div class="timeline timeline-one-side">
<div class="timeline-block mb-3">
<span class="timeline-step">
<span class="p-1 bg-danger rounded-circle"></span>
</span>
<div class="timeline-content">
<h6 class="text-white text-sm font-weight-bold mb-0">$2400, Design changes</h6>
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">22 DEC 7:20 PM</p>
</div>
</div>
<div class="timeline-block mb-3">
<span class="timeline-step">
<span class="p-1 bg-warning rounded-circle"></span>
</span>
<div class="timeline-content">
<h6 class="text-white text-sm font-weight-bold mb-0">New order #1832412</h6>
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">21 DEC 11 PM</p>
</div>
</div>
<div class="timeline-block mb-3">
<span class="timeline-step">
<span class="p-1 bg-dark rounded-circle"></span>
</span>
<div class="timeline-content">
<h6 class="text-white text-sm font-weight-bold mb-0">Server payments for April</h6>
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">21 DEC 9:34 PM</p>
</div>
</div>
<div class="timeline-block mb-3">
<span class="timeline-step">
<span class="p-1 bg-success rounded-circle"></span>
</span>
<div class="timeline-content">
<h6 class="text-white text-sm font-weight-bold mb-0">New card added for order #4395133</h6>
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">20 DEC 2:20 AM</p>
</div>
</div>
<div class="timeline-block mb-3">
<span class="timeline-step">
<span class="p-1 bg-info rounded-circle"></span>
</span>
<div class="timeline-content">
<h6 class="text-white text-sm font-weight-bold mb-0">Unlock packages for development</h6>
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">18 DEC 4:54 AM</p>
</div>
</div>
<div class="timeline-block">
<span class="timeline-step">
<span class="p-1 bg-secondary rounded-circle"></span>
</span>
<div class="timeline-content">
<h6 class="text-white text-sm font-weight-bold mb-0">New order #9583120</h6>
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">17 DEC</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Section Teams Simple
Component from
Asteria Dashboard
Builder
<div class="row removable">
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card mb-4 draggable" draggable="true">
<!-- Card body -->
<div class="card-body p-3">
<div class="d-flex align-items-center">
<div>
<img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60" class="avatar avata-sm">
</div>
<div class="ms-3">
<span class="h6 font-weight-bold mb-0">Alex Mirrial</span>
<h6 class="card-title text-capitalize text-muted text-sm mb-0">CEO</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card mb-4 draggable" draggable="true">
<!-- Card body -->
<div class="card-body p-3">
<div class="d-flex align-items-center">
<div>
<img src="https://images.unsplash.com/photo-1485893086445-ed75865251e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" class="avatar avata-sm">
</div>
<div class="ms-3">
<span class="h6 font-weight-bold mb-0">Miriam Silfon</span>
<h6 class="card-title text-muted text-sm mb-0">Back-End Developer</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card mb-4 draggable" draggable="true">
<!-- Card body -->
<div class="card-body p-3">
<div class="d-flex align-items-center">
<div>
<img src="https://images.unsplash.com/photo-1564061170517-d3907caa96ea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8ODF8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" class="avatar avata-sm">
</div>
<div class="ms-3">
<span class="h6 font-weight-bold mb-0">Alexis Thomson</span>
<h6 class="card-title text-muted text-sm mb-0">UI Designer</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 drop-zone">
<div class="card mb-4 draggable" draggable="true">
<!-- Card body -->
<div class="card-body p-3">
<div class="d-flex align-items-center">
<div>
<img src="https://images.unsplash.com/photo-1529068755536-a5ade0dcb4e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTR8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" class="avatar avata-sm">
</div>
<div class="ms-3">
<span class="h6 font-weight-bold mb-0">Maxim Illias</span>
<h6 class="card-title text-muted text-sm mb-0">Java Developer</h6>
</div>
</div>
</div>
</div>
</div>
</div>Section Projects Cards
Component from
Asteria Dashboard
Builder
<div class="row removable mt-4">
<div class="col-12 col-xl-4 drop-zone">
<div class="card draggable mb-4" draggable="true">
<div class="card-header p-3 pb-0">
<div class="row">
<div class="col-8 d-flex">
<div>
<img src="https://images.unsplash.com/photo-1553640582-f9d3a73acb6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDU2fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" class="avatar avatar-sm me-2" alt="avatar image">
</div>
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">Lucas Prila</h6>
<p class="text-xs"><b>Fixed price</b> - posted 2h ago</p>
</div>
</div>
<div class="col-4">
<span class="badge bg-gradient-info ms-auto float-end">NEW</span>
</div>
</div>
</div>
<div class="card-body p-3 pt-1">
<h6>Ruby developer needed.</h6>
<p class="text-sm">The website was initially built in PHP, I need a professional ruby programmer to shift it.</p>
<div class="d-flex bg-gray-100 border-radius-lg p-3">
<h4 class="my-auto">
<span class="text-secondary text-sm me-1">$</span>3,000<span class="text-secondary text-sm ms-1">/ month </span>
</h4>
<a href="javascript:;" class="btn btn-outline-dark mb-0 ms-auto">Apply</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-4 drop-zone">
<div class="card draggable mb-4" draggable="true">
<div class="card-header p-3 pb-0">
<div class="row">
<div class="col-8 d-flex">
<div>
<img src="https://images.unsplash.com/photo-1561828970-daff2303fe58?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDU4fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" class="avatar avatar-sm me-2" alt="avatar image">
</div>
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">Miriam Jhonson</h6>
<p class="text-xs"><b>Hourly</b> - posted 3h ago</p>
</div>
</div>
</div>
</div>
<div class="card-body p-3 pt-1">
<h6>Website redesign needed.</h6>
<p class="text-sm">We would like a progressive designer to create website designs for our new corporate website.</p>
<div class="d-flex bg-gray-100 border-radius-lg p-3">
<h4 class="my-auto">
<span class="text-secondary text-sm me-1">$</span>24,5<span class="text-secondary text-sm ms-1">/ hour </span>
</h4>
<a href="javascript:;" class="btn btn-outline-dark mb-0 ms-auto">Apply</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-4 drop-zone">
<div class="card draggable mb-4" draggable="true">
<div class="card-header p-3 pb-0">
<div class="row">
<div class="col-8 d-flex">
<div>
<img src="https://images.unsplash.com/photo-1630594384259-aa5b88fb4a2a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NjIyfHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" class="avatar avatar-sm me-2" alt="avatar image">
</div>
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">Andrew Michael</h6>
<p class="text-xs"><b>Hourly</b> - posted 4h ago</p>
</div>
</div>
</div>
</div>
<div class="card-body p-3 pt-1">
<h6>Looking for a Three.js Developer.</h6>
<p class="text-sm">I'm looking for an expert three.js developer to develop our website.</p>
<div class="d-flex bg-gray-100 border-radius-lg p-3">
<h4 class="my-auto">
<span class="text-secondary text-sm me-1">$</span>15<span class="text-secondary text-sm ms-1">/ hour </span>
</h4>
<a href="javascript:;" class="btn btn-outline-dark mb-0 ms-auto">Apply</a>
</div>
</div>
</div>
</div>
</div>Badge
Alert
Component from
Asteria Dashboard
Builder
<div class="alert alert-primary text-white draggable" role="alert">
A simple primary alert—check it out!
</div>Table Projects
Component from
Asteria Dashboard
Builder
<div class="card mb-4 draggable">
<div class="card-header pb-0">
<div class="row">
<div class="col-lg-6 col-7">
<h6>Projects</h6>
</div>
<div class="col-lg-6 col-5 my-auto text-end">
<div class="dropdown float-lg-end pe-2">
<a class="cursor-pointer" id="dropdownTable" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa fa-ellipsis-v text-secondary"></i>
</a>
<ul class="dropdown-menu py-2 ms-sm-n4 ms-n5" aria-labelledby="dropdownTable">
<li><a class="dropdown-item" href="javascript:;"><i class="fa fa-download me-3"></i>Download</a></li>
<li><a class="dropdown-item" href="javascript:;"><i class="fa fa-print me-3"></i>Print</a></li>
<li><a class="dropdown-item" href="javascript:;"><i class="fa fa-archive me-3"></i>Archive</a></li>
<hr class="my-2">
<li><a class="dropdown-item text-danger" href="javascript:;"><i class="fa fa-trash me-3"></i>Delete</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="card-body px-0 py-2">
<div class="table-responsive">
<table class="table align-items-center mb-0">
<thead>
<tr>
<th class="text-secondary text-sm font-weight-bold opacity-8">Companies</th>
<th class="text-secondary text-sm font-weight-bold opacity-8 ps-2">Members</th>
<th class="text-center text-secondary text-sm font-weight-bold opacity-8">Budget</th>
<th class="text-center text-secondary text-sm font-weight-bold opacity-8">Completion</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ps-4">
<h6 class="mb-0 text-sm">Loopple</h6>
</td>
<td>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
<img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60" alt="team1">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
<img src="https://images.unsplash.com/photo-1485893086445-ed75865251e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" alt="team2">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Alexander Smith">
<img src="https://images.unsplash.com/photo-1529068755536-a5ade0dcb4e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTR8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" alt="team3">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
<img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA3fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="team4">
</a>
</div>
</td>
<td class="align-middle text-center text-sm">
<span class="text-xs font-weight-bold"> $14,000 </span>
</td>
<td class="align-middle">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold">60%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-gradient-info w-60" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
</tr>
<tr>
<td class="ps-4">
<h6 class="mb-0 text-sm">Facebook</h6>
</td>
<td>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
<img src="https://images.unsplash.com/photo-1485893086445-ed75865251e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" alt="team5">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
<img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA3fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="team6">
</a>
</div>
</td>
<td class="align-middle text-center text-sm">
<span class="text-xs font-weight-bold"> $3,000 </span>
</td>
<td class="align-middle">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold">10%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-gradient-info w-10" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
</tr>
<tr>
<td class="ps-4">
<h6 class="mb-0 text-sm">Creative Tim</h6>
</td>
<td>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
<img src="https://images.unsplash.com/photo-1529068755536-a5ade0dcb4e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTR8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" alt="team8">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
<img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60" alt="team9">
</a>
</div>
</td>
<td class="align-middle text-center text-sm">
<span class="text-xs font-weight-bold"> Not set </span>
</td>
<td class="align-middle">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold">100%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-gradient-success w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
</tr>
<tr>
<td class="ps-4">
<h6 class="mb-0 text-sm">Shopify</h6>
</td>
<td>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
<img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA3fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="user1">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
<img src="https://images.unsplash.com/photo-1529068755536-a5ade0dcb4e8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTR8fHBvcnRyYWl0fGVufDB8MnwwfHw%3D&auto=format&fit=crop&w=800&q=60" alt="user2">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Alexander Smith">
<img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA3fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="user3">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
<img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60" alt="user4">
</a>
</div>
</td>
<td class="align-middle text-center text-sm">
<span class="text-xs font-weight-bold"> $20,500 </span>
</td>
<td class="align-middle">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold">100%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-gradient-success w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</td>
</tr>
<tr>
<td class="ps-4">
<h6 class="mb-0 text-sm">Asana</h6>
</td>
<td>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
<img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA3fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="user5">
</a>
</div>
</td>
<td class="align-middle text-center text-sm">
<span class="text-xs font-weight-bold"> $500 </span>
</td>
<td class="align-middle">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold">25%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-gradient-info w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="25"></div>
</div>
</div>
</td>
</tr>
<tr>
<td class="ps-4">
<h6 class="mb-0 text-sm">Invision</h6>
</td>
<td>
<div class="avatar-group mt-2">
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
<img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cG9ydHJhaXR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60" alt="user6">
</a>
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
<img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA3fHxwb3J0cmFpdHxlbnwwfDJ8MHx8&auto=format&fit=crop&w=800&q=60" alt="user7">
</a>
</div>
</td>
<td class="align-middle text-center text-sm">
<span class="text-xs font-weight-bold"> $2,000 </span>
</td>
<td class="align-middle">
<div class="progress-wrapper w-75 mx-auto">
<div class="progress-info">
<div class="progress-percentage">
<span class="text-xs font-weight-bold">40%</span>
</div>
</div>
<div class="progress">
<div class="progress-bar bg-gradient-info w-40" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>