I have a series of links that I want to display inline. For some reason this was working in Bootstrap 3 but since upgrading to Bootstrap 4 I can no longer get the links to display inline. I’ve tried using floats and display:inline or display:inline-block on the various elements but I can’t seem to get it to work. Here is a code pen where I’ve been trying: https://codepen.io/xanabobana/pen/pobRxpx

And my code:

.speciesDiv {
    display: inline;
    margin: 0.3em;
}

.label-success {
    background-color: #5cb85c;
}
.label {
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}

.scrolldown-click {
  display:inline;
  float:left;
}

<div class="list-group" id="speciesList">
    <p>Jump to:</p>

        <a class='scrolldown-click' role='button' href='#0-species-div'><div class='label label-sm label-success speciesDiv'>Abies balsamea</div></a>
  
        <a class='scrolldown-click' role='button' href='#58-species-div'><div class='label label-sm label-success speciesDiv'>Acer rubrum</div></a>
  
        <a class='scrolldown-click' role='button' href='#43-species-div'><div class='label label-sm label-success speciesDiv'>Acer saccharum</div></a>

</div>

>Solution :

You can use Flexbox to achieve it.

Add following CSS

.list-group {
  display: flex;
  flex-direction: row;
}

CodePen