Skip to content

Instantly share code, notes, and snippets.

@untilhamza

untilhamza/expense-form-in-bootstrap.markdown

Created December 22, 2021 22:19
Show Gist options
  • Save untilhamza/63e8590bc094dab37b5dc3e2b87d1e10 to your computer and use it in GitHub Desktop.
Save untilhamza/63e8590bc094dab37b5dc3e2b87d1e10 to your computer and use it in GitHub Desktop.
Download ZIP
expense form in bootstrap
Raw
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>
Raw
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;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment