CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbuttonspacing
koldoon
koldoon

Reputation: 191

How to add spacing between bootstrap buttons like in example?

There is a comprehensive example of bootstrap button on the official website, but I can't figure out why there is a spacing between the buttons and how to do the same? Any browser debug tool does not show anything: there are some top and bottom margins but nothing about horizontal spacing! Can anyone explain?

https://getbootstrap.com/docs/4.3/components/buttons/ bootstrap button example

Upvotes: 0

Views: 3910

Answers (4)

Robert
Robert

Reputation: 6967

The spacing you are describing is what happens when you have multiple display:inline-block elements with the code that creates them each on their own line.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<p>These buttons will appear with spacing between them.</p>

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>

<hr />

<p>These buttons will not.</p>

<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button>

There are any number of ways to add the spacing manually using the .m-*-* utility class or other custom CSS. Or you can simply output your HTML with each button on a new line.

Upvotes: 0

Cat
Cat

Reputation: 177

Since you are using bootstrap 4, you could also add the class "mr-1" to your buttons; that way you don't have to change the css (unless you want to :) ).

Upvotes: 1

Michael
Michael

Reputation: 11

This is due to their reboot stylesheet which styles the documentation you are looking at.

If you pull up a google element inspector their is actually a total of 2 maring and 6px padding on the left and right side of the buttons. This will not apply to the buttons that you use in your templates.

Upvotes: 0

johannchopin
johannchopin

Reputation: 14844

Just add in your styles something like :

button.btn {
    margin: 0 1px;
}

But be sure that it doesn't impact other styles that you wrote before

Upvotes: 1

Related Questions