Mobile Device Centering Problem with Bootstrap Cards

Despite my thorough research efforts, I have been unable to find a solution. The code snippet below is meant to display the image provided, but it seems to shift to the left when viewed on a mobile device.

If anyone can assist me with this issue, I would greatly appreciate it. Thank you in advance!

<div class="container">
    <div class="row g-mb-20">
      <div class="col-md-6 col-lg-3 g-mb-50 justify-content-center">
        <div class="card" style="width: 18rem;">
        <img src="assets/img/calisurf1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-3 g-mb-50 justify-content-center">
        <div class="card" style="width: 18rem;">
        <img src="assets/img/calisurf1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-3 g-mb-50 justify-content-center">
        <div class="card" style="width: 18rem;">
        <img src="assets/img/calisurf1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col-md-6 col-lg-3 g-mb-50 justify-content-center">
        <div class="card" style="width: 18rem;">
        <img src="assets/img/calisurf1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    </div>
  </div>

View Desktop Version

View Mobile Version

cssuser-interfacebootstrap-4frontenduser-experience

Answer №1

To achieve the desired layout, simply include the class d-flex in the columns containers where you already have the class justify-content-center:

<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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


<div class="container">
<div class="row">

  <div class="col-md-6 col-lg-3 mb-5 d-flex justify-content-center">
    <div class="card w-100">
      <img src="https://via.placeholder.com/50" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  
  <div class="col-md-6 col-lg-3 mb-5 d-flex justify-content-center">
    <div class="card w-100">
      <img src="https://via.placeholder.com/50" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>

  <div class="col-md-6 col-lg-3 mb-5 d-flex justify-content-center">
    <div class="card w-100">
      <img src="https://via.placeholder.com/50" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  
  <div class="col-md-6 col-lg-3 mb-5 d-flex justify-content-center">
    <div class="card w-100">
      <img src="https://via.placeholder.com/50" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  
</div>
</div>

Answer №2

If you're looking for a simple solution, here's one way to accomplish it:

<div class="box col-12">
    ...
</div>

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

The div elements are constantly shifting positions when viewed in Internet Explorer

After completing my website and testing it across different browsers, I noticed an issue with IE. The contact div and navigation shift around the page in this browser specifically. Can anyone help me out with some code to fix this problem? Link to live ex ...

htmlcssinternet-explorer

Disable Button's Shadow when it is in an active state (clicked)

Check out the DEMO to see the button animation CSS in action. The CSS code for the button animations is as follows: .btnliner { /* CSS properties */ } /* More CSS properties */ .btnliner:hover { /* Hover effects */ } Here is the corresponding J ...

javascriptjqueryhtmlcss

Stop the automatic hiding of the sticky header when reaching the bottom of the page

I have implemented the position: sticky property for my website's header. However, I am facing an issue where the header becomes hidden when I scroll halfway down the page (bottom on mobile devices). Can anyone suggest a solution to fix this problem? ...

htmljquerycss

TabContainer - streamline your selection process with inline tabs

I am currently working on a GUI that includes a TabContainer with two tabs, each containing a different datagrid. I initially created the tabcontainer divs and datagrids declaratively in HTML for simplicity, but I am open to changing this approach if it wo ...

javascripthtmlcssdojo

What is causing the qtip tooltip to show up on buttons with different ids?

I have a requirement to display tooltips only for specific buttons and not for others. I am facing an issue where the tooltip intended for the TAB button is showing up when hovering over other buttons like FOO and BAR as well. Could this be due to them sha ...

javascriptjquerycssqtip2

The Slide Out Menu functioned properly in HTML, but it seems to be malfunctioning when implemented in PHP

I recently implemented a slide-in and out menu with a hamburger icon to open it and an X icon to close it. The functionality was perfect until I integrated it into PHP and WordPress. Initially, I placed the script in the header section before the meta tags ...

javascriptphphtmlcsswordpress

Tips on introducing a random pattern into a Javascript gaming experience

