Strategizing button placement for maximum profit expansion

Question

Strategizing button placement for maximum profit expansion

I am attempting to design a budget board using Bootstrap 4. Here is what I have done so far, and I want the buttons to look like the image below. I'm clueless on how to achieve this..

Current Output:

Desired Output:

.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:

css bootstrap-4

Answer 1

Answer №1

One suggestion is to utilize CSS grid for your layout. It's worth mentioning that your HTML code is currently invalid. The button element should not contain h2 or div, only non-interactive phrasing content. Consider revising your structure accordingly.

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> Food </button>
  <button> Entertainment </button>
  <button> Internet Electricity and Cables </button>
  <button> Rent </button>
  <button> Rent </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> Household Bills </button>
  <button> Medical Expenses </button><button>
  Household Bills </button>
  <button> Medical Expenses </button>
  <button> Household Bills </button>
  <button> Medical Expenses </button>
  <button> Household Bills </button>
  <button> Medical Expenses </button>
  <button> Household Bills </button>
</div>

Answer 2

One suggestion is to utilize CSS grid for your layout. It's worth mentioning that your HTML code is currently invalid. The button element should not contain h2 or div, only non-interactive phrasing content. Consider revising your structure accordingly.

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> Food </button>
  <button> Entertainment </button>
  <button> Internet Electricity and Cables </button>
  <button> Rent </button>
  <button> Rent </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> Household Bills </button>
  <button> Medical Expenses </button><button>
  Household Bills </button>
  <button> Medical Expenses </button>
  <button> Household Bills </button>
  <button> Medical Expenses </button>
  <button> Household Bills </button>
  <button> Medical Expenses </button>
  <button> Household Bills </button>
</div>

Answer 3

Answer №2

I recommend adjusting your HTML structure as shown below:

.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;"> Executed by
      <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;"> Via
      <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"> Grocery </button>
    <button class="col-3 btn btn-warning"> Entertainment </button>
    <button class="col-3 btn btn-warning"> Internet Electricity and Cables </button>
    <button class="col-3 btn btn-warning"> Maintenance </button>
  </div>
  <div class="row">
    <div class="col-3">
      <button class="col-12 btn btn-warning"> Maintenance </button>
      <button class="col-12 btn btn-warning"> Medical Expenses </button>
      <button class="col-12 btn btn-warning"> Household Bills </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"> Household Bills </button>
      <button class="col-12 btn btn-warning"> Household Bills </button>
      <button class="col-12 btn btn-warning"> Medical Expenses </button>
    </div>
  </div>

  <div class="row">


    <button class="col-3 btn btn-warning"> Medical Expenses </button>
    <button class="col-3 btn btn-warning"> Household Bills </button>
    <button class="col-3 btn btn-warning"> Medical Expenses </button>


    <button class="col-3 btn btn-warning"> Household Bills </button>
  </div>
  <div class="row" style="margin: 5px;height: 75px;border: 1px solid black">
    <div class="col-4">
      Select the date of the transaction:
    </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="Describe the expense (optional)">
  </div>
  <div class="row" style="margin: 5px;height: 75px; border: 1px solid black">
    <button class="btn btn-dark col-12"> Add </button>
  </div>
</div>

Answer 4

I recommend adjusting your HTML structure as shown below:

.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;"> Executed by
      <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;"> Via
      <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"> Grocery </button>
    <button class="col-3 btn btn-warning"> Entertainment </button>
    <button class="col-3 btn btn-warning"> Internet Electricity and Cables </button>
    <button class="col-3 btn btn-warning"> Maintenance </button>
  </div>
  <div class="row">
    <div class="col-3">
      <button class="col-12 btn btn-warning"> Maintenance </button>
      <button class="col-12 btn btn-warning"> Medical Expenses </button>
      <button class="col-12 btn btn-warning"> Household Bills </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"> Household Bills </button>
      <button class="col-12 btn btn-warning"> Household Bills </button>
      <button class="col-12 btn btn-warning"> Medical Expenses </button>
    </div>
  </div>

  <div class="row">


    <button class="col-3 btn btn-warning"> Medical Expenses </button>
    <button class="col-3 btn btn-warning"> Household Bills </button>
    <button class="col-3 btn btn-warning"> Medical Expenses </button>


    <button class="col-3 btn btn-warning"> Household Bills </button>
  </div>
  <div class="row" style="margin: 5px;height: 75px;border: 1px solid black">
    <div class="col-4">
      Select the date of the transaction:
    </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="Describe the expense (optional)">
  </div>
  <div class="row" style="margin: 5px;height: 75px; border: 1px solid black">
    <button class="btn btn-dark col-12"> Add </button>
  </div>
</div>

Strategizing button placement for maximum profit expansion

Answer №1

Answer №2

Similar questions

Navigate to a precise section of the webpage, positioned at a specific distance from the top

Tips for breaking out of the traditional 12 column grid using Bootstrap 4 flexbox grid system

The phenomenon of an invisible Absolute or relative position leading to grid components overlapping in Next.js

Tips for creating a dynamically responsive eye icon placement

Dynamic horizontal div elements laid out in a repeating pattern using CSS Grid

Exploring ways to style font families for individual options within ng-options

Once it hits the fourth tab, it must not cycle back to the first one

"Transform the appearance of the datepicker input field with Material 15's dynamic

Utilizing jQuery for dynamic horizontal positioning of background images in CSS

Is it possible to resume CSS animation when the page is first loaded?

Is there a way to keep my fixed footer container from moving while zooming in and out on a webpage

The gradient applied to the svg <text> element is failing to function

Outline along a single edge

The table is not properly displaying within the parent scrolled div due to issues with the fixed positioning

What is the method for creating a checkbox in CSS that includes a minus symbol inside of it?

Press the list button to reveal an enlarged box

What causes the width of unrelated cells to change when the contents of colspan'd cells expand in IE7?

Display a modal pop-up containing HTML content

Achieving consistent spacing between elements within a column in Bootstrap 5

Arrange and display similar objects together