<html><head>
<link rel="stylesheet" type="text/css" href="css/bootstrap-4.6.2.css">
<script src="js/jquery-3.7.0.js"></script>
<script src="js/bootstrap-4.6.2.js"></script>
<style>
.circle {
border-radius: 1rem; /*50%*/
width: 1.2rem;
line-height: 1.2rem;
text-align: center;
font-size: 0.5rem;
font-weight: bold;
border: 0px solid #000;
color: #fff;
background: #422;
display: inline-block;
}
.circle-primary { color: #fff; background: #007BFF; }
.circle-secondary { color: #fff; background: #6C757D; }
.circle-success { color: #fff; background: #28A745; }
.circle-danger { color: #fff; background: #DC3545; }
.circle-warning { color: #fff; background: #FFC107; }
.circle-info { color: #fff; background: #17A2B8; }
.circle-light { color: #000; background: #F8F9FA; }
.circle-dark { color: #fff; background: #343A40; }
</style>
</head><body>
<div class="m-4">
<span class="circle circle-primary"> c++ </span>
<span class="circle circle-secondary"> c </span>
<span class="circle circle-success"> h </span>
<span class="circle circle-danger"> py </span>
<span class="circle circle-warning"> js </span>
<span class="circle circle-info"> java </span>
<span class="circle circle-light"> html </span>
<span class="circle circle-dark"> css </span>
</div>
</body></html>