How can I align the second card to the right?

Asked

Viewed 638 times

0

I want to align the second card (I’m using Bootstrap) on the right, how can I do this?

inserir a descrição da imagem aqui

                <div class="col-lg-6">
                     <div class="card card-certificado" style="width: 18rem;">
                         <img class="card-img-top" src="imagens/certificadoa1.png" alt="Imagem de capa do card">
                         <div class="card-body">
                             <h5 class="card-title text-center">Certificado A1</h5>
                             <p class="card-text text-center">
                                 O Certificado A1 (e-CNPJ A1) é gerado em software, que fica instalado em um computador da empresa e, geralmente, tem menor custo ao portador.
                                 Porém, sua validade é sempre de 1 ano. Ao final do prazo, é preciso renovar novamente e pagar os valores referentes.
                             </p>
                         </div>
                     </div>
                 </div>
                 <div class="col-lg-6">
                     <div class="card card-certificado" style="width: 18rem;">
                         <img class="card-img-top" src="imagens/certificadoa1.png" alt="Imagem de capa do card">
                         <div class="card-body">
                             <h5 class="card-title text-center">Certificado A1</h5>
                             <p class="card-text text-center">
                                 O Certificado A1 (e-CNPJ A1) é gerado em software, que fica instalado em um computador da empresa e, geralmente, tem menor custo ao portador.
                                 Porém, sua validade é sempre de 1 ano. Ao final do prazo, é preciso renovar novamente e pagar os valores referentes.
                             </p>
                         </div>
                     </div>
                 </div>
html css twitter-bootstrap

2 answers

0

Try so with the property Float of CSS that works in the Bootstrap

        <div class="col-lg-6">
             <div class="card card-certificado float-left" style="width: 18rem;">
                 <img class="card-img-top" src="imagens/certificadoa1.png" alt="Imagem de capa do card">
                 <div class="card-body">
                     <h5 class="card-title text-center">Certificado A1</h5>
                     <p class="card-text text-center">
                         O Certificado A1 (e-CNPJ A1) é gerado em software, que fica instalado em um computador da empresa e, geralmente, tem menor custo ao portador.
                         Porém, sua validade é sempre de 1 ano. Ao final do prazo, é preciso renovar novamente e pagar os valores referentes.
                     </p>
                 </div>
             </div>
         </div>
         <div class="col-lg-6">
             <div class="card card-certificado float-right" style="width: 18rem;">
                 <img class="card-img-top" src="imagens/certificadoa1.png" alt="Imagem de capa do card">
                 <div class="card-body">
                     <h5 class="card-title text-center">Certificado A1</h5>
                     <p class="card-text text-center">
                         O Certificado A1 (e-CNPJ A1) é gerado em software, que fica instalado em um computador da empresa e, geralmente, tem menor custo ao portador.
                         Porém, sua validade é sempre de 1 ano. Ao final do prazo, é preciso renovar novamente e pagar os valores referentes.
                     </p>
                 </div>
             </div>
         </div>

  • Float for sure was the only thing I didn’t think of, kkkkk. I’m not close to it. Anyway, it worked, thanks there for solving this simple doubt kkkkk.

0

You can use the class card ml-auto, that will make the card necklace on the right of col, because it will give a margin to the left of the size of the "empty space", do not need to use float, which I do not refer to in this case...

You can read here in the official documentation how to make automatic margins in Bootstrap https://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins

You have to run all over page to get a better result, and tb have to think how you want to treat this on small screens...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>
  
</style>
</head>
<body>
  
<div class="container">
  <div class="row">
        <div class="col-lg-6">
            <div class="card card-certificado" style="width: 18rem;">
                <img class="card-img-top" src="imagens/certificadoa1.png" alt="Imagem de capa do card">
                <div class="card-body">
                    <h5 class="card-title text-center">Certificado A1</h5>
                    <p class="card-text text-center">
                        O Certificado A1 (e-CNPJ A1) é gerado em software, que fica instalado em um computador da empresa e, geralmente, tem menor custo ao portador.
                        Porém, sua validade é sempre de 1 ano. Ao final do prazo, é preciso renovar novamente e pagar os valores referentes.
                    </p>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card card-certificado ml-auto" style="width: 18rem;">
                <img class="card-img-top" src="imagens/certificadoa1.png" alt="Imagem de capa do card">
                <div class="card-body">
                    <h5 class="card-title text-center">Certificado A1</h5>
                    <p class="card-text text-center">
                        O Certificado A1 (e-CNPJ A1) é gerado em software, que fica instalado em um computador da empresa e, geralmente, tem menor custo ao portador.
                        Porém, sua validade é sempre de 1 ano. Ao final do prazo, é preciso renovar novamente e pagar os valores referentes.
                    </p>
                </div>
            </div>
        </div>
  </div>
</div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>

  • i tried to use ml-auto, and there occurred line break.

  • @Felipemoreira line breaking and because of Bootstrap’s Grid Cols and not because of margin or alignment

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.