Как в мобильной версии отцентровать элементы футера?

Question

[YuriyCherniy]

Сейчас в десктопной версии футер выглядит так:

в мобильной так:

Как в мобильной версии заставить строку с телефоном и с социальными иконками отображаться по центру?
Текущая реализация выглядит так:

<footer class="footer mt-2">
    <div class="container my-2">
      <div class="d-sm-flex justify-content-between">
        <div class="footer-left">
          <div class="row">
            <img src="{% static 'phone.svg' %}" class="mx-2 mb-2 my-lg-0">
            <h4 class="my-auto">{{ social_links.phone_number }}</h4>
          </div>
        </div>
        <div class="footer-right">
          {% if social_links.market %}
          <a href="{{ social_links.market }}"><img src="{% static 'cart.svg' %}" class="mr-3"></a>
          {% endif %}

          {% if social_links.instagram %}
          <a href="{{ social_links.instagram }}"><img src="{% static 'instagram1.svg' %}" class="mr-3"></a>
          {% endif %}

          {% if social_links.vk %}
          <a href="{{ social_links.vk }}"><img src="{% static 'vk.svg' %}" class="mr-3"></a>
          {% endif %}
        </div>
      </div>
    </div>
  </footer>

Использую Bootstrap 4.

Answer 1

[Игорь]

Используйте класс justify-content-center для выравнивая контента по центру.
Так же не забывайте что justify-content можно использовать с sm | md | lg | xl.

То есть что бы сделать justify-content-center только для экранов <576px, и оставить justify-content-between для остальных нужно сделать так:

<div class="d-flex justify-content-center justify-content-sm-center">

Comments

[YuriyCherniy]

Отцентровалась десктопная версия, мобильная не изменилась.

[Игорь]

YuriyCherniy, Я обновил ответ. Дополнил

[YuriyCherniy]

По разному пробую, не выходит, к сожалению. Верстать совсем не умею =(

[Игорь]

YuriyCherniy, Это не сложно совсем. Вы попробовали как я предложил заменить?

<footer class="footer mt-2">
    <div class="container my-2">
      <div class="d-flex justify-content-center justify-content-sm-center">
        <div class="footer-left">
          <div class="row">
            <img src="{% static 'phone.svg' %}" class="mx-2 mb-2 my-lg-0">
            <h4 class="my-auto">{{ social_links.phone_number }}</h4>
          </div>
        </div>
        <div class="footer-right">
          {% if social_links.market %}
          <a href="{{ social_links.market }}"><img src="{% static 'cart.svg' %}" class="mr-3"></a>
          {% endif %}

          {% if social_links.instagram %}
          <a href="{{ social_links.instagram }}"><img src="{% static 'instagram1.svg' %}" class="mr-3"></a>
          {% endif %}

          {% if social_links.vk %}
          <a href="{{ social_links.vk }}"><img src="{% static 'vk.svg' %}" class="mr-3"></a>
          {% endif %}
        </div>
      </div>
    </div>
  </footer>

[YuriyCherniy]

Игорь, да. Вот результат: