Utilizing bootstrap 3 to exhibit user contact details on a website has proven to be challenging.
My initial idea was to use the col-md-4 bootstrap CSS class to showcase three contact details per line, but it seems my expectation did not match reality.
The HTML code is set up to only show entered contact information. Users can input anywhere between 1 and 6 contact details. The layout should display a maximum of three contact details per line using the col-md-4 class.
With three contact details provided by the user, the display looks correct:
https://i.sstatic.net/pPPkJ.png
However, when a fourth contact detail is added, it gets placed below the third instead of aligning under the first one. This visual demonstrates the issue:
https://i.sstatic.net/lT6dC.png
This seems like a simple mistake on my part, yet I'm unable to rectify it. Extensive searches on SO & Google yielded no solution, prompting me to seek help through this post.
Below is the snippet of my HTML code:
<div class="live_preview_standard_nac_contactContainer" dir="ltr" style="direction: ltr;">
<div class="row">
{{ #if contact_details_phone }}
<div class="col-md-4 ellipsis" dir="ltr" style="direction: ltr;">
<i class="fa fa-phone icon_size20 icon_padding"></i>{{ contact_details_phone }}
</div>
{{ /if }}
<!-- Additional contact details snippets ... -->
</div>
</div>
And here's an excerpt from my CSS code for reference:
.live_preview_standard_nac_contactContainer {
padding-bottom: 1px;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Other CSS styles declarations ... */