How to arrange the buttons to fill the profits? - css

Question

I am trying to create a spending board with Bootstrap 4.
Right now that's what I did, and I want buttons to be displayed as in the picture below.
I have no idea how to do it ..
What I get right now:
What I want to get in the end:
.btn-warning {
border: 1px solid black;
height: 85px;
}
.middel {
background-color: #ff00008a;
border: 4px solid black;
height: 270px;
border-radius: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container" style="border: 1px solid black">
<div class="row">
<div class="col-6" style="border: 1px solid black;height: 85px;"> בוצע על ידי
<select class="form-control">
<option> moshe </option>
<option> haim </option>
<option> kobi </option>
</select>
</div>
<div class="col-6" style="border: 1px solid black; height: 85px;"> באמצעות
<select class="form-control">
<option> moshe </option>
<option> haim </option>
<option> kobi </option>
</select>
</div>
</div>
<div class="row">
<button class="col-3 btn btn-warning"> אוכל לבית </button>
<button class="col-3 btn btn-warning"> בילוים </button>
<button class="col-3 btn btn-warning"> אינטרנט חשמל וכבלים </button>
<button class="col-3 btn btn-warning"> ארנונה </button>
<button class="col-3 btn btn-warning"> ארנונה </button>
<button class="col-6 middel">
<h2>expense</h2>
<div style="font-size: 120%; color: red"> <b>1900</b></div>
<div style="font-size: 75%; color: green"><b> 3500</b></div>
</button>
<button class="col-3 btn btn-warning"> חשבונות בית </button>
<button class="col-3 btn btn-warning"> הוצאות רפואיות </button><button class="col-3 btn btn-warning">
חשבונות בית </button>
<button class="col-3 btn btn-warning"> הוצאות רפואיות </button>
<button class="col-3 btn btn-warning"> חשבונות בית </button>
<button class="col-3 btn btn-warning"> הוצאות רפואיות </button>
<button class="col-3 btn btn-warning"> חשבונות בית </button>
<button class="col-3 btn btn-warning"> הוצאות רפואיות </button>
<button class="col-3 btn btn-warning"> חשבונות בית </button>
</div>
<div class="row" style="margin: 5px;height: 75px;border: 1px solid black">
<div class="col-4">
בחר את תאריך ביצוע הפעולה :
</div>
<div class="col-8">
<input class="form-control" type="date">
</div>
</div>
<div class="row" style="margin: 5px;height: 75px; border: 1px solid black">
<input class="col-12" type="text" placeholder="תאר את ההוצאה (לא חובה)">
</div>
<div class="row" style="margin: 5px;height: 75px; border: 1px solid black">
<button class="btn btn-dark col-12"> הוסף </button>
</div>
</div>
Attaching photo after #connexo answer:

Answer 1

Consider using CSS grid. Please note that your HTML is actually invalid. button cannot contain either of h2 and div, only non-interactive phrasing content.
body {
margin: 0;
}
.grid {
width: 100vw;
height: 100vh;
display: grid;
grid-template-rows: repeat(5, minmax(0, 1fr));
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-gap: 2px;
}
.grid button {
background-color: orange;
}
.grid .centercell {
background-color: lime;
grid-row: 2/5;
grid-column: 2/4;
border-radius: 50%;
}
<div class="grid">
<button> אוכל לבית </button>
<button> בילוים </button>
<button> אינטרנט חשמל וכבלים </button>
<button> ארנונה </button>
<button> ארנונה </button>
<button class="centercell">
<span>expense</span>
<span style="font-size: 120%; color: red"> <b>1900</b></span>
<span style="font-size: 75%; color: green"><b> 3500</b></span>
</button>
<button> חשבונות בית </button>
<button> הוצאות רפואיות </button><button>
חשבונות בית </button>
<button> הוצאות רפואיות </button>
<button> חשבונות בית </button>
<button> הוצאות רפואיות </button>
<button> חשבונות בית </button>
<button> הוצאות רפואיות </button>
<button> חשבונות בית </button>
</div>

Answer 2

I think you need to change your html struct like this:
.btn-warning {
border: 1px solid black;
height: 85px;
}
.middel {
background-color: #ff00008a;
border: 4px solid black;
height: 270px;
border-radius: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container" style="border: 1px solid black">
<div class="row">
<div class="col-6" style="border: 1px solid black;height: 85px;"> בוצע על ידי
<select class="form-control">
<option> moshe </option>
<option> haim </option>
<option> kobi </option>
</select>
</div>
<div class="col-6" style="border: 1px solid black; height: 85px;"> באמצעות
<select class="form-control">
<option> moshe </option>
<option> haim </option>
<option> kobi </option>
</select>
</div>
</div>
<div class="row">
<button class="col-3 btn btn-warning"> אוכל לבית </button>
<button class="col-3 btn btn-warning"> בילוים </button>
<button class="col-3 btn btn-warning"> אינטרנט חשמל וכבלים </button>
<button class="col-3 btn btn-warning"> ארנונה </button>
</div>
<div class="row">
<div class="col-3">
<button class="col-12 btn btn-warning"> ארנונה </button>
<button class="col-12 btn btn-warning"> הוצאות רפואיות </button>
<button class="col-12 btn btn-warning">
חשבונות בית </button>
</div>
<div class="col-6">
<button class="col-12 middel">
<h2>expense</h2>
<div style="font-size: 120%; color: red"> <b>1900</b></div>
<div style="font-size: 75%; color: green"><b> 3500</b></div>
</button>
</div>
<div class="col-3">
<button class="col-12 btn btn-warning"> חשבונות בית </button>
<button class="col-12 btn btn-warning"> חשבונות בית </button>
<button class="col-12 btn btn-warning"> הוצאות רפואיות </button>
</div>
</div>
<div class="row">
<button class="col-3 btn btn-warning"> הוצאות רפואיות </button>
<button class="col-3 btn btn-warning"> חשבונות בית </button>
<button class="col-3 btn btn-warning"> הוצאות רפואיות </button>
<button class="col-3 btn btn-warning"> חשבונות בית </button>
</div>
<div class="row" style="margin: 5px;height: 75px;border: 1px solid black">
<div class="col-4">
בחר את תאריך ביצוע הפעולה :
</div>
<div class="col-8">
<input class="form-control" type="date">
</div>
</div>
<div class="row" style="margin: 5px;height: 75px; border: 1px solid black">
<input class="col-12" type="text" placeholder="תאר את ההוצאה (לא חובה)">
</div>
<div class="row" style="margin: 5px;height: 75px; border: 1px solid black">
<button class="btn btn-dark col-12"> הוסף </button>
</div>
</div>