Side by side div with bootstrap

Asked

Viewed 50 times

0

I am new programming with HTML and the like, I have a beam in the realization of a code, I can not put the div of the code below aligned side by side.

The code:

  <div class="card border-success mb-3" style="max-width: 18rem;">
    <div class="card-header">Transtorno de ansiedade</div>
    <div class="card-body text-success">
      <h5 class="card-title">Disturbio de saúde mental caracterizado por sentimentos de preocupação,ansiedade ou medo que são fortes o bastante para interferir nas atividades diárias.</h5>
      <p class="card-text">• Ansiedade</p>
      <p class="card-text">• Preocupação excessiva</p>
      <p class="card-text">• Pensamento intrusivo</p>
    </div><!--

    --><div class="card border-success mb-3" style="max-width: 18rem;" float="">
        <div class="card-header">Transtorno de ansiedade generalizada</div>
        <div class="card-body text-success">
          <h5 class="card-title">Ansiedade intensa e permanente que interfere nas atividades diárias.</h5>
          <p class="card-text">• Ansiedade severa</p>
          <p class="card-text">• Preocupação excessiva</p>
          <p class="card-text">• Sofrimento emocional</p>
        </div><!--

        --><div class="card border-success mb-3" style="max-width: 18rem;">
            <div class="card-header">Fobia social</div>
            <div class="card-body text-success">
              <h5 class="card-title">Doença mental crônica em que as interações socais causam uma ansiedade irracional.</h5>
              <p class="card-text">• Ansiedade </p>
              <p class="card-text">• Palpitação</p>
              <p class="card-text">• Medo</p>
            </div>
        </div>

            <div class="card border-success mb-3" style="max-width: 18rem;">
                <div class="card-header">Transtorno de ansiedade de separação</div>
                <div class="card-body text-success">
                  <h5 class="card-title">Disturbio em que uma criança fica excessivamente ansiosa quanda separada dos pais.</h5>
                  <p class="card-text">• Ansiedade </p>
                  <p class="card-text">• Choro</p>
                  <p class="card-text">• Apreensão</p>
                </div>

                <div class="card border-success mb-3" style="max-width: 18rem;">
                    <div class="card-header">Transtorno obsessivo-compulsivo</div>
                    <div class="card-body text-success">
                      <h5 class="card-title">Pensamento excessivos(obsessões) que levam a comportamento repetitivos(compulsões).</h5>
                      <p class="card-text">• Ansiedade </p>
                      <p class="card-text">• Comportamento compulsivo</p>
                      <p class="card-text">• Medo</p>
                    </div>
               
  • Grid Documentation: https://getbootstrap.com/docs/4.0/layout/grid/ and layout documentation with Cards https://getbootstrap.com/docs/4.0/components/card/#card-layout

  • 1

    I tried it here and it helped a lot, thank you very much! @hugocsl

  • You’re welcome Paola, stay firm in your studies, abs

No answers

Browser other questions tagged

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