Solution 1 :

Here is my solution, use media queries to detect width less than 500px or any size according to your design.

CSS written inside @media(max-width:500px) {} will work only on devices with width less than 500px

Note that it is important to write the following CSS in given order. If the order is reversed, the last CSS will override the CSS written inside media queries

.mobile-center-desktop-left {
  text-align: left;

@media(max-width:500px) {
  .mobile-center-desktop-left {
    text-align: center;
<div class="mobile-center-desktop-left">

Problem :

How can I have an element left aligned on the desktop and centered on mobile?
left aligned


Comment posted by Ishu

can you please be specific or share the snippets? I believe adding few CSS, you can make it happen.

Comment posted by waqas Mumtaz

kindly add your code.

Comment posted by…

This is a good way of doing it, I just wanted to add a link to the media queries that bootstrap uses in case you need more sizes: