CODEWITHSUNDEEP
htmlcssbootstrap-4
Scott Wilks
Scott Wilks

Reputation: 29

Centering Bootstrap Cards in Mobile View

When in mobile view, cards are not centring as expected.

I have tried using d-flex and justify-content-center as suggested in a previous answer to no avail.

I've noticed that adding mx-auto to each of the card classes sort of works and keeps them nicely centered, however, the gap between the cards is also removed using this method.

Please see my site here.

Looks fine in desktop view, but once in mobile view all the cards are pushed to the right, I can see that the cards are going over the margin-right defined in my main tag.

Here's the HTML:

    <!DOCTYPE html>
<html lang="en">
<body>
  <main>
    <!--Cards-->
    <div class="card-deck mx-auto">
      <!--Games Card-->
      <div class="card text-center text-white bg-dark mb-3 d-flex" style="width: 18rem;">
        <a href="#">
        <img src="../img/games.png" class="card-img-top" alt="Games">
        <div class="card-body">
          <p class="card-text"><strong>Games</strong></p>
        </div>
        </a>
      </div>
      <!-- Consoles Card-->
      <div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
        <a href="##">
        <img src="../img/consoles.png" href="#" class="card-img-top" alt="Consoles">
        <div class="card-body">
          <p class="card-text"><strong>Consoles</strong></p>
        </div>
      </a>
      </div>
      <!-- Getting Started Card-->
      <div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
        <a href="###">
        <img src="../img/gettingStarted.png" href="#" class="card-img-top" alt="Getting Started">
        <div class="card-body">
          <p class="card-text"><strong>Getting Started</strong></p>
        </div>
       </a>
      </div>
    </div>

  </main>
  <!--JavaScript-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

I'm using Bootstrap 4, please help!

Upvotes: 0

Views: 3156

Answers (3)

Hussain Pettiwala
Hussain Pettiwala

Reputation: 1674

A really simple way is to add margin:0 auto; to the card-deck div!

<!DOCTYPE html>
<html lang="en">
<body>
  <main>
    <!--Cards-->
    <div class="card-deck" style="margin:0 auto">
      <!--Games Card-->
      <div class="card text-center text-white bg-dark mb-3 d-flex" style="width: 18rem;">
        <a href="#">
        <img src="../img/games.png" class="card-img-top" alt="Games">
        <div class="card-body">
          <p class="card-text"><strong>Games</strong></p>
        </div>
        </a>
      </div>
      <!-- Consoles Card-->
      <div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
        <a href="##">
        <img src="../img/consoles.png" href="#" class="card-img-top" alt="Consoles">
        <div class="card-body">
          <p class="card-text"><strong>Consoles</strong></p>
        </div>
      </a>
      </div>
      <!-- Getting Started Card-->
      <div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
        <a href="###">
        <img src="../img/gettingStarted.png" href="#" class="card-img-top" alt="Getting Started">
        <div class="card-body">
          <p class="card-text"><strong>Getting Started</strong></p>
        </div>
       </a>
      </div>
    </div>

  </main>
  <!--JavaScript-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

Upvotes: 0

saraswati
saraswati

Reputation: 139

if you put the align-items-center class in card-deck parent div you can get center card.

<!DOCTYPE html>
<html lang="en">
<body>
  <main>
    <!--Cards-->
    <div class="card-deck mx-auto align-items-center">
      <!--Games Card-->
      <div class="card text-center text-white bg-dark mb-3 d-flex" style="width: 18rem;">
        <a href="#">
        <img src="../img/games.png" class="card-img-top" alt="Games">
        <div class="card-body">
          <p class="card-text"><strong>Games</strong></p>
        </div>
        </a>
      </div>
      <!-- Consoles Card-->
      <div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
        <a href="##">
        <img src="../img/consoles.png" href="#" class="card-img-top" alt="Consoles">
        <div class="card-body">
          <p class="card-text"><strong>Consoles</strong></p>
        </div>
      </a>
      </div>
      <!-- Getting Started Card-->
      <div class="card text-center text-white bg-dark mb-3" style="width: 18rem;">
        <a href="###">
        <img src="../img/gettingStarted.png" href="#" class="card-img-top" alt="Getting Started">
        <div class="card-body">
          <p class="card-text"><strong>Getting Started</strong></p>
        </div>
       </a>
      </div>
    </div>

  </main>
  <!--JavaScript-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

thank you

Upvotes: 0

Irin
Irin

Reputation: 1276

Please dont fixed the width for your card. use style="width: auto;" instead of style="width: 18rem;" this will solve your problem

<!DOCTYPE html>
<html lang="en">

<body>
  <main>
    <!--Cards-->
    <div class="card-deck mx-auto">
      <!--Games Card-->
      <div class="card text-center text-white bg-dark mb-3 d-flex" style="width: auto;">
        <a href="#">
          <img src="../img/games.png" class="card-img-top" alt="Games">
          <div class="card-body">
            <p class="card-text"><strong>Games</strong></p>
          </div>
        </a>
      </div>
      <!-- Consoles Card-->
      <div class="card text-center text-white bg-dark mb-3" style="width: auto;">
        <a href="##">
          <img src="../img/consoles.png" href="#" class="card-img-top" alt="Consoles">
          <div class="card-body">
            <p class="card-text"><strong>Consoles</strong></p>
          </div>
        </a>
      </div>
      <!-- Getting Started Card-->
      <div class="card text-center text-white bg-dark mb-3" style="width: auto;">
        <a href="###">
          <img src="../img/gettingStarted.png" href="#" class="card-img-top" alt="Getting Started">
          <div class="card-body">
            <p class="card-text"><strong>Getting Started</strong></p>
          </div>
        </a>
      </div>
    </div>

  </main>
  <!--JavaScript-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>

</html>

Upvotes: 2

Related Questions