What is the best way to align content at the center on mobile using Bootstrap 5?

I'm struggling to center elements on mobile devices, even though they look fine on desktop.

Desktop: https://i.sstatic.net/I6Rtf.png

Mobile:

https://i.sstatic.net/4a1zS.png

Desired mobile:

https://i.sstatic.net/uMrEa.png

I am using Bootstrap 5.3.0 and have tried using row and col, but I can't achieve the desired alignment on both desktop and mobile.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32505d5d46414640534272071c001c01">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="d-flex flex-wrap flex-sm-nowrap mb-0">
  <div class="text-center">
    <!--begin::Image-->
    <div class="d-flex justify-content-center align-items-center flex-shrink-0 bg-light rounded w-100px h-100px w-lg-150px h-lg-150px me-7 mb-4 border border-secondary">
      <img class="mw-50px mw-lg-75px" src="https://via.placeholder.com/100" alt="image">
    </div>
    <!--end::Image-->
  </div>
  <!--begin::Wrapper-->
  <div class="flex-grow-1">
    <!--begin::Head-->
    <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
      <!--begin::Details-->
      <div class="d-flex flex-column">
        <!--begin::Status-->
        <div class="align-items-center mb-1">
          <a class="text-gray-800 text-hover-primary fs-2 fw-bold me-3" href="#">Title Subject</a>
          <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">-</span>
          <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">Location</span>
          <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">-</span>
          <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">title subject2</span>
          <span class="badge badge-info me-auto">Badge</span>
        </div>
        <!--end::Status-->
        <!--begin::Description-->
        <div class="d-flex flex-wrap fw-semibold">
          <span class="me-2 fs-5 text-white-400">Status</span>
          <span class="mb-0 fs-5 text-white-400">
                        <em>unknown yet</em>
                    </span>
        </div>
        <!--end::Description-->
        <!--begin::User id-->
        <div class="d-flex flex-wrap fw-semibold mb-0 fs-5 text-gray-400 d-none" id="legal_case_id">20</div>
        <!--end::User id-->
      </div>
      <!--end::Details-->
    </div>
    <!--end::Head-->
    <!--begin::Info-->
    <div class="d-flex flex-wrap justify-content-start">
      <!--begin::Stats-->
      <div class="d-flex flex-wrap">
        <!--begin::Stat-->
        <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
          <!--begin::Number-->
          <div class="d-flex align-items-center">
            <div class="fs-4 fw-bold">27 Jun, 2023</div>
          </div>
          <!--end::Number-->
          <!--begin::Label-->
          <div class="fw-semibold fs-6 text-gray-400">event from mob</div>
          <!--end::Label-->
        </div>
        <!--end::Stat-->
        <!--begin::Stat-->
        <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
          <!--begin::Number-->
          <div class="d-flex align-items-center">
            <div class="fs-4 fw-bold counted" data-kt-countup="true" data-kt-countup-value="0" data-kt-initialized="1">0</div>
          </div>
          <!--end::Number-->
          <!--begin::Label-->
          <div class="fw-semibold fs-6 text-gray-400">Files</div>
          <!--end::Label-->
        </div>
        <!--end::Stat-->
      </div>
      <!--end::Stats-->
    </div>
    <!--end::Info-->
  </div>
  <!--end::Wrapper-->
</div>

cssbootstrap-5

Answer №1

To ensure responsiveness, start with setting the justification to center for mobile devices by default. Later on, you can override it for larger breakpoints using classes like 

justify-content-center justify-content-md-start
.

Your horizontal list isn't quite centered as desired and would benefit from refactoring. Consider utilizing flex properties instead of relying solely on margins.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37555858434443455647770219051904">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="d-flex flex-wrap flex-sm-nowrap mb-0 justify-content-center justify-content-md-start">
  <div class="d-flex justify-content-center align-items-center flex-shrink-0 bg-light rounded w-100px h-100px w-lg-150px h-lg-150px me-7 mb-4 border border-secondary">
    <img class="mw-50px mw-lg-75px" src="https://via.placeholder.com/100" alt="image">
  </div>
</div>

<div class="flex-grow-1">
  <div class="d-flex  justify-content-center justify-content-md-start justify-content-md-between align-items-start flex-wrap mb-2">
    <div class="d-flex flex-column">
      <div class="align-items-center mb-1">
        <a class="text-gray-800 text-hover-primary fs-2 fw-bold me-3" href="#">Title Subject</a>
        <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">-</span>
        <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">Location</span>
        <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">-</span>
        <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">title subject2</span>
        <span class="badge badge-info me-auto">Badge</span>
      </div>

      <div class="d-flex flex-wrap fw-semibold justify-content-center justify-content-md-start">
        <span class="me-2 fs-5 text-white-400">Status</span>
        <span class="mb-0 fs-5 text-white-400">
            <em>unknown yet</em>
        </span>
      </div>
      <div class="d-flex flex-wrap fw-semibold mb-0 fs-5 text-gray-400 d-none" id="legal_case_id">20</div>
    </div>
  </div>

  <div class="d-flex flex-wrap justify-content-start">
    <div class="d-flex flex-wrap">
      <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
        <div class="d-flex align-items-center">
          <div class="fs-4 fw-bold">27 Jun, 2023</div>
        </div>

        <div class="fw-semibold fs-6 text-gray-400">event from mob</div>
      </div>

      <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
        <div class="d-flex align-items-center">
          <div class="fs-4 fw-bold counted" data-kt-countup="true" data-kt-countup-value="0" data-kt-initialized="1">0</div>
        </div>
        <div class="fw-semibold fs-6 text-gray-400">Files</div>
      </div>
    </div>
  </div>
