Search code examples
htmlcsstwitter-bootstrapline-breaks

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

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 2 blocks on the same line (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 !

Solution

  • 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>