Aşağıdaki gibi bir html sayfası hazırlayalım:
Daireler için ayrıca css sınıfları yazalım, satırda üç daire göstermek için de bootstrap kullanalım. Bir de arka plana farklı bir renk vererek dairelerin çerçevelerini (border) farklı bir renkte yapalım (beyaz olsun). Sayfayı mobilde görüntüleyince de her bir satırda tek bir daire olmasını sağlayalım:
HTML ve CSS Kodları:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Uygulamaları</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.cember {
display: flex;
align-items: center;
justify-content: center;
}
.cember-ici-yazi {
background: #4a515a;
border: 3px solid #ffffff;
justify-content: center;
align-items: center;
border-radius: 100%;
text-align: center;
margin: 5px 20px;
font-size: 25px;
font-weight: 600;
padding: 15px;
display: flex;
height: 180px;
width: 180px;
color: #fff;
}
</style>
</head>
<body style="background: darkgray;">
<div class="container">
<div class="row clearfix">
<article class="col-md-4 col-sm-12">
<div class="cember"><div class="cember-ici-yazi">Sol</div></div>
</article>
<article class="col-md-4 col-sm-12">
<div class="cember"><div class="cember-ici-yazi">Orta</div></div>
</article>
<article class="col-md-4 col-sm-12">
<div class="cember"><div class="cember-ici-yazi">Sağ</div></div>
</article>
</div>
</div>
</body>
</html>