CODEWITHSUNDEEP
htmlbootstrap-4
Guy Cohen
Guy Cohen

Reputation: 21

rendundant spacing between bootstrap buttons

I have two buttons side by side and for some reason, I have some spacing between them, it's spacing that I can't inspect.

this is the spacing: image

<div>
       <button h class="btn btn-responsive margin-right-12" style="background: #C8CED7;">
                        Cancel
                    </button>
       <button  class="btn btn-responsive"  style="background: #C8CED7;">SEND</button>
</div>

jsfiddle example: link

Upvotes: 0

Views: 35

Answers (1)

Rok Benko
Rok Benko

Reputation: 22910

It's because you put each button in a new line. It has nothing to do with font size as @Naren suggested.

Each button in a new line:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div>
  <div class="btn btn-responsive margin-right-12" style="background: #C8CED7;">Cancel</div>
  <div class="btn btn-responsive blue-marketlog" style="background: #C8CED7;">SEND</div>
</div>

Buttons next to each other:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div>
  <div class="btn btn-responsive margin-right-12" style="background: #C8CED7;">Cancel</div><div class="btn btn-responsive blue-marketlog" style="background: #C8CED7;">SEND</div>
</div>

Upvotes: 1

Related Questions