Aligning Bootstrap Cards in Mobile View

When viewing on mobile, the cards aren't centering properly.

I've attempted to use d-flex and justify-content-center as recommended in a previous response without success.

I've observed that by adding mx-auto to each card class it somewhat centers them nicely but also eliminates the spacing between the cards.

You can visit my website here.

Everything looks good in desktop view, but once switched to mobile view, all the cards shift to the right. It seems that the cards are extending beyond the margin-right defined in my main tag.

Here is the HTML code:

    <!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 am using Bootstrap 4, any assistance would be greatly appreciated!

htmlcssbootstrap-4

Answer №1

It is recommended not to set a fixed width for your card. Instead, use style="width: auto;" rather than style="width: 18rem;". This will help resolve the issue you are facing.

<!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>

Answer №2

To achieve a center card, simply add the align-items-center class to the parent div of the card-deck.

<!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>

Your welcome!

Answer №3

A quick and easy solution is to simply include margin:0 auto; in the card-deck div styling!

<!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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Innovative Tools for Interactive Sites and Dynamic Animations

I'm interested in developing interactive websites soon and I'm curious about the various technologies I can use to create an engaging web page. I know that HTML5 now supports drawing on a Canvas, even in 3D. Can you recommend any helpful tutoria ...

htmlhtml5-canvaswebglinteractive

The canvas could not be loaded properly in THREE.Texture()

I'm having trouble with adding an image onto the side of a cube that I'm creating. The image loads onto the canvas, but I'm struggling to incorporate it into the texture. function createPictureCanvas(text, font, foreground, background, xres ...

javascripthtml

The focus on the input text in AngularJS functions properly on desktop devices but not on iPads

I am facing an issue with the search input box in my application. Even though the search input opens when I click a button, it is not autofocusing. Here is the snippet of my code: $scope.goSearch = function () { $scope.$broadcast("focusTextInput"); } ...

javascripthtmlangularjs

Instructions for creating a zoomIn effect for a pair of images within a single div using HTML

I'm working on an index page that incorporates animation, and I am looking to create a single div with two images positioned on the left and right sides. I want to apply a zoomIn animation to both images using CSS. Any assistance from someone experien ...

htmlcssimageanimationzooming

Exploding particles on the HTML5 canvas

I've been working on a particle explosion effect, and while it's functional, I'm encountering some issues with rendering frames. When I trigger multiple explosions rapidly by clicking repeatedly, the animation starts to lag or stutter. Could ...

javascripthtmlcanvas

Converting HTML table text to JSON data using vanilla JavaScript (without any external libraries like Selenium)

As a newcomer to programming and Javascript, my goal is to use Selenium Webdriver in Visual Code to extract HTML table content from a webpage and convert it into JSON data. I've managed to retrieve the table data, but I'm struggling with the conv ...

javascripthtmljsonselenium

A Guide to Connecting a JavaScript File to an HTML Page with Express and Node.js

Struggling with integrating my JavaScript file into my simple NodeJS app. Traditional methods like placing the script in the header doesn't seem to work with Node. I've attempted using sendFile and other approaches, but none have been successful ...

javascripthtmlnode.js

Is JavaScript necessary for this task in PHP?

Hi everyone, I recently discovered a way to style a PHP echo in a more visually appealing manner. Instead of presenting an unattractive colored box right away, I was wondering if there is a way to only display the box when the user selects the calculation ...

javascriptphpjqueryhtmlcss

The `required` attribute is ineffective when used with the `<form>` element

My required attribute isn't enforcing mandatory field completion before form submission. HTML Code: <!-- Modal Content --> <form class="modal-content2"> <div class="container3"> < ...

javascripthtmlcssajaxrequired

Dimensions of Bootstrap carousel

I am attempting to create a Bootstrap carousel with full-width images (width: 100%) and a fixed height. However, when I set the width to 100%, the height automatically takes on the same value. I am unsure if the issue lies within my files. <div id="m ...

javascriptjqueryhtmlcsstwitter-bootstrap

The arrangement of bootstrap elements varies based on whether they are displayed in one or two columns

I'm facing a challenge with my webpage layout that displays two columns of cards. When the screen width is smaller than md size, I want the most important items to be positioned higher on the page. To achieve this, I have arranged the items alphabetic ...

htmlcssbootstrap-4

How can we integrate this icon/font plugin in CSS/JavaScript?

Check out the live demonstration on Jsfiddle http://jsfiddle.net/hc046u9u/ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materializ ...

javascriptjqueryhtmlcssfonts

What is the best way to adjust the width of a navbar using JavaScript?

I am experimenting with a responsive design and facing an issue - the width of my #menu in CSS is initially set to 0, but I need to change this value based on user input using JavaScript. Now, I want to dynamically adjust the width of the menu for differe ...

javascripthtmlcss

Implementing Decimal Input in Bootstrap-Vue for Google Chrome on Android

Issue is isolated to Google Chrome for Android (version 90.0.4430.210) and not present in other browsers. We have an input field that only allows numeric characters, structured like this: https://i.sstatic.net/zi4qn.png <b-form-input v-model="m ...

javascripthtmlvue.jsbootstrap-vuehtml-input

Efficient Django Template: Accurate Conversion of Values through Dictionary Searching

I have an object with an attribute that has specific choices defined in its class: class StashURLJobRequest(models.Model): STATUS_CHOICES = ((0,"Requested"),(1,"Done"),(2,"Failed")) url = models.URLField() created = models.DateTimeField(auto_n ...

pythoncssdjango

Pedaling back and forth along a sequence

Is there a way to implement forward and backward buttons for a clickable list without using arrays, as the list will be expanding over time? I have already achieved changing color of the listed items to red, but need a solution to navigate through the list ...

javascriptjqueryhtmlcss

Selecting Specific File in Directory Using HTML File Input

Can you customize an HTML file input to choose a particular file from a directory or drive? By clicking on the file input button, the user opens the file selector and selects a folder or external drive. With jQuery, it is then possible to specify a specif ...

phpjqueryhtmlfileupload

Reduce the size of the header in the Sydney theme for WordPress as you scroll

Currently, I am attempting to reduce the size of the header once scrolling down. My focus is on refining the child theme. Displayed below is a screenshot illustrating the appearance of the header at the top of the page: https://i.stack.imgur.com/wojGf.pn ...

javascriptjquerycsswordpress-theming

Inner box shadow obscured by a sibling div

I am facing an issue with a div that has an inner box shadow being covered by another div. I have tried using position: relative, but it did not solve the problem. Here is an example: CODE EXAMPLE .example-div{ background:#fff; color:#000; ma ...

htmlbox-shadow

What is the best way to display noscript content within my Angular application?

What is the best way to show HTML content for users who do not have JavaScript enabled in my Angular application? Inserting the noscript tag directly into the index.html file does not seem to be effective. <body> <noscript>Test</noscrip ...

htmlangularnoscript