Dashboard de entrada - minimal ou simple dahsboard para #boostrap 5 é uma simples estrutura que demonstra como é possível montrar simples #dashboards responsivos com o bootstrap.
Este é apenas um modelo de entrada com dados de testes para telas inciais com #tabelas gráficos ou #resumos
Outros componentes podem ser adicionados sempre que forem necessários e os tamanhos das colunas podem ser ajustados com o auxílio de javascript ou css media query
<div class="container-full">
<div class="row g-0">
<div class="col-12 col-sm-9">
<div class="row h-100 g-0">
<div class="col-12 col-sm-6 p-1">
<div class="bg-info h-100 rounded p-1"> col-3 <br> Resumo do mês</div>
</div>
<div class="col-12 col-sm-6 p-1">
<div class="bg-info h-100 rounded p-1">
col-9 1 <br> Vendas mês passado R$ 12.313,000</div>
</div>
<div class="col-12 p-1">
<div class="bg-info h-100 rounded p-1"> col-9 2 <br> Eventos pendentes...</div>
</div>
<div class="col-12 p-1">
<div class="bg-info h-100 rounded p-1 px-3">
col-9 3
<table class="table table-dark table-striped-columns">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Primeiro</th>
<th scope="col">Último</th>
<th scope="col">Lidar com</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Marca</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacó</td>
<td>Thornton</td>
<td>@gordo</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry o pássaro</td>
<td>@Twitter</td>
</tr>
</tbody>
</table>
<hr>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-3 p-1">
<div class="bg-warning h-100 rounded p-1">
<strong>Melhores vendedores</strong>
<br>
Ana - 100%
<br>
Exemplo - 85%
<br>
Ana - 100%
<br>
Ana - 100%
<br>
Ana - 100%
<br>
Ana - 100%
<br>
Ana - 100%
<br>
Ana - 100%
<br>
Ana - 100%
</div>
</div>
</div>
</div>