Ensuring Proper Alignment in Bootstrap

Question

Having some difficulties displaying JSON data in a grid layout with React. Facing the following challenges:

Uneven spacing due to less margin on the left side. Attempts to align horizontally have not been successful. How can this be fixed?
On mobile devices like the iPhone X, products are aligned to the left. Is setting margin-left a viable solution for mobile view alignment?
Increment and decrement buttons are not horizontally aligned. Would setting a min-height to the "P" element below solve this?
How can the GitHub page be accessed via a link? Here is the GitHub link: https://github.com/rahman23/shoppingdemo.github.io
Seeking advice or suggestions for improvements

For the full code, please refer to the snippets below:


        (React component code)

And the CSS code:


        (CSS stylesheet code)

Answer 1

Answer №1

Here are some helpful bootstrap classes you can utilize:

.mx-auto //Center-align items
.mr-auto //Align items to the right
.ml-auto //Align items to the left

You can apply them in this manner:

<div class="row">
  <div class="mr-auto">
    <!-- Content -->
  </div>
</div>

Remember to always include the row class first before using these classes.

Answer 2

Here are some helpful bootstrap classes you can utilize:

.mx-auto //Center-align items
.mr-auto //Align items to the right
.ml-auto //Align items to the left

You can apply them in this manner:

<div class="row">
  <div class="mr-auto">
    <!-- Content -->
  </div>
</div>

Remember to always include the row class first before using these classes.