bootstrap тема выравнивает текстовые точки в центре страницы

Question

Я работаю с bootstrap креативной темой и пытаюсь составить список точек, используя md- bootstrap check fa icon.

В настоящее время это выглядит так:

Я хочу сохранить текст в центре страницы , но выровнять начало предложений по левому краю, чтобы оба предложения начинаются с той же вертикальной позиции , и значки fa-check также будут выровнены.

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

Код, который я написал, используя классы креативных тем:

<div class="text-center">
    <p class="text-muted mb-1 text-center"><i class="fas fa-check text-right"></i> this sentence is longer than the 2nd sentence.</p>
    <p class="text-muted mb-5 text-center"><i class="fas fa-check text-right"></i> this sentence is shorter.</p>
</div>

Answer 1

попробуйте выровнять с flexbox:

<div class="d-flex justify-content-center">
  <div class="wrapper">
    <p class="text-muted mb-1 text-center d-flex"><i class="fas fa-check text-right"></i> this sentence is longer than the 2nd sentence.</p>
    <p class="text-muted mb-5 text-center d-flex"><i class="fas fa-check text-right"></i> this sentence is shorter.</p>
  </div>
</div>