<h1> followed by <div display: block> => no break line? - html

Question

I'm removing most <br> from my HTML and trying to replace it with CSS. I've tried several techniques but none on them worked for me, what am I doing wrong ?
Using Bootstrap 4, I've try adding the class d-block to my elements (h1 and the following div),
I've tried adding margin/padding bottom with CSS,
or, as in Bootstrap documentation, embed it into <span> and add the same classes (d-block p-2)
I've also tried adding CSS to <h1>, such as :
.h1 {
width: 100%;
display: block;
padding-bottom: 10px;
}
.h1::after {
content: '\A';
white-space: pre;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<h1 class="d-block">Portfolio</h1>
<!-- Mosaic buttons -->
<div class="d-block">
<button class="btn btn-outline-light filter-button mr-2" data-filter="all">ALL</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="demo">SOUND DESIGN</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="album">MUSIC</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="samplepack">SAMPLEPACKS</button>
</div>
On StackOverflow, the snippet works fine, but here's the result I've locally (can't manage to reproduce it here)
I'm expecting the buttons to sit under the <h1> tag (instead of on its right)
Here's the website before I remove all the (slow and bugged) : https://staging-det-music.herokuapp.com/
If anyone is interested, the git repo: https://gitlab.com/kawsay/det
What am I missing ? Any help would be gratefully received !

Answer 1

if you want to display buttons in column
<div class="d-flex flex-column">
<h1>Portfolio</h1>
<button class="btn btn-outline-light filter-button mr-2" data-filter="all">ALL</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="demo">SOUND DESIGN</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="album">MUSIC</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="samplepack">SAMPLEPACKS</button>
</div>
if you want to display buttons next to each other
<div class="d-flex flex-column">
<h1>Portfolio</h1>
<div class="d-flex flex-row">
<button class="btn btn-outline-light filter-button mr-2" data-filter="all">ALL</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="demo">SOUND DESIGN</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="album">MUSIC</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="samplepack">SAMPLEPACKS</button>
</div>