</div>

Answer №2

Include the following CSS classes:

  • mx-auto to centrally align the image
  • text-sm-start text-center for centering Title Subject - Location - title subject2 on mobile
  • me-sm-auto mx-auto d-sm-inline d-table
    to center the badge on mobile devices
  • justify-content-sm-start justify-content-center
    for centering the status on mobile screens
  • Utilize Bootstrap grid system for the bottom two cards

Refer to the code snippet below.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6964647f787f796a7b4b3e25392538">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="d-flex flex-wrap flex-sm-nowrap mb-0">
  <div class="text-center mx-auto">
    <!--begin::Image-->
    <div class="d-flex justify-content-center align-items-center flex-shrink-0 bg-light rounded w-100px h-100px w-lg-150px h-lg-150px me-7 mb-4 border border-secondary">
      <img class="mw-50px mw-lg-75px" src="https://via.placeholder.com/100" alt="image">
    </div>
    <!--end::Image-->
  </div>
  <!--begin::Wrapper-->
  <div class="flex-grow-1">
    <!--begin::Head-->
    <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
      <!--begin::Details-->
      <div class="d-flex flex-column text-sm-start text-center">
        <!--begin::Status-->
        <div class="align-items-center mb-1">
          <a class="text-gray-800 text-hover-primary fs-2 fw-bold me-3" href="#">Title Subject</a>
          <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">-</span>
          <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">Location</span>
          <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">-</span>
          <span class="text-gray-800 text-hover-primary fs-2 fw-bold me-3">title subject2</span>
          <span class="badge text-bg-primary badge-info me-sm-auto mx-auto d-sm-inline d-table">Badge</span>
        </div>
        <!--end::Status-->
        <!--begin::Description-->
        <div class="d-flex flex-wrap fw-semibold justify-content-sm-start justify-content-center">
          <span class="me-2 fs-5 text-white-400">Status</span>
          <span class="mb-0 fs-5 text-white-400">
            <em>unknown yet</em>
          </span>
        </div>
        <!--end::Description-->
        <!--begin::User id-->
        <div class="d-flex flex-wrap fw-semibold mb-0 fs-5 text-gray-400 d-none" id="legal_case_id">20</div>
        <!--end::User id-->
      </div>
      <!--end::Details-->
    </div>
    <!--end::Head-->
    <!--begin::Info-->
    <div class="d-flex flex-wrap justify-content-start">
      <!--begin::Stats-->
      <div class="row d-flex flex-wrap w-100">
        <!--begin::Stat-->
        <div class="col-sm-auto col-6">
          <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
            <!--begin::Number-->
            <div class="d-flex align-items-center">
              <div class="fs-4 fw-bold">27 Jun, 2023</div>
            </div>
            <!--end::Number-->
            <!--begin::Label-->
            <div class="fw-semibold fs-6 text-gray-400">event from mob</div>
            <!--end::Label-->
          </div>
        </div>
        <!--end::Stat-->
        <!--begin::Stat-->
        <div class="col-sm-auto col-6">
          <div class="border border-gray-300 border-dashed rounded min-w-125px py-3 px-4 me-6 mb-3">
            <!--begin::Number-->
            <div class="d-flex align-items-center">
              <div class="fs-4 fw-bold counted" data-kt-countup="true" data-kt-countup-value="0" data-kt-initialized="1">0</div>
            </div>
            <!--end::Number-->
            <!--begin::Label-->
            <div class="fw-semibold fs-6 text-gray-400">Files</div>
            <!--end::Label-->
          </div>
        </div>
        <!--end::Stat-->
      </div>
      <!--end::Stats-->
    </div>
    <!--end::Info-->
  </div>
  <!--end::Wrapper-->
</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

What could be causing my HTML email to appear distorted when viewed in Gmail?

After spending the last 6 hours tackling this issue, I am still stuck. Despite my extensive googling, it seems that divs are supposed to work in emails post-2017. All the online HTML email testers I have used indicate that my email layout is perfectly fine ...

htmlcssemailgmail

Unpredictable jQuery modal form activation occurring twice

I have integrated Dropzone.js into my website for uploading images, and everything works smoothly during the upload process. However, I encounter a strange issue when attempting to delete the images. Occasionally, when clicking on the "trash" icon to delet ...

jquerybootstrap-modalbootstrap-5

Tips for implementing code to function across several images in HTML and CSS

