I have spent countless hours trying to solve this issue and I am feeling quite desperate at this point. The task at hand is creating a notification dropdown in Bootstrap 4. Despite trying numerous approaches, none seem to be effective. The dropdown should resemble the following:
https://i.sstatic.net/b0891.png
However, I am encountering difficulties with the text and date placement. They are overflowing outside the dropdown like so:
https://i.sstatic.net/cPZCT.png
I experimented with line breaks, but they proved ineffective. Unfortunately, I encountered issues getting Bootstrap to function in the snippet, so I apologize for that.
.heading {
color: #747F8B;
font-size: 14px;
}
.highlight {
font-weight: bold;
}
.dropdown-item-style {
background-color: #e9eff2;
padding: 15px;
}
.dropdown-item-style:hover {
background-color: lightgrey;
color: #ffffff;
}
.triangle {
position: absolute;
top: -8px;
left: 134px;
height: 15px;
width: 15px;
border-radius: 6px 0px 0px 0px;
transform: rotate(45deg);
background: #FFF;
}
.dropdown-title {
color: #747f8b;
font-weight: bold;
border-radius: 10px 10px 0 0;
padding-left: 15px;
padding-right: 15px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<li class="nav-item dropdown icondropdown " id="notification-dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell-o navbar-icons" aria-hidden="true"></i><span class="noti-navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-center z-depth-1" aria-labelledby="navbarDropdown" style="width: 300px; padding-bottom: 0; top: 70px; border: none; padding-top: 5px;">
<span class="triangle"></span>
<a class="dropdown-item dropdown-title">
<span class="heading">Notifications</span><span class="float-right" style="font-size: 14px;">Settings</span>
</a>
<div class="dropdown-divider m-0" style="border-color: lightgrey"></div>
<div class="dropdown-item dropdown-item-style" href="#">
<div class="row">
<div class="col-md-2">
<img src="img/johan.jpg" class="rounded-circle" width="32">
</div>
<div class="col-md-10">
<a href="">
<span class="highlight" style="line-break: auto">Bill Gates</span> liked your post.
</a>
<small class="text-muted">5 days ago</small>
</div>
</div>
</div>
<div class="dropdown-divider m-0" style="border-color: lightgrey"></div>
</div>
</li>