Align multiline

February 24, 2023

I use bootstrap 5

<div class="col-lg-3 col-md-6">
    <h5 class="text-light mb-4">Stay in contact</h5>
    <p><i class="fa fa-map-marker-alt me-3"></i>619 Otaroad-north-Sidrac, New York, New York 291290 </p>
    <p><i class="fa fa-phone-alt me-3"></i><a href="tel:213-622-1212">213-622-1212</a></p>
    <p><i class="fa fa-envelope me-3"></i><a href="mailto:bob@bob.usa">bob@bob.usa</a></p>
</div>

How to align text on multiline?

Is there a way to align New York with 619?

I tried to replace p tag with span and add style: word-wrap: break-word;

with no succes

>Solution :

It is possible: simply apply display: flex; to the first p element, which will treat the icon and the subsequent text as two flex items. (You might want to assign a class to the p element to be able to address it more independently):

p:first-of-type {
  display: flex;
}

<div class="col-lg-3 col-md-6" style="width: 200px;">
    <h5 class="text-light mb-4">Stay in contact</h5>
    <p><i class="fa fa-map-marker-alt me-3">X&nbsp;&nbsp;&nbsp;</i>619 Otaroad-north-Sidrac, New York, New York 291290 </p>
    <p><i class="fa fa-phone-alt me-3">X&nbsp;&nbsp;&nbsp;</i><a href="tel:213-622-1212">213-622-1212</a></p>
    <p><i class="fa fa-envelope me-3">X&nbsp;&nbsp;&nbsp;</i><a href="mailto:bob@bob.usa">bob@bob.usa</a></p>
</div>