I'm currently in the process of creating a dropdown menu that will display a list of articles along with the respective authors' images next to them. Initially, I intended to utilize Bootstrap 4's "card" system for this task. However, I encountered an issue where the author images could only be positioned either above or below the article titles on the cards. As a workaround, I opted for a standard div element within a dropdown list instead. Despite this adjustment, I am facing a challenge with the default CSS provided by Bootstrap not properly wrapping around the length of my fictional article titles as it is supposed to.
Refer to the image below for visualization.
https://i.sstatic.net/LA4Bz.jpg
The header element resides within the dropdown-menu div, so I am unsure why the CSS styling is behaving unexpectedly. Other than implementing hover color changes that are outside of the default Bootstrap 4 CSS, there are no other specific customizations. The solid border surrounding the entire menu row is simply included for visual reference and will eventually be removed.
Below is the snippet from my HTML code:
<div class="row">
<div class="col-6" style="border: 1px solid;">
<div class="btn-group" id="newsbtn">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-newspaper-o" aria-hidden="true" style="color: white;"> Latest News & articles</i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item item-list" href="#">
<div class="row">
<div class="col-sm-4 col-xs-4 no-padding photobox">
<div class="add-image">
<img class="img-thumbnail no-margin" src="1.jpg"
alt="img">
</div>
</div>
<div class="col-sm-6">
<h6>The most popular 80s pedals on Reverb</h6>
<span class="row pl-3">Johnna B. Goode</span>
<span class="info-row text-muted">
<span class="date">
<i class="fa fa-clock-o" aria-hidden="true"></i>
<small> Today 9:20 am</small>
</span>
</span>
</div>
</div>
</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<div class="row">
<div class="col-sm-4 col-xs-4 no-padding photobox">
<div class="add-image">
<img class="img-thumbnail no-margin" src="10.jpg"
alt="img">
</div>
</div>
<div class="col-sm-6">
<p>Gibson vs. Epiphone: The Sound Matters</p>
<span class="row pl-3">Damon Wayne</span>
<span class="info-row text-muted">
<span class="date">
<i class="fa fa-clock-o" aria-hidden="true"></i>
<small> Yesterday</small>
</span>
</span>
</div>
</div>
</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Article 3</a>
<div role="separator" class="dropdown-divider"></div>
<a href="#" class="btn btn-block" id="viewallbtn">View all articles</a>
</div>
</div>
</div>