Невозможно разложить элементы в Bootstrap по краям

Question

Я пытаюсь разложить элементы по краям экрана. Я попытался использовать следующий код, но он не работает.

<!-- Page Footer -->
<footer>
<div class="navbar mt-3 py-3 bg-dark">
  <div class="container">
    <small class="text-white">
    <div class="d-flex justify-content-between">
      <span class="text-white">Copyright &copy; my website 2020</span>
      <a class="text-white" href="{% url 'privacy-policy' %}">Privacy Policy</a>
    </div>
    </small>
  </div>
</div>
</footer> 

Вот как он выглядит:

Я хотел бы получить текст об авторских правах и политику конфиденциальности разбросаны по краям экрана

Answer 1

<small> является встроенным элементом, поэтому он не охватывает ширину 100% ... попробуйте вместо этого использовать элемент уровня блока, например <div>. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small

Вы также должны убедиться, что ширина элемента установлена ​​на 100%.

<!-- Page Footer -->
<footer>
<div class="navbar mt-3 py-3 bg-dark">
  <div class="container">
    <div style="width:100%;" class="text-white">
    <div class="d-flex justify-content-between">
      <span class="text-white">Copyright &copy; my website 2020</span>
      <a class="text-white" href="{% url 'privacy-policy' %}">Privacy Policy</a>
    </div>
    </div>
  </div>
</div>
</footer>