CODEWITHSUNDEEP
htmltwitter-bootstrap
tess
tess

Reputation: 29

Aligning <div> inside card in bootstrap 5

I seem to be having an issue aligning the <div>'s on one of my websites, an example: https://www.quiz-griz.com/22-do-you-know-your-tom-hanks-movies/

The top ad is fine, the one on the left if fine too, I wanted to move this part - TEXT - to beside the left ad, to form a square like:

    AD
AD TEXT AD
    AD

To form a square.

My markup:

    <h2 class="mt-4 text-center"><strong><span class="text-success">Quiz:</span></strong> <?= getQuizName($quizId); ?></h2>
        
    <div class="card text-center">
        <div class="card-header"><strong><?= getQuizDescription($quizId); ?></strong></div>
            <div class="card-body">
            
              <div class="col-12 text-center"><?= html_entity_decode(getValue("quiz_ad_1_top")); ?></div>
              <div class="col-3 text-center"><?= html_entity_decode(getValue("quiz_ad_2_left")); ?></div>
              
              <div class="col-12 text-center">- TEXT -</div>
              
              <div class="col-3 text-center"><?= html_entity_decode(getValue("quiz_ad_4_right")); ?></div>
              <div class="col-12 text-center"><?= html_entity_decode(getValue("quiz_ad_3_bottom")); ?></div>
              
            </div>
        </div>  
    </div>

It seems like the code above should work, but it's mis-aligned, I did have it working before, but I have copied / pasted the code so many times I'm going round in circles.

Upvotes: 0

Views: 233

Answers (2)

Arun Uniyal
Arun Uniyal

Reputation: 127

If you want the result like this, then you have to change the size for your middle content to col-6 [Crrently its 12]. And you have to wrap then with a row, So the structure will be:

<Row><col-1>Ad</Row>
<Row>
<col-3>Ad
<col-6>Main Content
<col-3>Ad
</Row>
<Row>col-12>Ad

enter image description here

Upvotes: 0

shariful islam
shariful islam

Reputation: 11

The column should be wrapped by "row". See the following code.

<div class="card text-center">
    <div class="card-header"><strong><?= getQuizDescription($quizId); ?></strong></div>
        <div class="card-body">
        <div class=row>
          <div class="col-12 text-center"><?= html_entity_decode(getValue("quiz_ad_1_top")); ?>ad</div>
          <div class="col-3 text-center"><?= html_entity_decode(getValue("quiz_ad_2_left")); ?>ad</div>
          <div class="col-6 text-center">- TEXT -</div>              
          <div class="col-3 text-center"><?= html_entity_decode(getValue("quiz_ad_4_right")); ?>ad</div>
          <div class="col-12 text-center"><?= html_entity_decode(getValue("quiz_ad_3_bottom")); ?>ad</div>
          </div>
        </div>
    </div>  
</div>

Upvotes: 1

Related Questions