How can I add a border to the top of my column using Bootstrap 4? I've been struggling with it and can't seem to get it right. Here is the code I'm currently using, which includes <div> tags for the columns:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Untitled Document</title>
<style type="text/css">
</style>
</head>
<body>
<div class="row">
<div class="col-lg2, col-md-2, col-sm-2, col-xs-2" style="background: #efefd8; min-height:77px;">
<h4><b><center>
COL 1
</center></b></h4>
</div>
<div class="col-lg2, col-md-2, col-sm-2, col-xs-2" style="background: #efefd8; min-height:77px;">
<h4><b><center>
COL 2
</center></b></h4>
</div>
<div class="col-lg-2, col-md-2, col-sm-2, col-xs-2" style="background:#efefd8; min-height:77px;">
<h4><b><center>
COL 3
</center></b></h4>
</div>
<div class="col-lg-2, col-md-2, col-sm-2, col-xs-2" style="background: #efefd8; min-height:77px;">
<h4><b><center>
COL 4
</center></b></h4>
</div>
<div class="col-lg-2, col-md-2, col-sm-2, col-xs-2">
</div>
</div>
</body>
</html>