Why is there a margin between my button and the neighbouring div? - html

Question

I have the following HTML and am wondering why there is a margin between my "equals" button and the neighbouring buttons (3 and .)
<div class="row">
<div class="col-md-9">
<div class="row">
<button class="col-md-4">1</button>
<button class="col-md-4">2</button>
<button class="col-md-4">3</button>
</div>
<div class="row">
<button class="col-md-8">0</button>
<button class="col-md-4">.</button>
</div>
</div>
<div class="col-md-3">
<button class="col-md-12" id="equal">=</button>
<br/>
</div>
</div>
screen shot of described margin

Answer 1

SOLUTION 1:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-9">
<div class="row">
<button class="col-xs-4">1</button>
<button class="col-xs-4">2</button>
<button class="col-xs-4">3</button>
</div>
<div class="row">
<button class="col-xs-8">0</button>
<button class="col-xs-4">.</button>
</div>
</div>
<button class="col-xs-1" id="equal">=</button>
<br/>
</div>
You are getting a gap because there is a padding of 15px for bootstrap columns. So I made a few changes to your code and removed the parent div wrapper for the button with = sign and added col-xs-1 class to it. You can add col-xs-3 if you wish.
Note that I have also changed all the classes from col-md- to col-xs- which is entirely optional. You can keep it md. I have added xs so that the result can be seen on the preview screen.
SOLUTION 2:
.equal-wrapper {
padding-left: 0 !important;
padding-right: 0 !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-9">
<div class="row">
<button class="col-xs-4">1</button>
<button class="col-xs-4">2</button>
<button class="col-xs-4">3</button>
</div>
<div class="row">
<button class="col-xs-8">0</button>
<button class="col-xs-4">.</button>
</div>
</div>
<div class="col-xs-3 equal-wrapper">
<button class="col-xs-12" id="equal">=</button>
<br/>
</div>
</div>

Answer 2

Just put your button in a row, bootstrap columns have padding by default.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row calculator">
<div class="col-md-9">
<div class="row">
<button class="col-md-4">1</button>
<button class="col-md-4">2</button>
<button class="col-md-4">3</button>
</div>
<div class="row">
<button class="col-md-8">0</button>
<button class="col-md-4">.</button>
</div>
</div>
<div class="col-md-3">
<div class="row">
<button class="col-md-12" id="equal">=</button>
</div>
</div>
</div>
Note: Check the above example in full screen mode.

Answer 3

HTML
Add a class calculator
<div class="row calculator">
<div class="col-md-9">
<div class="row">
<button class="col-md-4">1</button>
<button class="col-md-4">2</button>
<button class="col-md-4">3</button>
</div>
<div class="row">
<button class="col-md-8">0</button>
<button class="col-md-4">.</button>
</div>
</div>
<div class="col-md-3">
<button class="col-md-12" id="equal">=</button>
<br/>
</div>
</div>
CSS:
Remove Paddings.
.calculator .col-md-9{
padding-right:0;
}
.calculator .col-md-3{
padding-right:0;
}

Answer 4

You missed to wrap button tag in row class like below code
<div class="row">
<div class="col-md-9">
<div class="row">
<button class="col-md-4">1</button>
<button class="col-md-4">2</button>
<button class="col-md-4">3</button>
</div>
<div class="row">
<button class="col-md-8">0</button>
<button class="col-md-4">.</button>
</div>
</div>
<div class="col-md-3">
<div class="row">
<button class="col-md-12" id="equal">=</button>
<br/>
</div>
</div>