Ir para conteúdo
M_Berno

Espaçamento entre as colunas no Bootstrap 4

Recommended Posts

Boa tarde, sou nova no Bootstrap e gostaria de saber onde modifico o espaçamento entre colunas.
Tenho 6 colunas na mesma linha e gostaria de dar um espaço maior no centro separando os grupos do ranking de mais baixado e de mais utilizados.



 

 <!-- Ranking Mais Baixados-->

    <div class="container my-5">
        <div class="row">
            <div class="col-lg-6 col-md-12">
                <h3 class="text-center mb-4">
                    Ranking<span class="text-warning"> Mais Baixados</span> do Dia
                </h3>
                <div class="row">
                    <div class="col-md-4 col-xsm-12">

                        <div class="card card-profile">
                            <div class="card-avatar">
                                <a href="#">
                                    <img class="img" src="img/geral/medalha_ouro.png">
                                </a>
                            </div>
                            <div class="card-body">
                                <img src="img/ranking/continental.png" alt="continental">
                                <h6 class="card-category text-dark">CONTINENTAL</h6>

                                <p class="card-description">CATÁLOGO AUTOMOTIVO</p>

                                <p class="card-description mb-4">Linha Leve / Pesada</p>
                            </div>

                            <div class="card-footer justify-content-center">
                                <p style="font-size: 11px">
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a></p>
                            </div>
                        </div>





                    </div>
                    <div class="col-md-4 col-xsm-12">
                        <div class="card card-profile">
                            <div class="card-avatar">
                                <a href="#">
                                    <img class="img" src="img/geral/medalha_prata.png">
                                </a>
                            </div>
                            <div class="card-body">
                                <img src="img/ranking/corven.png" alt="corven">
                                <h6 class="card-category text-dark">CORVEN</h6>

                                <p class="card-description">CATÁLOGO AUTOMOTIVO</p>

                                <p class="card-description mb-4">Linha Leve / Pesada</p>
                            </div>

                            <div class="card-footer justify-content-center">
                                <p style="font-size: 11px">
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-xsm-12">
                        <div class="card card-profile">
                            <div class="card-avatar">
                                <a href="#">
                                    <img class="img" src="img/geral/medalha_bronze.png">
                                </a>
                            </div>
                            <div class="card-body">
                                <img src="img/ranking/vox.png" alt="vox">
                                <h6 class="card-category text-dark">VOX</h6>

                                <p class="card-description">CATÁLOGO AUTOMOTIVO</p>

                                <p class="card-description mb-4">Linha Leve / Pesada</p>
                            </div>

                            <div class="card-footer justify-content-center">
                                <p style="font-size: 11px">
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>




            <!-- Ranking Mais Utilizados-->


            <div class="col-lg-6 col-md-12">
                <h3 class="text-center mb-4">
                    Ranking<span class="text-warning"> Mais Utilizados</span> do Dia
                </h3>
                <div class="row">
                    <div class="col-md-4 col-xsm-12">

                        <div class="card card-profile">
                            <div class="card-avatar">
                                <a href="#">
                                    <img class="img" src="img/geral/medalha_ouro.png">
                                </a>
                            </div>
                            <div class="card-body">
                                <img src="img/ranking/continental.png" alt="continental">
                                <h6 class="card-category text-dark">CONTINENTAL</h6>

                                <p class="card-description">CATÁLOGO AUTOMOTIVO</p>

                                <p class="card-description mb-4">Linha Leve / Pesada</p>
                            </div>

                            <div class="card-footer justify-content-center">
                                <p style="font-size: 11px">
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a></p>
                            </div>
                        </div>





                    </div>
                    <div class="col-md-4 col-xsm-12">
                        <div class="card card-profile">
                            <div class="card-avatar">
                                <a href="#">
                                    <img class="img" src="img/geral/medalha_prata.png">
                                </a>
                            </div>
                            <div class="card-body">
                                <img src="img/ranking/corven.png" alt="corven">
                                <h6 class="card-category text-dark">CORVEN</h6>

                                <p class="card-description">CATÁLOGO AUTOMOTIVO</p>

                                <p class="card-description mb-4">Linha Leve / Pesada</p>
                            </div>

                            <div class="card-footer justify-content-center">
                                <p style="font-size: 11px">
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-xsm-12">
                        <div class="card card-profile">
                            <div class="card-avatar">
                                <a href="#">
                                    <img class="img" src="img/geral/medalha_bronze.png">
                                </a>
                            </div>
                            <div class="card-body">
                                <img src="img/ranking/vox.png" alt="vox">
                                <h6 class="card-category text-dark">VOX</h6>

                                <p class="card-description">CATÁLOGO AUTOMOTIVO</p>

                                <p class="card-description mb-4">Linha Leve / Pesada</p>
                            </div>

                            <div class="card-footer justify-content-center">
                                <p style="font-size: 11px">
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a>
                                    <a href="#">#borrachas </a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por alessandrolcruz
      Olá amigos,
       
      Preciso de uma ajuda.
       
      Eu tenho um banco de dados e nele tem uma tabela de nome segurado com os campos (limite_atual, limite_disponível e limite_usado).
       
      Eu preciso fazer com que o campo limite_atual mostre o resultado entre a subtraçao do limite_usado do limite_disponivel e não sei como fazer isso no php.
       
      você podem me ajudar????
    • Por Esquerda nunca mais!
      Saudações a todos!
      Tenho um html simples, apesar de tudo, a impressão sai com uma margem um pouco maior no lado esquerdo. Segue folha de estilo.
      https://pastebin.com/i7x8XRXJ
    • Por Paulooc
      Sou novo nesse tipo de progamação
       
      Estou criando uma consulta onde a mesma variável contem informações diferentes para empenhos diferentes ex:
      empenho 100 corresponde a quantidade de funcionários
      empenho 101  corresponde a quantidade de horas 
       
      Quando executo a consulta as informações aparecem da seguinte maneira 
      COD_OBJETOCUSTO    Quantidade    Horas 1    148    9     2    148     1     3    148     6     4    148    2     5    148     2     6    148     0     7    148         540 8    148         60 9    148        360 10    148         120 11    148         120 12    148         0  
       
      Gostaria que ficasse da seguinte forma  
      Cod_objetocusto Quantidade Horas 1    148     9    540 2    148     1    60 3    148    6    360 4    148    2    120 5    148    2     120 6    148     0    0  
      eis a sql
      select  pmp.cod_objetocusto, decode(pmp.cod_empenho,100,pmm.tecnica), decode(pmp.cod_empenho,101,pmm.tecnica) from    planejamento.mvtoplanilhas pmp        ,planejamento.mvtomespla pmm where pmm.ano = &Ano and   pmm.mes = &Mes_Ini and   pmp.cod_grupoempresa = 1 and   pmp.cod_empresa = &Empresa and   pmp.cod_filial = &Filial and   pmp.cod_empenho in (100,101) and   pmm.codmvtoplanilha = pmp.codmvtoplanilha and   pmp.cod_objetocusto  =    &Obj;  
      desde já agradeço.
       
    • Por Rafael Motta
      Boa tarde a todos, tenho um codigo que gera um json com dados em array, porém ele está separando os dados do array, como da pra ver abaixo... precisava que ele juntasse tudo em um array, para uso no datatables (colunas iguais, mas dados diferentes, isso ta dando conflito...)
      Array ( [aaData] => Array ( [0] => Array ( [NOTA] => 484706 [NRO_NOTA] => 377328 [EMISSAO] => 2018-02-16 [QUANTIDADE1] => 24.000 [TOTAL1] => 595.950000 [VALOR_DESCONTO1] => 0.00 [VALOR_IPI1] => 91.45 [VALOR_SUBST] => 167.7905 [REPRES_NOME] => TMK [VENDEDOR_NOME] => . [OP_NOME] => ALINE [FRANQUEADO_NOME] => . [TRANSP_NOME] => BRASPRESS TRANSP. URGENTES LTDA [CARTEIRA] => ATIVO 2 [OCORRENCIA] => 0 [DATA_OCORRENCIA] => [COD_TRANSPORTADOR] => 4 [RASTREAMENTO_CORREIO] => [BRUTO] => 595.950000 [PRECO_MEDIO] => 24.831250 [TOTAL_NF] => 855.190500 [CONHECIMENTO] => 0 [VALOR_FRETE] => 0 [PERCENTUAL] => 0 [DESCRICAO] => . [0] => Array ( [COD_PRODUTO] => 313 [DESC_PROD] => PALM BAC [QUANTIDADE] => 6.000 [UNITARIO] => 13.000000 [PCT_IPI] => 0.00 [VALOR_IPI] => 0.00 [DESCONTO] => 0.00 [DESC_UNITARIO] => 0.00000000 [VALOR_DESCONTO] => 0.00 [TOTAL] => 78.000000 [ID_NOTAITEM] => 2886795 ) [1] => Array ( [COD_PRODUTO] => 522 [DESC_PROD] => CALC [QUANTIDADE] => 3.000 [UNITARIO] => 34.100000 [PCT_IPI] => 0.00 [VALOR_IPI] => 0.00 [DESCONTO] => 0.00 [DESC_UNITARIO] => 0.00000000 [VALOR_DESCONTO] => 0.00 [TOTAL] => 102.300000 [ID_NOTAITEM] => 2886796 ) [2] => Array ( [COD_PRODUTO] => 781 [DESC_PROD] => MAQUI [QUANTIDADE] => 6.000 [UNITARIO] => 27.710000 [PCT_IPI] => 22.00 [VALOR_IPI] => 36.58 [DESCONTO] => 0.00 [DESC_UNITARIO] => 0.00000000 [VALOR_DESCONTO] => 0.00 [TOTAL] => 166.260000 [ID_NOTAITEM] => 2886797 ) [3] => Array ( [COD_PRODUTO] => 782 [DESC_PROD] => MAQUIA [QUANTIDADE] => 3.000 [UNITARIO] => 27.710000 [PCT_IPI] => 22.00 [VALOR_IPI] => 18.29 [DESCONTO] => 0.00 [DESC_UNITARIO] => 0.00000000 [VALOR_DESCONTO] => 0.00 [TOTAL] => 83.130000 [ID_NOTAITEM] => 2886798 ) [4] => Array ( [COD_PRODUTO] => 789 [DESC_PROD] => TONAL [QUANTIDADE] => 6.000 [UNITARIO] => 27.710000 [PCT_IPI] => 22.00 [VALOR_IPI] => 36.58 [DESCONTO] => 0.00 [DESC_UNITARIO] => 0.00000000 [VALOR_DESCONTO] => 0.00 [TOTAL] => 166.260000 [ID_NOTAITEM] => 2886799 ) ) segue meu codigo abaixo 
      require '../../../functions/conexao.php'; $idCustomer = $_REQUEST['idCustomer']; $pdo = conecta(); $consultar = $pdo->prepare("SELECT NOTAS.NOTA,NOTAS.NRO_NOTA,NOTAS.EMISSAO,Sum(NOTAS_ITEM.QUANTIDADE) AS QUANTIDADE1, Sum(NOTAS_ITEM.TOTAL) AS TOTAL1," . " Sum(NOTAS_ITEM.VALOR_DESCONTO) AS VALOR_DESCONTO1, Sum(NOTAS_ITEM.VALOR_IPI) AS VALOR_IPI1, Sum(COALESCE(NOTAS_ITEM.ICMS_SUBST_VALOR,0)) AS VALOR_SUBST, " . "REPRESENTANTES.NOME AS REPRES_NOME, VENDEDORES.NOME AS VENDEDOR_NOME, OP_TELEMARKETING.NOME AS OP_NOME, FRANQUEADOS.NOME AS FRANQUEADO_NOME, " . "TRANSPORTADORAS.NOME AS TRANSP_NOME, CARTEIRA.CARTEIRA, COALESCE(NOTAS.OCORRENCIA,'')AS OCORRENCIA, COALESCE(NOTAS.DATA_OCORRENCIA,'') AS DATA_OCORRENCIA, " . "NOTAS.COD_TRANSPORTADOR,COALESCE(PEDIDOS.RASTREAMENTO_CORREIO,'') AS RASTREAMENTO_CORREIO," . "Sum(NOTAS_ITEM.VALOR_DESCONTO)+Sum(NOTAS_ITEM.TOTAL) AS BRUTO," . "Sum(NOTAS_ITEM.TOTAL)/Sum(NOTAS_ITEM.QUANTIDADE)AS PRECO_MEDIO," . "Sum(NOTAS_ITEM.TOTAL)+Sum(NOTAS_ITEM.VALOR_IPI)+Sum(COALESCE(NOTAS_ITEM.ICMS_SUBST_VALOR,0))AS TOTAL_NF " . "FROM NOTAS left outer join pedidos on (notas.pedido = pedidos.pedido) INNER JOIN CARTEIRA ON (NOTAS.COD_CARTEIRA = CARTEIRA.COD_CARTEIRA) " . "INNER JOIN NATUREZAS_OPERACAO ON (NOTAS.COD_NATUREZA = NATUREZAS_OPERACAO.COD_NATUREZA) AND (NOTAS.SEQ = NATUREZAS_OPERACAO.SEQ) INNER JOIN NOTAS_ITEM ON " . "(NOTAS.NOTA = NOTAS_ITEM.NOTA) INNER JOIN REPRESENTANTES ON (NOTAS.COD_REPRESENTANTE = REPRESENTANTES.CODIGO) INNER JOIN FRANQUEADOS ON " . "(NOTAS.COD_FRANQUEADO = FRANQUEADOS.CODIGO) INNER JOIN VENDEDORES ON (NOTAS.COD_VENDEDOR = VENDEDORES.CODIGO) INNER JOIN OP_TELEMARKETING ON " . "(NOTAS.COD_OP_TMK = OP_TELEMARKETING.CODIGO) INNER JOIN TRANSPORTADORAS ON (NOTAS.COD_TRANSPORTADOR = TRANSPORTADORAS.CODIGO) " . "Where NOTAS.COD_CLIENTE= :idCustomer AND (NATUREZAS_OPERACAO.TIPO=1) GROUP BY NOTAS.NOTA,NOTAS.NRO_NOTA,NOTAS.EMISSAO, REPRESENTANTES.NOME," . "VENDEDORES.NOME, OP_TELEMARKETING.NOME, FRANQUEADOS.NOME, TRANSPORTADORAS.NOME, CARTEIRA.CARTEIRA, NOTAS.OCORRENCIA, NOTAS.DATA_OCORRENCIA, " . "NOTAS.COD_TRANSPORTADOR, PEDIDOS.RASTREAMENTO_CORREIO order by NOTAS.NOTA DESC"); $consultar->bindValue(':idCustomer', $idCustomer, PDO::PARAM_INT); $consultar->execute(); $i = 0; $j = 0; $resultado = []; while ($linha = $consultar->fetch(PDO::FETCH_ASSOC)) { $consultar2 = $pdo->prepare("SELECT COALESCE(CONHECIMENTO,'')AS CONHECIMENTO,VALOR_FRETE," . "(VALOR_FRETE /" . $linha['TOTAL1'] . ")*100 AS PERCENTUAL FROM CONHECIMENTOS WHERE COD_ENTREGA=1 AND NF=" . $linha['NOTA']); $consultar2->execute(); $linha2 = $consultar2->fetch(PDO::FETCH_ASSOC); if (($linha['COD_TRANSPORTADOR']) == 131) { $consultar3 = $pdo->prepare("SELECT DESCRICAO FROM OCORRENCIAS_TRANSP_MERCURIO WHERE ID= " . $linha['OCORRENCIA']); $consultar3->execute(); $linha3 = $consultar3->fetch(PDO::FETCH_ASSOC); } else { $consultar3 = $pdo->prepare("SELECT DESCRICAO FROM OCORRENCIAS_TRANSP WHERE ID =" . $linha['OCORRENCIA']); $consultar3->execute(); $linha3 = $consultar3->fetch(PDO::FETCH_ASSOC); } $consultar4 = $pdo->prepare("SELECT FIRST 1 NOTA from NOTAS Where NRO_NOTA= " . $linha['NRO_NOTA'] . " and COD_CLIENTE= :idCustomer order by EMISSAO desc"); $consultar4->bindValue(':idCustomer', $idCustomer, PDO::PARAM_INT); $consultar4->execute(); $linha4 = $consultar4->fetch(PDO::FETCH_ASSOC); $consultar5 = $pdo->prepare("SELECT COD_PRODUTO,(DESCRICAO)AS DESC_PROD,QUANTIDADE,UNITARIO,PCT_IPI,VALOR_IPI,DESCONTO,((UNITARIO * DESCONTO)/100)AS DESC_UNITARIO,VALOR_DESCONTO,TOTAL,ID_NOTAITEM From NOTAS_ITEM " . "Where NOTA= " . $linha4['NOTA'] . ""); $consultar5->execute(); while ($linha5 = $consultar5->fetch(PDO::FETCH_ASSOC)) { $arr5[$j] = $linha5; //$resultado5 = $arr5[$j]; $j++; } $arr[] = $linha; $arr2[] = $linha2; $arr3[] = $linha3; $resultado2 = $arr[$i]; if (empty($resultado3)) { $resultado3 = array( "CONHECIMENTO" => 0, "VALOR_FRETE" => 0, "PERCENTUAL" => 0); } else { $resultado3 = $arr2[$i]; } $resultado4 = $arr3[$i]; $i ++; $res = array_merge($resultado2, $resultado3, $resultado4, $arr5); if (empty($resultado)) { array_unshift($resultado, $res); } else { array_push($resultado, $res); } $result = array("aaData" => $resultado); } echo json_encode($result);  
    • Por marcelookada
      boa tarde, estou com um problema na hora de gerar um pdf, tenho  um lista de valores, traz em while, tudo certo, mas quando ele termina a pagina ele  pula para uma nova pagina, gostaria que fosse criado um outra coluna na mesma pagina, e assim sucessivamente.
       
      sou leito em fpdf.
       
      $sql = new Query($bd); $txt = "SELECT U.CCODIUSUA, U.CNOMEUSUA, T.CENDETITU, T.CBAIRTITU, RETORNA_NOME_TIPO_LOGRADOURO(T.NENDETLOGR) NEND, T.C_CEPTITU, T.CCIDATITU, T.CESTATITU FROM HSSUSUA U, HSSTITU T WHERE U.NNUMETITU = T.NNUMETITU AND U.CTIPOUSUA <> 'F' AND U.CTIPOUSUA = 'T' AND U.CSITUUSUA = 'A' AND T.CCIDATITU = :cidade"; $sql->addParam(':cidade',$_SESSION['cidade']); $sql->executeQuery($txt); while(!$sql->eof()) { $pdf->Cell(1,4,$sql->result("CCODIUSUA"),0,1); $pdf->Cell(1,3,$sql->result("CNOMEUSUA"),0,1); $pdf->Cell($cont,4,$sql->result("NEND"),0,0); $pdf->Cell(1,4,$sql->result("CENDETITU"),0,1); $pdf->Cell(1,3,$sql->result("CBAIRTITU"),0,1); $pdf->Cell(16,4,$sql->result("C_CEPTITU"),0,0); $pdf->Cell($cont1,4,$sql->result("CCIDATITU"),0,0); $pdf->Cell(1,4,$sql->result("CESTATITU"),0,1); $pdf->Cell(1,4,'',0,1); $pdf->ln(2); $sql->next(); }  
       
      obrigado.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.