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

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>