Bootstrap Components - Asteria Dashboard
Discover 72 Bootstrap components available in Asteria Dashboard
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>
Requires JavaScript
Chart Pie
Component from
Asteria Dashboard
Builder
<div class="card mb-4 z-index-2 draggable"> <div class="card-header pb-0"> <h6 class="mb-1">Market Distribution</h6> </div> <div class="card-body card-body px-3 pt-lg-6 pb-lg-5"> <div class="row h-100"> <div class="col-lg-5 my-auto text-center d-lg-block d-flex justify-content-center"> <div id="chart-pie" class="chart-pie"> </div> </div> </div> </div> </div>
<script>
var ctx = document.getElementById("chart-pie"); var chartPie = new ApexCharts(ctx, { chart: { width: 380, type: 'donut', }, dataLabels: { enabled: false }, plotOptions: { pie: { customScale: 1, expandOnClick: false, donut: { size: "80%", } }, }, legend: { position: "right", verticalAlign: "center", containerMargin: { left: 35, right: 60 } }, series: [66, 55, 13, 33], labels: ['Asia', 'USA', 'China', 'Africa'], colors: ['#00ab5599', '#00ab55', '#00ab5535', '#00ab5550'], donut: { size: "100%" }, responsive: [ { breakpoint: 1550, options: { chart: { width: 340, }, legend: { position: "bottom", verticalAlign: "bottom", containerMargin: { left: 'auto', right: 'auto' } }, } }, { breakpoint: 1450, options: { chart: { width: 300, }, } } ] }); chartPie.render();
</script>
Table Excel
Component from
Asteria Dashboard
Builder
<div class="card table-responsive draggable">
<div class="card-header border-bottom-0">
<h6 class="text-dark">Table Excel</h6>
</div>
<table class="table" data-integration="excel" tbody-td-classes="text-sm px-4" thead-th-classes="text-secondary text-sm font-weight-bold opacity-8">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row" class="text-sm px-4">1</td>
<td class="text-sm px-4">Mark</td>
<td class="text-sm px-4" >Otto</td>
<td class="text-sm px-4">@mdo</td>
</tr>
<tr>
<td scope="row" class="text-sm px-4">2</td>
<td class="text-sm px-4">Jacob</td>
<td class="text-sm px-4">Thornton</td>
<td class="text-sm px-4">@fat</td>
</tr>
<tr>
<td scope="row" class="text-sm px-4">3</td>
<td class="text-sm px-4">Larry</td>
<td class="text-sm px-4">the Bird</td>
<td class="text-sm px-4">@twitter</td>
</tr>
</tbody>
</table>
</div>
Requires JavaScript
Chart Lines
Component from
Asteria Dashboard
Builder
<div class="card mb-4 draggable"> <div class="card-header pb-0 d-flex align-items-center"> <div> <h6 class="mb-1">Sales overview</h6> <p class="text-sm mb-0"> (+32%) more in 2021 </p> </div> <select class="form-select form-select-sm ms-auto w-20 font-weight-bolder bg-gray-100" aria-label=".form-select-sm example"> <option selected>2021</option> <option value="2020">2020</option> </select> </div> <div class="card-body p-3"> <div class="chart"> <canvas class="chart-line" class="chart-canvas" height="300"></canvas> </div> </div> </div>
<script>
var ctx2 = document.querySelectorAll(".chart-line"); new Chart(ctx2[ctx2.length-1], { type: "line", data: { labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], datasets: [{ label: "Black Friday", tension: 0.4, borderWidth: 0, pointRadius: 0, borderColor: "#00ab55", borderWidth: 3, backgroundColor: "transparent", data: [20, 60, 20, 50, 90, 220, 440, 380, 500], maxBarThickness: 6 }, { label: "Autumn Sale", tension: 0.4, borderWidth: 0, pointRadius: 0, borderColor: "#212b36", borderWidth: 3, backgroundColor: "transparent", data: [30, 90, 40, 140, 290, 290, 240, 270, 230], maxBarThickness: 6 }, ], }, options: { responsive: true, maintainAspectRatio: false, legend: { display: false, }, tooltips: { enabled: true, mode: "index", intersect: false, }, scales: { yAxes: [{ gridLines: { borderDash: [2], borderDashOffset: [2], color: '#dee2e6', zeroLineColor: '#dee2e6', zeroLineWidth: 1, zeroLineBorderDash: [2], drawBorder: false, }, ticks: { suggestedMin: 0, suggestedMax: 500, beginAtZero: true, padding: 10, fontSize: 11, fontColor: '#adb5bd', lineHeight: 3, fontStyle: 'normal', fontFamily: "Public Sans", }, }, ], xAxes: [{ gridLines: { zeroLineColor: 'rgba(0,0,0,0)', display: false, }, ticks: { padding: 10, fontSize: 11, fontColor: '#adb5bd', lineHeight: 3, fontStyle: 'normal', fontFamily: "Public Sans", }, }, ], }, }, });
</script>
Card Stats
Component from
Asteria Dashboard
Builder
<div class="row removable">
<div class="col-xl-3 col-sm-6 drop-zone">
<div class="card mb-4 draggable">
<div class="card-body p-3">
<div class="row">
<div class="col-8">
<div class="numbers">
<p class="text-sm mb-0 text-capitalize text-dark font-weight-bold">Today's Money</p>
<div class="d-flex align-items-center my-2">
<span class="badge bg-success-soft text-xxs">
<i class="fas fa-angle-up text-success" aria-hidden="true"></i>
</span>
<span class="text-xs font-weight-bolder ms-1">+55%</span>
</div>
<h4 class="font-weight-bolder mb-0">
$53,000
</h4>
</div>
</div>
<div class="col-4 text-end">
<div class="icon icon-shape bg-primary shadow text-center border-radius-md ms-auto">
<i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 drop-zone">
<div class="card mb-4 draggable">
<div class="card-body p-3">
<div class="row">
<div class="col-8">
<div class="numbers">
<p class="text-sm mb-0 text-capitalize text-dark font-weight-bold">Today's Users</p>
<div class="d-flex align-items-center my-2">
<span class="badge bg-success-soft text-xxs">
<i class="fas fa-angle-up text-success" aria-hidden="true"></i>
</span>
<span class="text-xs font-weight-bolder ms-1">+3%</span>
</div>
<h4 class="font-weight-bolder mb-0">
2,300
</h4>
</div>
</div>
<div class="col-4 text-end">
<div class="icon icon-shape bg-primary shadow text-center border-radius-md ms-auto">
<i class="ni ni-world text-lg opacity-10" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 drop-zone">
<div class="card mb-4 draggable">
<div class="card-body p-3">
<div class="row">
<div class="col-8">
<div class="numbers">
<p class="text-sm mb-0 text-capitalize text-dark font-weight-bold">New Clients</p>
<div class="d-flex align-items-center my-2">
<span class="badge bg-danger-soft text-xxs">
<i class="fas fa-angle-down text-danger" aria-hidden="true"></i>
</span>
<span class="text-xs font-weight-bolder ms-1">-2.06%</span>
</div>
<h4 class="font-weight-bolder mb-0">
3,462
</h4>
</div>
</div>
<div class="col-4 text-end">
<div class="icon icon-shape bg-primary shadow text-center border-radius-md ms-auto">
<i class="ni ni-paper-diploma text-lg opacity-10" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 drop-zone">
<div class="card mb-4 draggable">
<div class="card-body p-3">
<div class="row">
<div class="col-8">
<div class="numbers">
<p class="text-sm mb-0 text-capitalize text-dark font-weight-bold">Sales</p>
<div class="d-flex align-items-center my-2">
<span class="badge bg-success-soft text-xxs">
<i class="fas fa-angle-up text-success" aria-hidden="true"></i>
</span>
<span class="text-xs font-weight-bolder ms-1">+5,42%</span>
</div>
<h4 class="font-weight-bolder mb-0">
$103,430
</h4>
</div>
</div>
<div class="col-4 text-end">
<div class="icon icon-shape bg-primary shadow text-center border-radius-md ms-auto">
<i class="ni ni-cart text-lg opacity-10" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Requires JavaScript
Chart Bar Stacked
Component from
Asteria Dashboard
Builder
<div class="card mb-4 z-index-2 draggable"> <div class="card-header pb-0"> <h6 class="mb-1">Stock Available</h6> </div> <div class="card-body"> <canvas class="chart-bar-stacked" width="400" height="200"></canvas> </div> </div>
<script>
const ctx3 = document.querySelectorAll('.chart-bar-stacked'); const data = { labels: [ "2015", "2016", "2017", "2018", "2019", "2020" ], datasets: [ { label: "Long", backgroundColor: "#0dcaf0", data: [ 9000, 5000, 5240, 3520, 2510, 3652 ] }, { label: "Short", backgroundColor: "#5e72e4", data: [ 3000, 4000, 6000, 3500, 3600, 8060 ] }, { label: "Spreading", backgroundColor: "#20c997", data: [ 6000, 7200, 6500, 4600, 3600, 9200 ] } ] }; const options = { scales: { yAxes: [ { stacked: true, ticks: { fontSize: 14, lineHeight: 3, fontColor: "#adb5bd" }, gridLines: { display: false } }], xAxes: [ { stacked: true, ticks: { fontSize: 14, lineHeight: 3, fontColor: "#adb5bd" } } ] } }; const chart = new Chart(ctx3[ctx3.length-1], { // The type of chart we want to create type: "bar", // The data for our dataset data: data, // Configuration options go here options: options });
</script>
Requires JavaScript
