Customizing the Look of a Calculator Using HTML, CSS, and Bootstrap 4.0

I am currently working on my first CSS project, which is a calculator. However, I am facing an issue with organizing the cells into perfect columns and making sure they are all the same size (except for "="). Any advice on how to achieve this would be greatly appreciated. Thank you in advance. Here is what I have accomplished so far:

Calculator

<div class ="btn-group-vertical" role="group" aria-label="Vertical button group">
    <div class="btn-group btn-group-lg" role="group" aria-label="First Row">
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="7"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="8"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="9"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="+"></input>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Second Row">
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="4"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="5"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="6"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="-"></input>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Third Row">

        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="1"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="2"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="3"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="*"></input>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Fourth Row">
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="0"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="."></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="+/-"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="/"></input>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="="></input>
    </div>
</div>

htmlcssbootstrap-4calculator

Answer №1

Feel free to take a look and hopefully you will find the information helpful. If you have any remaining issues or questions, please don't hesitate to ask.

.btn{
  width:50px;
  min-width:50px; /* this is for the smallest devices */
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class ="btn-group-vertical" role="group" aria-label="Vertical button group">
    <div class="btn-group btn-group-lg" role="group" aria-label="First Row">
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="7"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="8"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="9"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="+"></input>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Second Row">
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="4"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="5"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="6"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="-"></input>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Third Row">

        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="1"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="2"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="3"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="*"></input>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Fourth Row">
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="0"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="."></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="+/-"></input>
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="/"></input>
    </div>
    <div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
        <input type="button" class="btn btn-secondary btn-outline-dark" waves-effect value="="></input>
    </div>
</div>

Answer №2

Utilize CSS grids to construct the calculator interface. Each number will function as a distinct row or column element with equal width. To emphasize the '=' sign, you have the option to extend it over multiple columns for increased width or span it across multiple rows for greater height.

Answer №3

To create a perfect column layout, utilize the grid system:

<div class="row">
    <div class ="col-2">
        <div class="row">
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="7"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="8"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="9"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="+"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="4"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="5"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="6"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="-"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="1"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="2"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="3"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="*"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="0"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="."></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="+/-"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-3" waves-effect value="/"></input>
            <input type="button" class="btn btn-secondary btn-outline-dark col-12" waves-effect value="="></input>
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm interested in implementing a cooldown feature on my button, but I'm not quite sure how to go about

Working on a React.Js website and looking to improve the Contact Me page by adding a cooldown to the button. Unfortunately, I haven't shared all the code here but feel free to reach out on Discord: uvejs#5162 for more details. import "./contactpa ...

htmlcssreactjs

Extract values from HTML IDs and store them in an array

Currently, I am working on a project where I need to capture a QR code and display it on the screen. After that, I want to iterate through the elements using a for loop and save the values in an array. Specifically, I am using the ID id="scanned-resul ...

javascripthtmlasp.net-mvc

Each professional has their own unique workdays and hours, which are easily managed with the angular schedule feature

My schedule is quite dynamic, with professionals attending on different days for varying periods of time. Each professional has a different start and end time on their designated day. To see an example of this setup, you can visit the following link: Sche ...

htmlangulartypescriptschedulesyncfusion

AngularJS and Bootstrap combined with a dropdown and input text feature

I'm looking to create a field that can function as both a drop-down menu and an input text field. Users should be able to either select a value from the drop-down or manually input text. I came across something similar, here is a code snippet for ref ...

javascripthtmlangularjstwitter-bootstrap-3

Capturing all subdomains dynamically using simple HTML/jQuery techniques

Currently, I am working on revamping an older web page with a monolithic structure. In my code, I have implemented a switch statement that evaluates the URL's pathname and then executes various functions to display or hide elements on the page. switc ...

javascriptjqueryhtmlroutesweb-frontend

What is the best way to adjust a fixed-width table to completely fill the width of a smartphone browser?

In an ancient web application, the design was primarily constructed using rigid tables: <div class="main"> <table width="520" border="0" cellspacing="0" cellpadding="0"> <tr> <td>...</td> </ ...

htmlcss

Which is better for website performance: storing images in a local folder or using an external

After completing my first website, I noticed that some images load slowly and appear to slide down the page gradually. All the images on my site are sourced externally. Would they load faster if I stored them in a local folder instead of using web source ...

javascriptphpjqueryhtmlcss

Locate/place name with AngularJS and Google Maps integration

I need help locating the user-selected location on a map. I currently have the latitude and longitude, but I'm struggling to obtain the location name. My project utilizes angularJS along with angular-google-maps 2.1.5. Below is the HTML code: <u ...

javascriptangularjshtmlgoogle-mapsgeolocation

Achieving Navbar overlap on Carousel with Bootstrap

Is there a way to make the bootstrap navbar overlap with the carousel without causing any issues with #test? HTML <nav class="navbar navbar-expand-lg navbar-dark bg-dark floating-navbar"> <div class="container"> & ...

htmlcssbootstrap-5

Specifying file types in an HTML upload form

Is there a way to restrict my form so that it only allows jpeg files? Currently, it is displaying all types of files. <input name="image" type="file" /> Also, are there any JavaScript functions available for showing progress? ...

htmluploadinputprogressfile-type

The Jquery .on Listener fails to attach a click listener to newly added elements

I'm experiencing an issue where the Jquery .on method is attaching the listener to the first button created when the page loads. However, when a new button is dynamically created by clicking on the previous one, the new button does not have any listen ...

javascriptjqueryhtml

What is the best way to change CSS style for a button when clicked using JavaScript?

Is there a way to switch the background style of a CSS div when clicking the same button? function changeBg() { var divElem = document.getElementById("change-bg"); if (divElem.style.backgroundColor === "yellow") { divElem.style.backgroundColor ...

javascripthtmlcss

Ways to automatically update a page once the form response is received

After scouring various websites, I still haven't found a solution to my issue. What I need help with is how to refresh a page once a successful deletion message is received for a specific row. My admin2.php page displays information about the admin fr ...

phpjqueryhtmlmysqlajax

While attempting to install the gem bootstrap, version 2.4.0 of sassc encountered an installation issue and

When I add the gem 'bootstrap', version '~> 4.1.3' and then run bundle install I encounter an error message stating: An error occurred while installing sassc (2.4.0), and Bundler cannot continue. Make sure that `gem install sassc -v ...

ruby-on-railsrubybootstrap-4

CSS Transform animation does not work when a class is added programmatically, although it functions properly when toggling the class in Chrome

Attempting to create an animation for the transform of a div. Below is the code with transition and transform properties in Safari: #mydiv{ transition: all 2.3s cubic-bezier(1, 0, 0, 1); transform: scale(0.5); background:white; padding:30 ...

jquerycsscss-transitionscss-transforms

A method for locating the shadow's exact position

Can anyone assist me in determining the algorithm to calculate the position of a shadow based on the object's rotation? For instance, suppose I have a PNG image with -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.5) Xpx Ypx 0px); and -webkit-transform: ...

jqueryalgorithmcss

What causes the variation in results when I input CSS directly into the head section versus linking it from a separate .css file?

As a beginner, I am facing an issue with my CSS. When I directly insert the CSS into the head of my .html file, everything looks perfect. However, when I link my .css file into the head, the very first word ("Holy") does not display properly. I have double ...

htmlcss

Dynamic video autoplay with a hover effect using Bootstrap 3

I am looking to create a hovering effect on an autoloop video similar to what is seen on this website - This specific section of the website demonstrates the effect I am trying to achieve. Prior to hovering, the autoloop video has an overlay displayed on ...

htmlcsstwitter-bootstrap

Expanding beyond the dimensions of the webpage, HTML CSS Height set to 100% creates a unique

I'm struggling with the CSS on a page I'm working on. I have a header and main content each enclosed in div tags, with the header set to a height of 250px and the main content set to a height of 100%. I've also set the html and body heights ...

htmlcss

PHP combined with jQTouch

I have a form on an HTML page that is passed to a PHP script. The PHP works fine, but I am facing some issues in displaying the HTML content on the PHP page. When I use <?php echo $message; ?> in the body of the HTML, the variable displays properly. ...

phphtmlformssession-variablesjqtouch