CODEWITHSUNDEEP
htmlcssbootstrap-4
Jkzz
Jkzz

Reputation: 15

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

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

Upvotes: 0

Views: 63

Answers (4)

bhansa
bhansa

Reputation: 7504

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.

Upvotes: 1

Kiran Dash
Kiran Dash

Reputation: 4956

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>

Upvotes: 1

Datta Parad
Datta Parad

Reputation: 709

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>

Upvotes: 0

Nandan Bhat
Nandan Bhat

Reputation: 1563

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;
}

Upvotes: 0

Related Questions