Two Card on Same Line on Mobile Screen

Question

This code is working fine on desktop view. All 4 cards are showing on same line. But I want two cards on same line on mobile screen but it is going bellow another card -

<div class="container p-3 my-3">
      <h2 class="text-center">Friendship Quiz</h2>
      <div id="quiz">
        <p class="text-center lead" id="question">What is one thing/activity that makes you relax?</p>
        <div class="row justify-content-center" >
          <div class="col-sm-2 mb-3">
            <div class="card text-center">
              <div class="text-center"><img class="card-img-top mt-3" src="https://wisunt.com/upload/IMG_5d5acf6d014cc.jpg" alt="Card image" style="width: 120px;"></div>
              <div class="card-body">
                <a href="#" id="btn0" class="card-title stretched-link text-decoration-none lead"><span id="choice0"></span></a>
              </div>
            </div>
          </div>
          <div class="col-sm-2 mb-3">
            <div class="card text-center">
              <div class="text-center"><img class="card-img-top mt-3" src="https://wisunt.com/upload/IMG_5d5ad13063a48.jpg" alt="Card image"  style="width: 120px;"></div>
              <div class="card-body">
                <a href="#" id="btn1" class="card-title stretched-link text-decoration-none lead"><span id="choice1"></span></a>
              </div>
            </div>
          </div>
          <div class="col-sm-2 mb-3">
            <div class="card text-center">
              <div class="text-center"><img class="card-img-top mt-3" src="https://wisunt.com/upload/IMG_5d5ad1857e9f8.jpg" alt="Card image"  style="width: 120px;"></div>
              <div class="card-body">
                <a href="#" id="btn2" class="card-title stretched-link text-decoration-none lead"><span id="choice2"></span></a>
              </div>
            </div>
          </div>
          <div class="col-sm-2 mb-3">
            <div class="card text-center">
              <div class="text-center"><img class="card-img-top mt-3" src="https://wisunt.com/upload/IMG_5d5acfb4ef90f.jpg" alt="Card image" style="width: 120px;"></div>
              <div class="card-body">
                <a href="#" id="btn3" class="card-title stretched-link text-decoration-none lead"><span id="choice3"></span></a>
              </div>
            </div>
          </div>
        </div>

`

score 0 · Accepted Answer · answered Mar 08 '20 at 12:35

0

You can add this bootstrap class to each card. e.g col-xs-6 It means extra-small, which is for mobile version.

 <div class="col-sm-2 col-xs-6 mb-3">
         // rest of your code
    </div>

answered Mar 08 '20 at 12:35

Murtaza JAFARI

674
7
10

1

There is no `-xs-` in Bootstrap 4.. its just `col-6` – Carol Skelly Mar 08 '20 at 12:41
Not working no effect – Cipher Mar 08 '20 at 12:45
1

if you are using bootstrap 4, then use this class for each card e.g col-6 – Murtaza JAFARI Mar 08 '20 at 12:47
1

Yes now its working – Cipher Mar 08 '20 at 12:47

Two Card on Same Line on Mobile Screen

1 Answers1