I need some assistance, please. Can someone explain why the Bootstrap card is staying aligned to the left in mobile view

I've tried everything, but it's still not working. Can anyone help me out? Here are some photos.

BEFORE

AFTER

When I view the card on mobile, I want it to stay centered. Could there be some missing code that I'm overlooking? I would greatly appreciate it if someone could solve this for me. I'm fairly new to using bootstrap and not very knowledgeable in HTML and CSS. Here is the code snippet:

<!-- Members Card -->
<div class="container my-5">

  <h1 class="text-center mb-3"><b>MEMBERS</b></h1>

  <div class="d-flex justify-content-around">

    <div class="row">
      <!-- Jennie -->
      <div class="col-md col-sm">
        <div class="card" style="width: 15rem;">
          <img src="{image}" class="card-img-top" alt="...">
          <div class="card-body text-center">
            <h5 class="card-title"><b>{Name}</b></h5>
            <p class="card-text">{desc}</p>
            <a href="#" class="btn btn-dark btn-outline-secondary text-white">show more</a>
          </div>
        </div>
      </div>

      <!-- Jisoo -->
      <div class="col-md col-sm">
        <div class="card" style="width: 15rem;">
          <img src="{image}" class="card-img-top" alt="...">
          <div class="card-body text-center">
            <h5 class="card-title"><b>{Name}</b></h5>
            <p class="card-text">{desc}</p>
            <a href="#" class="btn btn-dark btn-outline-secondary text-white">show more</a>
          </div>
        </div>
      </div>

      <!-- Lisa -->
      <div class="col-md col-sm">
        <div class="card" style="width: 15rem;">
          <img src="{image}" class="card-img-top" alt="...">
          <div class="card-body text-center">
            <h5 class="card-title"><b>{Name}</b></h5>
            <p class="card-text">{desc}</p>
            <a href="#" class="btn btn-dark btn-outline-secondary text-white">show more</a>
          </div>
        </div>
      </div>

      <!-- Rose -->
      <div class="col-md col-sm">
        <div class="card" style="width: 15rem;">
          <img src="{image}" class="card-img-top" alt="...">
          <div class="card-body text-center">
            <h5 class="card-title"><b>{Name}</b></h5>
            <p class="card-text">{desc}</p>
            <a href="#" class="btn btn-dark btn-outline-secondary text-white">show more</a>
          </div>
        </div>
      </div>

    </div> <!--close tag for row-->

  </div> <!--close tag for d-flex -->
</div> <!--close tag for container-->
<!-- End Members Card -->
htmlcsswebframeworksbootstrap-5

Answer №1

Enhance your layout by adding the class names d-flex justify-content-center next to each instance of col-md col-sm

(e.g.) 

col-md col-sm d-flex justify-content-center

For instance: https://i.stack.imgur.com/atDFl.png

Answer №2

For optimal centering on mobile devices, include 

margin-left: auto; margin-right: auto;
within the media query targeting the .card element.

Answer №3

If you're working with bootstrap, make sure to include the mx-auto class in every div class="card", and that should do the trick.

Source: bootstrap docs

Grab this updated code for your use:

<h1 class="text-center mb-3"><b>MEMBERS</b></h1>

<div class="d-flex justify-content-around">

  <div class="row">
    <!-- Jennie -->
    <div class="col-md col-sm">
      <div class="card mx-auto" style="width: 15rem;">
        <img src="{image}" class="card-img-top" alt="...">
        <div class="card-body text-center">
          <h5 class="card-title"><b>{Name}</b></h5>
          <p class="card-text">{desc}</p>
          <a href="#" class="btn btn-dark btn-outline-secondary text-white">show more</a>
        </div>
      </div>
    </div>

    <!-- Jisoo -->
    <div class="col-md col-sm">
      <div class="card mx-auto" style="width: 15rem;">
        <img src="{image}" class="card-img-top" alt="...">
        <div class="card-body text-center">
          <h5 class="card-title"><b>{Name}</b></h5>
          <p class="card-text">{desc}</p>
          <a href="#" class="btn btn-dark btn-outline-secondary text-white">show more</a>
        </div>
      </div>
    </div>

    <!-- Lisa -->
    <div class="col-md col-sm">
      <div class="card mx-auto" style="width: 15rem;">
        <img src="{image}" class="card-img-top" alt="...">
        <div class="card-body text-center">
          <h5 class="card-title"><b>{Name}</b></h5>
          <p class="card-text">{desc}</p>
          <a href="#" class="btn btn-dark btn-outline-secondary text-white">show more</a>
        </div>
      </div>
    </div>

    <!-- Rose -->
    <div class="col-md col-sm">
      <div class="card mx-auto" style="width: 15rem;">
        <img src="{image}" class="card-img-top" alt="...">
        <div class="card-body text-center">
          <h5 class="card-title"><b>{Name}</b></h5>
          <p class="card-text">{desc}</p>
          <a href="#" class="btn btn-dark btn-outline-secondary text-white">show more</a>
        </div>
      </div>
    </div>

  </div> <!--close tag for row-->

</div> <!--close tag for d-flex -->

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

Adjust the CSS of a nested div within the currently selected div upon page load

I am facing an issue with a page that users access by clicking through an ebook. Upon clicking a link, they are directed to a specific product on the page, and the URLs look like example.com/#product1 example.com/#product6 example.com/#product15, etc... ...

javascriptjqueryhtmlcss

Tips for finding information within a table using HTML

