I am trying to recreate Microsoft Windows 10 calculator (check it out for reference). I am unable to align all my buttons since the buttons contain different letters and symbols. I want my all buttons to be exactly the same size and be next to each other with no spaces in between them.
Also, while posting this I noticed that my display is sticking out to the right more. Any idea for a fix?
Link to HTML and CSS combined:
https://codepen.io/anon/pen/jpLOjP
HTML:
<body>
<form id="calculatorForm">
<input type="text" id="display">
<div class="row">
<!--percent-->
<button type="button" onclick="calculate()">%</button>
<!--sq root-->
<button type="button" onclick="calculate()">√</button>
<!--x^2-->
<button type="button" onclick="calculate()">x²</button>
<!--1/x-->
<button type="button" onclick="calculate()">¹⁄<sub>x</sub></button>
</div>
<div class="row">
<button type="button" onclick="calculate()">CE</button>
<button type="button" onclick="reset()">C</button>
<!-- remove -->
<button type="button" onclick="calculate()">⇍</button>
<button type="button" onclick="calculate()">÷</button>
</div>
<div class="row">
<button type="button" onclick="calculate()">7</button>
<button type="button" onclick="calculate()">8</button>
<button type="button" onclick="calculate()">9</button>
<button type="button" onclick="calculate()">×</button>
</div>
<div class="row">
<button type="button" onclick="calculate()">4</button>
<button type="button" onclick="calculate()">5</button>
<button type="button" onclick="calculate()">6</button>
<button type="button" onclick="calculate()">−</button>
</div>
<div class="row">
<button type="button" onclick="calculate()">1</button>
<button type="button" onclick="calculate()">2</button>
<button type="button" onclick="calculate()">3</button>
<button type="button" onclick="calculate()">+</button>
</div>
<div class="row">
<button type="button" onclick="calculate()">±</button>
<button type="button" onclick="calculate()">0</button>
<button type="button" onclick="calculate()">⋅</button>
<button type="button" onclick="calculate()">=</button>
</div>
</form>
</body>
CSS:
#display {
font-size: 90px;
width: 100%;
}
form {
background: #eee;
border: solid grey;
display: block;
margin: 0 auto;
width: 450px;
padding: 10px;
}
.row {
font-size: 0px;
text-align: center;
margin: 0 auto;
}
.row button {
width: 25%;
height: 60px;
font-size: 40px;
font-family: calibri;
}
You're looking for vertical-align.
.row button{
vertical-align: middle;
}
Related
I am trying to make my buttons fit the mobile screen, but for some reason, it looks bad.
The background won't continue down. Can you point me where I was wrong?
The div of buttons is inside a form if it helps.
I am using rows, and then 3 col-md-4, I think its something my body or container problem. but could not find the problem.
Computer look :
Mobile look:
Html Code
<div id="studentclass" style="display: none">
<div class="row justify-content-center text-center">
<div class="col-md-4 classbutton">
<button value="4" type="button" class="btn classbuttonsize btn-primary btn-lg">ב1
</button>
</div>
<div class="col-md-4 classbutton">
<button value="5" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 2
</button>
</div>
<div class="col-md-4 classbutton">
<button value="6" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
</button>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-md-4 classbutton">
<button value="7" type="button" class="btn classbuttonsize btn-primary btn-lg">ג 1
</button>
</div>
<div class="col-md-4 classbutton">
<button value="8" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
</button>
</div>
<div class="col-md-4 classbutton">
<button value="9" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
</button>
</div>
</div>
CSS
<style>
.row {
margin-right: 0px;
}
#media screen and (max-width: 650px) {
.classbuttonsize {
height: 75px;
width: 75px;
}
#studentclass .row {
width: 100%;
}
#studentclass .classbutton {
height: 75px;
width: 75px;
}
}
img {
width: 100%;
height: auto;
}
html,
body {
height: 100%;
font-family: 'Alef', sans-serif;
}
.container {
height: 100%;
position: relative;
display: flex;
}
.container > div {
margin: auto;
}
body {
background-image: url('{% static ' images/background.jpg ' %}');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.card-img-top {
width: 100%;
height: auto;
}
.classbutton {
padding: 15px 15px 15px 15px;
}
.classbuttonsize {
height: 110px;
width: 110px;
font-size: 50px;
background-color: #e7e7e7;
color: black;
border-radius: 8px;
border: 1px solid black;
}
change the structure if using bootstrap 4
.row {
margin-right: 0px;
}
.classbutton{
margin-bottom:10px;
}
#media screen and (max-width: 650px) {
.classbuttonsize {
height: 75px;
width: 75px;
}
#studentclass .row {
width: 100%;
}
#studentclass .classbutton {
height: 75px;
width: 75px;
}
}
img {
width: 100%;
height: auto;
}
html,
body {
height: 100%;
font-family: 'Alef', sans-serif;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="studentclass" style="display: block">
<div class="row justify-content-center text-center">
<div class="col-4 classbutton">
<button value="4" type="button" class="btn classbuttonsize btn-primary btn-lg">ב1
</button>
</div>
<div class="col-4 classbutton">
<button value="5" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 2
</button>
</div>
<div class="col-4 classbutton">
<button value="6" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
</button>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-4 classbutton">
<button value="7" type="button" class="btn classbuttonsize btn-primary btn-lg">ג 1
</button>
</div>
<div class="col-4 classbutton">
<button value="8" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
</button>
</div>
<div class="col-4 classbutton">
<button value="9" type="button" class="btn classbuttonsize btn-primary btn-lg">ב 3
</button>
</div>
</div>
I have Fixed it:
just add to the div of col:
<div class="col-4 classbutton" style="width: 33%; height: 33%">
try this
<div class="col-sm-4 classbutton">
<button value="7" type="button" class="btn classbuttonsize btn-primary btn-lg">ג 1
</button>
</div>
Hey I am trying to make the left middle right buttons from this source.
So I started with
npm install bootstrap#3
After that I installed jQuery because of the description of the demo page
npm install jquery
My code is exactly the same as from the demo page but all I get is this:
.btn-round-lg{
border-radius: 22.5px;
}
.btn-round{
border-radius: 17px;
}
.btn-round-sm{
border-radius: 15px;
}
.btn-round-xs{
border-radius: 11px;
padding-left: 10px;
padding-right: 10px;
}
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-round btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-round btn-default">Right</button>
</div>
</div>
Here you go with a solution https://jsfiddle.net/ppL8stkv/
.btn-round-lg{
border-radius: 22.5px;
}
.btn-round{
border-radius: 17px;
}
.btn-round-sm{
border-radius: 15px;
}
.btn-round-xs{
border-radius: 11px;
padding-left: 10px;
padding-right: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-round btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-round btn-default">Right</button>
</div>
</div>
</div>
</div>
You might have missed bootstrap library. Check the jsfiddle.
Hope this will help you.
I have a btn-toolbar inside my panel-body, and would like to:
Center the set of buttons
Ensure that on mobile view, three buttons are on top, three are on the bottom.
There are a lot of similar questions out there, and I have tried various potential solutions, but nothing seems to work (text-align: center, margin: 0 auto, etc.). Any help would be appreciated.
http://codepen.io/kli96/pen/vydMgW
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-toolbar">
<button type="button" class="btn btn-primary" id="btn2016">2016</button>
<button type="button" class="btn btn-primary" id="btn2015">2015</button>
<button type="button" class="btn btn-primary" id="btn2014">2014</button>
<button type="button" class="btn btn-primary" id="btn2013">2013</button>
<button type="button" class="btn btn-primary" id="btn2012">2012</button>
<button type="button" class="btn btn-primary" id="btn2011">2011</button>
<button type="button" class="btn btn-primary" id="btn2010">2010</button>
</div>
</div>
</div>
</div>
</div>
</div>
To make sure the buttons are centers you can set the container of the buttons to display: inline-block and that container with text-align: center.
You have 7 buttons, but with the above changes they look ok on mobile.
Here is the CSS you need:
.panel-body {
text-align: center;
}
.btn-toolbar {
display: inline-block;
}
.btn-toolbar .btn {
margin-bottom: 5px;
}
Check the codepen:
http://codepen.io/anon/pen/MbQRrY
I have two buttons and I would like to swap them using float. How can I do it?
<div class="modal-footer">
<button type="button" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>
Thank you. Any help would be appreciated.
With additional CSS, you could float the cancel button to the right.
.modal-footer .btn-default {
float:right
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" charset="utf-8">
<div class="modal-footer">
<button type="button" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>
or
You can use one of the helper classes on the first button --- pull-right.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" charset="utf-8">
<div class="modal-footer">
<button type="button" class="btn btn-default pull-right">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>
You may additionally need to add a clearfix depending on other content in the modal.
Using flexbox:
You can use the flexbox property order. Like the property name suggests, it changes the order of flex-items.
More info here.
Code Snippet:
.modal-footer {
display: flex;
justify-content: flex-end;
}
.modal-footer .btn:last-of-type {
order: -1;
}
<div class="modal-footer">
<button type="button" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
</div>
.right {
float: right;
}
.left {
float: left;
}
<div class="modal-footer">
<button type="button" class="right btn btn-default">Cancel</button>
<button type="button" class="left btn btn-primary" data-dismiss="modal">Delete</button>
</div>
you can also use
order: 1 and order: -1
.modal-footer {
display: -webkit-flex; /* Safari */
display: flex;
}
.first {
order: 1
}
.second {
order: 2
}
<div class="modal-footer">
<button type="button" class="second btn btn-default">Cancel</button>
<button type="button" class="first btn btn-primary" data-dismiss="modal">Delete</button>
</div>
read CSS order property
Made this Bootply example and I'm wondering how can I get the same width for normal button and a button group consisting of 3 buttons.
Tried it with an css extension but I don't think that is the correct way in sense of the bootstrap grid system.
I know that there is something like .btn-group-justified but using of that class also changes the first ("<") and last element (">") width, but they should be fixed.
Any ideas?
.menu_button {
min-width: 170px;
max-width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default menu_button">First</button>
</div>
<div class="btn-group">
<button class="btn btn-default menu_button">Second</button>
</div>
<div class="btn-group">
<button class="btn btn-default"><</button>
<button class="btn btn-default menu_button">3rd</button>
<button class="btn btn-default">></button>
</div>
<div class="btn-group">
<button class="btn btn-default"><</button>
<button class="btn btn-default menu_button">4th</button>
<button class="btn btn-default">></button>
</div>
</div>
</div>
</div>
How's this?
I created a separate class for grouped buttons so that they could have separate stylings.
SIDE NOTE
Bootstrap buttons are styled to be responsive as the viewport changes. So styling them as you did may work, but may not be responsive unless you add your own media queries in CSS to change the size of them as the viewport changes.
.menu_button {
min-width: 170px !important;
max-width: 200px !important;
}
.menu_button_grouped {
min-width: 104px !important;
max-width: 134px !important;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default menu_button">First</button>
</div>
<div class="btn-group">
<button class="btn btn-default menu_button">Second</button>
</div>
<div class="btn-group">
<button class="btn btn-default"><</button>
<button class="btn btn-default menu_button_grouped">3rd</button>
<button class="btn btn-default">></button>
</div>
<div class="btn-group">
<button class="btn btn-default"><</button>
<button class="btn btn-default menu_button_grouped">4th</button>
<button class="btn btn-default">></button>
</div>
</div>
</div>
</div>
I hope this helps!
.buttons-group {
min-width: -webkit-fill-available;
justify-content: space-evenly;
}
.button-group {
width: -webkit-fill-available;
}