Hey there, I'm currently working on a website project for my friend and I sometimes refer to www.w3schools.com for help with coding. I'm having trouble implementing a gallery feature where users can click on images to view them fullscreen. I foun ...

javascripthtmlcss

Implementing a hybrid design using the display flex property

Any suggestions on the most effective way to achieve the following layout using flexbox? I want 2 rows with columns of equal width, but the last column should be 100% height and fill the remaining space in the section. Should I consider using multiple row ...

htmlcssflexboxcss-grid

How to resolve the issue of a sticky header not functioning properly with a resizable column in Primeng

Currently, I am facing an issue while trying to incorporate both column resize functionality and sticky header in my table. Interestingly, the sticky header feature works perfectly fine when used alone without the column resize. However, when I attempt to ...

htmlcssangularprimengprimeng-datatable

Could there be a glitch affecting the alignment of the dropdown-menu-end in Bootstrap 5.0?

I can't seem to make dropdown-menu-end from Bootstrap 5.0 work in Angular, even though I copied the exact code from https://www.w3schools.com/bootstrap5/bootstrap_dropdowns.php. The HTML display using my code from VSC looks like this: site appearance ...

htmlbootstrap-5

What is the best way to update the content of a div on an HTML page by incorporating the content of a div from a different page using JavaScript?

I have a requirement where I need to implement a link in a Table of Contents that, upon clicking, should replace the existing content of one div on a page with the content of another div on a different page. My goal is to accomplish this using only JavaScr ...

javascripthtmlcss

Accumulation of style from various directives in AngularJS on a single element

Currently, I am working on developing a component framework and find myself in need of a method to apply styles from multiple directives to an element in a way that they can accumulate. The priority of the styles should be determined by the directive creat ...

cssangularjsangularjs-directive

Tips on updating arrow button icon when clicked using jquery

I am currently working on a project where I have a button icon that I want to change upon clicking it. I am using the following jQuery code: <script> $('div[id^="module-tab-"]').click(function(){ $(this).next('.hi').sl ...

javascriptjqueryhtmlcss

Correcting the 1 pixel spacing issue in 3 containers each with a width of 33.333%

It is difficult to articulate, but I am noticing a 1 pixel line with 3 containers each having a width of 33.3333%. Unfortunately, this is not something I can change as it is part of the material-ui framework. <div class="container"> <div clas ...

cssmaterial-ui

Turn off automatic resizing of iframes

I'm currently dealing with a webpage that contains an iframe. The iframe contains quite a bit of data, and every time it loads, its height adjusts to match the content within. Unfortunately, this is causing my page layout to be disrupted. Is there a w ...

htmlcssiframescroll

Utilize CSS to eliminate gaps between spans

I can't figure out how to remove the vertical spacing between these two spans. Any help would be greatly appreciated. The issue I'm facing is the large gap between these two spans: <span class="twentyeight nomargin threshold_green">6</ ...

htmlcssstylesheet

Tips on aligning border-radius with parent border-radius

Seeking to create a text box with a sleek line on the left side for design flair. The challenge arises when attempting to match the thickness of the line with the border radius of 10px. After various unsuccessful attempts, here is the current solution: ...

htmlcssborder-radius

Having trouble loading background color or image in three.js

I've been struggling to load a background image or color on my webpage. Despite trying various methods, including commenting out javascript files and checking the stylesheet link, nothing seems to work. Even when I load the three.js scene with javascr ...

javascriptcssthree.js

Utilize CSS to exclusively filter through items

Is it possible to use CSS alone to filter a list of items based on specific links being clicked? I have a list that should display only certain items when corresponding links are clicked. HTML: <!-- Header links --> <a href="#" class="all" tabin ...

htmlcssselectfiltertabindex

Integrate the dForm plugin with a convenient time picker widget

Currently, I am attempting to integrate a time picker widget into a jQuery plugin called dForm. The specific timepicker widget can be found at the following link: https://github.com/jonthornton/jquery-timepicker Despite reviewing the dForm documentation, ...

javascriptjqueryhtmlcssjquery-plugins

Disappearances of sliding jQuery divs

I am currently working on a website using jQuery, and I have implemented a slide in and out div to display share buttons. The issue I am facing is that the code works perfectly on the first page, but on every other page, the div slides out momentarily and ...

javascriptjqueryhtmlcss

Is there a way to condense a paragraph of text without using a span or div element?

There is a common scenario where I often encounter this issue: <span> <p>hello world</p> </span> It involves reducing the width of a paragraph to fit the text, but unfortunately it leads to clutter in my HTML. Is there a way to ...

htmlcss

Looking for advice on designing a unique Gallery layout using CSS?

Tasked with converting various layouts, some of which utilize a specific layout pattern (refer to the image below.) I'm seeking advice on the most efficient way to use CSS to display a list of images in this manner without dividing items into separate ...

htmlcss

Show equally sized elements using a grid system

I need assistance with displaying fields in a row using CSS grid. I want to display 3 fields in a row with equal width, and if there are only 2 fields, they should also have equal widths. Additionally, if there is only one field, it should take up the full ...

cssreactjsmaterial-uicss-grid