Dashboard de entrada - minimal ou simple dahsboard para boostrap 5


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>