I am currently working on a Bootstrap popover to display various pieces of information, each containing an icon and some text. Additionally, I am incorporating twig into this project.
Here is the HTML structure:
<span class="fa fa-user instructor-contact-info-header"></span>
<div class="contact-info-container">
<p class="instructor-contact-info-header">
{{section.getInstructorNamesArray()[namesArrayIndex]}}
</p>
<p class="instructor-contact-info-data">Include additional content here</p>
Provided CSS code:
.instructor-contact-info-header {
display: inline-block;
color: #005993;
margin: 0;
}
Current presentation:
@
text text text text text text
text text text text text text
text text text text text text
Desired outcome:
@ text text text text text text
text text text text text text
text text text text text text
@ text text text text text text
text text text text text text
text text text text text text
UPDATE: After applying the solution provided, popovers featuring multiple individuals' contact information now appear as follows:
@ text text text text text text @
text text text text text text
text text text text text text
@ text text text text text text
text text text text text text
text text text text text text