To kick off the game, let's generate a pattern randomly. Follow these steps: -Include a function that generates the pattern. (Hint: JavaScript's Math.random function might come in handy) -Invoke your new function from the startGame function I&a ...

javascripthtmlcss

What is the process for designing a menu with animated scaling effects?

I have a design file in PSD format that looks like this. https://i.sstatic.net/R46Ko.jpg My goal is to create a website similar to , where when a user hovers over a link, a circle will appear around it. I am using Bootstrap 4.5 for this project. Here is ...

htmlcssbootstrap-4

Guide on keeping a footer anchored at the bottom of a webpage

I have gone through numerous tutorials on how to position the footer at the bottom of my webpage, but I'm still struggling to accomplish it for my own site. Some of the resources I've consulted include: Understanding techniques to keep the fo ...

htmlcssfooter

What is the best way to create dynamic cards like the ones displayed here?

I am experiencing an issue with the black box displaying the date. I created it, but it does not adjust properly to different screen sizes. .date { width: 20%; height: 15%; background-color: black; z-index: 1; position: absolute; top: 45%; ...

htmlcssbootstrap-4

Reposition the checked box to the top of the list

My goal is to click on each item, and the selected item should move to the top of the list and be rendered at the top. However, I encountered an issue where when clicking on an item, it moves to the top but the item that replaces it also gets checked. Bel ...

javascripthtmlcss

What is the best way to show a border-left outside of the list marker in Internet Explorer 8?

I have a numbered list that I would like to add a left border to. <ol class="steps"> <li>item 1</li> <li>item 2</li> <li>item 3</li> <ol> .steps {border-left: 5px double #7ab800;} When viewing in Fir ...

htmlcssinternet-explorer-8

Discover the color value within an array that begins with the "#" symbol

In my PHP code, I have written a function that extracts values from a CSS file and creates an array. Now, I need to loop through this array and create another array that only contains color values (strings starting with #). The challenge is that the length ...

javascriptphphtmlcssarrays

The dropdown in the Material UI GridList appears excessively wide

Currently, I'm attempting to design a grid-shaped drop-down menu in Material UI. Most of the dropdowns available in the documentation are either a single column or a single row. I tried utilizing a menu component that includes a GridList, which almost ...

cssreactjsmaterial-ui

How to use jQuery to change the background color of HTML table cells based on their content value

A dynamic table will be displayed based on the dropdown element selected. Below is a snippet of the code: <table id="myPlaneTable" class="table table-bordered"> <tr> <td style="width: 20%">Max speed</td> <td ...

javascriptjqueryhtmlbootstrap-4

motion graphic border not joining at the corner

Yesterday, my code was functioning perfectly. However, after making several revisions to include all animations and styles, I notice that the animated borders no longer connect at three corners. Can someone please assist in identifying what went wrong duri ...

htmlcss

Is there a way to completely define CSS animation using only JavaScript?

I am looking to implement CSS animation on HTML elements that are generated entirely through a JavaScript function. The approach I am taking involves customizing settings and functions for each part of the animation, which is why this method is necessary. ...

javascripthtmlcss

Setting line height as a pixel value does not yield the desired result

$(element).css(options.css).attr(options.attr).addClass(options.class) //ensure line-height is correctly assigned if($(element).is('p') && _.isString(options.css['line-height'])){ console.log('line-height assigned: &apos ...

jquerycssheightlinepixel

Generating a PDF from a CSS3 multi-column layout with the help of snappy (a wrapper for wkhtmltopdf)

I am attempting to create a PDF with three columns using barryvdh/laravel-snappy and wkhtmltopdf. Since the text that will populate these columns varies in length, I need a method that allows the text to flow freely within the columns. I have attempted to ...

phpcsswkhtmltopdf

Implement a transition effect for the onClick event of a div element

I am looking to create a smoother transition effect when clicking on the section, causing it to expand and display the text underneath. I want to make this transition slower and more seamless. My current attempt at adding a transition to the "active" clas ...

javascripthtmlbootstrap-4css-transitions