My task involves creating a table with the option for users to search data within it. However, I have encountered an issue where I am only able to search for data in the first row of the table. <table style="width:100%" id="table"> <tr> ...

javascripthtml

Popovers in Bootstrap 4 do not have clickable Custom Forms

I find it strange that in Bootstrap 4, only custom forms are not clickable in the Bootstrap popover. It's interesting how default forms in Bootstrap 4 work just fine. Any suggestions on how to resolve this issue? Below is my code. Thank you for you ...

javascripthtmlbootstrap-4frontend

My mobile is the only device experiencing responsiveness issues

One challenge I'm facing is with the responsiveness of my React application, specifically on my Galaxy J7 Pro phone which has a resolution of 510 pixels wide. Interestingly, the app works perfectly on a browser at this width, as well as on my tablet ...

cssreactjsresponsive-design

Why does Material-UI TableCell-root include a padding-right of 40px?

I'm intrigued by the reasoning behind this. I'm considering overriding it, but I want to ensure that I'm not undoing someone's hard work. .MuiTableCell-root { display: table-cell; padding: 14px 40px 14px 16px; font-size: 0. ...

javascriptcssreactjsmaterial-designmaterial-ui

Achieving the extraction of a particular string from an HTML element using JavaScript

<input id="WD01B3" ct="CB" lsdata="{2:'WD01B4',4:'Any',20:'\x7b\x22WDA_TYPE\x22\x3a\x22DROPDOWN_BY_KEY\x22,\x22WDA_ID\x22\x3a\x22ABCA950297D2C0C432BAB9BB ...

javascripthtmldom

Guide to switching a button using JavaScript

I am trying to create a button that will toggle the font size between 16px and 14px when clicked. The button text should also change from "Increase Font" to "Decrease Font" accordingly. UPDATE: I managed to get it working, but it only toggles twice and th ...

javascripthtmlcss

Button Fails to Respond on Second Click

I have a button that triggers a JavaScript function. This function, in turn, initiates two sequential AJAX calls. Upon completion of the first call, it performs some additional tasks before proceeding to the second AJAX call. The button functions correctl ...

javascriptjqueryhtmlajax

Steps for setting up a barcode scanner on a smartphone (both iPhone and Android) using zxing in an html app

After reviewing different answers to my questions, I decided to try out some solutions below. The app and camera function properly on Android devices, but not on iPhones. What steps should I take? <!DOCTYPE html> <HTML> <HEAD> <script ...

htmlzxing

Step-by-step tutorial on designing an input slider to dynamically adjust the CSS :before linear-gradient values

Is there a way to achieve a gradient effect using pseudo-element :before on an image that can be customized by adjusting a slider input? I've been trying to implement this feature with the following code, but have not been successful so far. var ...

javascripthtmljquerycss

Having trouble getting Javascript Jquery to function properly?

There is a button that, when clicked, changes the HTML in the body tag to include a new button. However, when this new button is clicked, it should trigger an alert message but it is not working as expected. I suspect that the issue lies with the document ...

javascriptjqueryhtml

Scraping a p tag lacking a class attribute with the help of BeautifulSoup4 (Bs4)

I am attempting to scrape this information from a website: enter image description here Within the HTML, there is a div tag with a class. Inside that div tag, there is another div tag and then a lone p tag without a class. My objective is specifically to ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Tips for showing placeholder text on Safari

I'm having an issue with the placeholder attribute in Safari. It seems to be working fine in all other browsers, but not in Safari. <textarea class="concerncommentArea" placeholder="Place your comment here"></textarea> Does anyone know h ...

javajqueryhtmlsafari

How to Use JavaScript Function to Rotate an Entire Webpage

For my final project in a web design class, we were tasked with creating a website that showcases our skills. I've completed the assignment and now I want to add some interesting features to make it stand out. I'm interested in using -webkit-tra ...

javascripthtmlcssrotation

What is the best way to vertically align the second row in a carousel using Tailwind CSS?

Currently, I am working on developing an up-and-down carousel with Tailwind CSS. However, I am encountering a challenge in aligning the elements in the second row of my grid. My main objective is to have these elements centered vertically within the grid. ...

cssreactjstailwind-css

The Vue.js modal is unable to resize below the width of its containing element

My challenge is to implement the Vue.js modal example in a larger size. I adjusted the "modal-container" class to be 500px wide, with 30px padding and a max-width of 80%. However, I'm facing an issue where the "modal-mask" class, containing the contai ...

javascriptcssvue.js

Lately, I've been working on a practice website I'm developing, and I'm facing some issues with my hyperlinks

Get the omisphere download I created this hyperlink because my previous attempts didn't work, but unfortunately, this one still isn't functioning properly. Is it possible that the issue is with my CSS? ...

htmlcss

The Bootstrap modal-backdrop dilemma requiring JavaScript intervention

I am encountering some problems with the Bootstrap modal. When I try to open a modal, everything looks good, but when I close it, the screen turns completely black. Upon closer inspection, I found that every time I click on the X to close the modal, there ...

javascriptphphtmlbootstrap-modal

Using double quotes when adding HTML5 local storage entries

Currently, I am setting the value of a field to a variable like this: newUser = document.getElementById('userName').value; Then putting that variable into local storage: localStorage.setItem('userName', JSON.stringify(newUser)); Fet ...

jsonhtmllocal-storage

What steps should be taken to generate a successful pop-up window post registration in PHP?

beginning section continuation What is the best way to design an effective popup window? ...

javascriptphphtmlnode.jsajax