HTML

bootstrap 5 notification

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

Bootstrap Notifications

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="col-md-4 col-lg-4">
    <div class="panel panel-default">
	  <div class="panel-heading">
	    <h3 class="panel-title">Notifications</h3>
	    </div>
		<div class="panel-body">
			<div class="alert alert-success">
		      <strong class="default"><i class="fa fa-road"></i> Well done,</strong> You have finished job!
		      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
		    </div>
		    <div class="alert alert-info">
		      <strong class="default"><i class="fa fa-user"></i> John</strong> sent you friend request.
		      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
		    </div>
		    <div class="alert alert-warning">
		      <strong class="default"><i class="fa fa-envelope-o"></i> Sam</strong> sent important mail.
		      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
		    </div>
		    <div class="alert alert-danger">
		      <strong class="default"><i class="fa fa-hdd-o"></i> Server </strong> reported problems.
		      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
		    </div>
		    <div class="alert alert-info nomargin">
		      <strong class="default"><i class="fa fa-money"></i> Received </strong> $1826 from client.
		      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
		    </div>
	  </div>
    </div>
</div>

<div class="col-md-4 col-lg-4">
    <div class="panel panel-default">
	  <div class="panel-heading">
	    <h3 class="panel-title">Notifications</h3>
	    </div>
		<div class="panel-body">
			<div class="alert alert-info">
		      <strong class="default"><i class="fa fa-road"></i> Well done,</strong> You have finished job!
		      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
		    </div>
		    <div class="alert alert-success">
		      <strong class="default"><i class="fa fa-user"></i> John</strong> sent you friend request.
		      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
		    </div>
		    <div class="alert alert-danger">
		      <strong class="default"><i class="fa fa-envelope-o"></i> Sam</strong> sent important mail.
		      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
		    </div>
		    <div class="alert alert-warning">
		      <strong class="default"><i class="fa fa-hdd-o"></i> Server </strong> reported problems.
		      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
		    </div>
		    <div class="alert alert-info nomargin">
		      <strong class="default"><i class="fa fa-money"></i> Received </strong> $1826 from client.
		      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
		    </div>
	  </div>
    </div>
</div>