Bootstrap grid yapısı kullanımı
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container text-center">
<div class="row" style="height:50px;">
<div class="col bg-danger">1.kutu</div>
</div>
<div class="row" style="height:50px;">
<div class="col-3 bg-primary">2.kutu</div>
<div class="col-2 bg-secondary">3.kutu</div>
<div class="col-2 bg-success">4.kutu</div>
<div class="col-5 bg-success-subtle">5.kutu</div>
</div>
<div class="row" style="height:50px;">
<div class="col-1 bg-warning">6.kutu</div>
<div class="col-1 bg-warning-subtle">7.kutu</div>
<div class="col-2 bg-success-subtle">8.kutu</div>
<div class="col-1 bg-success">9.kutu</div>
<div class="col-1 bg-danger">10.kutu</div>
<div class="col-2 bg-secondary">11.kutu</div>
<div class="col-1 bg-primary">12.kutu</div>
<div class="col-3 bg-danger-subtle">13.kutu</div>
</div>
<div class="row" style="height:50px;">
<div class="col-4 bg-warning">114.kutu</div>
<div class="col-1 bg-danger-subtle">15.kutu</div>
<div class="col-3 bg-primary">16.kutu</div>
<div class="col-4 bg-success">17.kutu</div>
</div>
<div class="row" style="height:50px;">
<div class="col-4 bg-danger">18.kutu</div>
<div class="col-3 bg-warning-subtle">19.kutu</div>
<div class="col-5 bg-success">20.kutu</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
</body>
</html>
