expense form in bootstrap

expense-form-in-bootstrap.markdown

expense form in bootstrap

A Pen by Hamza Kyamanywa on CodePen.

License.

index.html

<div class='main container my-0 mx-2 p-3 border border-dark border-1 bg-light'>
  <div class='row border border-primary rounded-3 border-2 m-3'>
    <!--  expense form    -->
    <form class='col g-3 p-4 '>
      <h2 class='mb-3 fs-2'> Expenses form </h2>
      <div class="row g-3 mb-3">
        <div class="col-sm-6">
          <input type="text" class="form-control" placeholder="Item name" id='expense-name' required>
        </div>
        <div class='col-sm-6'>
          <div class="input-group col-md-6 mb-3">
            <span class="input-group-text">Price $</span>
            <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" required>
            <span class="input-group-text">.00</span>
          </div>
        </div>

      </div>

      <div class='row'>
        <div class="col-sm-6 mb-3">
          <input type="date" class="form-control" id='expense-date' required>
        </div>
        <div class="col-sm-6 mb-3 row">
          <button class="btn btn-primary col m-1" type="button" value="Input"> Cancel </button>
          <button class="btn btn-primary col m-1" type="submit">Add New Expense</button>

        </div>

      </div>

    </form>
  </div>

  <!--   filter section -->
  <div class="row p-3 m-3 rounded-3 bg-primary text-white">
    <div class='col-sm-4 mb-1'> Filtered by Year: </div>
    <div class='col-sm-6 col-md-3  ms-auto'>
      <select class="form-select" aria-label="Default select example">
        <option selected value="1">2019</option>
        <option value="2">2020</option>
        <option value="3">2021</option>
        <option value="2">2022</option>
      </select>
    </div>

  </div>
  <!--   ############################################################## -->
  <!--  chart area  -->
  <div class="p-3 m-3 rounded-3 bg-primary text-white chart">
    <h2> chart area </h2>
    <!--  chart background    -->
    <div class='bg-warning p-3 chart-background'>
      <!--    single month bar    -->
      <div class=' mx-auto d-flex flex-column align-items-center month'>
        <!--    outer bar      -->
        <div class='rounded rounded-pill bg-dark mx-auto my-1 outer-bar d-flex flex-column justify-content-end'>
          <!--   inner bar         -->
          <div class='bg-light rounded-pill inner-bar'> </div>
        </div>
        <div class=' mx-2 text-dark fs-6'> Jan</div>
      </div>
      <!-- #####################################################      -->
      <!--    single month bar    -->
      <div class=' mx-auto d-flex flex-column align-items-center month'>
        <!--    outer bar      -->
        <div class='rounded rounded-pill bg-dark mx-auto my-1 outer-bar d-flex flex-column justify-content-end'>
          <!--   inner bar         -->
          <div class='bg-light rounded-pill inner-bar'> </div>
        </div>
        <div class=' mx-2 text-dark fs-6'> Jan</div>
      </div><!--    single month bar    -->
      <div class=' mx-auto d-flex flex-column align-items-center month'>
        <!--    outer bar      -->
        <div class='rounded rounded-pill bg-dark mx-auto my-1 outer-bar d-flex flex-column justify-content-end'>
          <!--   inner bar         -->
          <div class='bg-light rounded-pill inner-bar'> </div>
        </div>
        <div class=' mx-2 text-dark fs-6'> Jan</div>
      </div><!--    single month bar    -->
      <div class=' mx-auto d-flex flex-column align-items-center month'>
        <!--    outer bar      -->
        <div class='rounded rounded-pill bg-dark mx-auto my-1 outer-bar d-flex flex-column justify-content-end'>
          <!--   inner bar         -->
          <div class='bg-light rounded-pill inner-bar'> </div>
        </div>
        <div class=' mx-2 text-dark fs-6'> Jan</div>
      </div><!--    single month bar    -->
      <div class=' mx-auto d-flex flex-column align-items-center month'>
        <!--    outer bar      -->
        <div class='rounded rounded-pill bg-dark mx-auto my-1 outer-bar d-flex flex-column justify-content-end'>
          <!--   inner bar         -->
          <div class='bg-light rounded-pill inner-bar'> </div>
        </div>
        <div class=' mx-2 text-dark fs-6'> Jan</div>
      </div><!--    single month bar    -->
      <div class=' mx-auto d-flex flex-column align-items-center month'>
        <!--    outer bar      -->
        <div class='rounded rounded-pill bg-dark mx-auto my-1 outer-bar d-flex flex-column justify-content-end'>
          <!--   inner bar         -->
          <div class='bg-light rounded-pill inner-bar'> </div>
        </div>
        <div class=' mx-2 text-dark fs-6'> Jan</div>
      </div><!--    single month bar    -->
      <div class=' mx-auto d-flex flex-column align-items-center month'>
        <!--    outer bar      -->
        <div class='rounded rounded-pill bg-dark mx-auto my-1 outer-bar d-flex flex-column justify-content-end'>
          <!--   inner bar         -->
          <div class='bg-light rounded-pill inner-bar'> </div>
        </div>
        <div class=' mx-2 text-dark fs-6'> Jan</div>
      </div><!--    single month bar    -->
      <div class=' mx-auto d-flex flex-column align-items-center month'>
        <!--    outer bar      -->
        <div class='rounded rounded-pill bg-dark mx-auto my-1 outer-bar d-flex flex-column justify-content-end'>
          <!--   inner bar         -->
          <div class='bg-light rounded-pill inner-bar'> </div>
        </div>
        <div class=' mx-2 text-dark fs-6'> Jan</div>
      </div><!--    single month bar    -->
      <div class=' mx-auto d-flex flex-column align-items-center month'>
        <!--    outer bar      -->
        <div class='rounded rounded-pill bg-dark mx-auto my-1 outer-bar d-flex flex-column justify-content-end'>
          <!--   inner bar         -->
          <div class='bg-light rounded-pill inner-bar'> </div>
        </div>
        <div class=' mx-2 text-dark fs-6'> Jan</div>
      </div><!--    single month bar    -->
      <div class=' mx-auto d-flex flex-column align-items-center month'>
        <!--    outer bar      -->
        <div class='rounded rounded-pill bg-dark mx-auto my-1 outer-bar d-flex flex-column justify-content-end'>
          <!--   inner bar         -->
          <div class='bg-light rounded-pill inner-bar'> </div>
        </div>
        <div class=' mx-2 text-dark fs-6'> Jan</div>
      </div><!--    single month bar    -->
      <div class=' mx-auto d-flex flex-column align-items-center month'>
        <!--    outer bar      -->
        <div class='rounded rounded-pill bg-dark mx-auto my-1 outer-bar d-flex flex-column justify-content-end'>
          <!--   inner bar         -->
          <div class='bg-light rounded-pill inner-bar'> </div>
        </div>
        <div class=' mx-2 text-dark fs-6'> Jan</div>
      </div><!--    single month bar    -->
      <div class=' me-3 d-flex flex-column align-items-center month'>
        <!--    outer bar      -->
        <div class='rounded rounded-pill bg-dark mx-auto my-1 outer-bar d-flex flex-column justify-content-end'>
          <!--   inner bar         -->
          <div class='bg-light rounded-pill inner-bar'> </div>
        </div>
        <div class=' mx-2 text-dark fs-6'> Jan</div>
      </div>
      <!--   end of months    -->

    </div>
  </div>

  <!--  ###############################################  -->
  <!--  expenses -->
  <div class='row m-3 p-2 border border-3 border-primary rounded-2'>
    <h2 class='mb-3 fs-2'> Expenses</h2>

    <!--  expenses list    -->
    <div class='d-flex flex-column justify-content-around text-light'>
      <div class='row row-col-3 border border-dark bg-secondary mx-2 mb-3 rounded-3'>
        <!--      calender    -->
        <div class='d-flex flex-column justify-content-evenly m-3 bg-primary p-5 align-items-center col-3 text-light calendar'>
          <div class='fw-bold text-capitalize fs-6 mt--3'>Nov</div>

          <div class='fs-6'>2021</div>
          <div class='fs-1'>24</div>
        </div>
        <!--      items name    -->
        <div class='fw-bold col m-auto text-capitalize'> items name </div>
        <!--    item price      -->
        <div class='col my-auto ms-auto me-2 d-flex justify-content-end'>
          <div class='fw-bold  py-2  d-flex  justify-content-center px-auto border border-2 border-light rounded-pill  expense-price'> $ 20000 </div>
        </div>

      </div>

    </div>
  </div>
</div>

style.css

/* calender css */
.calendar {
  border-radius: 10px;
  width: 100px;
  height: 110px;
  box-sizing: border-box;
}
/* whole body css */
.main {
  min-width: 500px;
}

/*  chart css */
.chart {
  min-width: 500px;
}
@media (max-width: 600px) {
  .chart {
    visibility: hidden;
    position: absolute;
  }
}
.chart-background {
  height: 400px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: auto;
}
.outer-bar {
  max-width: 25%;
  height: 90%;
  box-sizing: border-box;
}
.inner-bar {
  height: 88%;
  min-width: 5px;
  max-width: 10px;
}

/* expenses css */
.expense-price {
  width: 100px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />