I have tried to make two buttons to be used for post navigation below each post on a blog:

[![enter image description here](https://i.stack.imgur.com/2xcqv.png)](https://i.stack.imgur.com/2xcqv.png)

It works, however - it feels like to much code and classes for so little. I'm using Bootstrap 4, alpha 6. Is there any easier way to make something like this?

HTML:

```html
<div class="container m-5 d-flex flex-md-row align-items-start align-items-stretch hidden-print">
  <div class="d-flex justify-content-start col-6">
    <a href="#" role="button" class="btn btn-secondary btn-navigation d-flex align-items-center bg-gray-800 border-0 rounded-0 hidden-sm-down"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
    <button type="button" class="btn btn-secondary btn-navigation mr-2 bg-gray-900 text-muted border-0 rounded-0">Previous
   <br>
      <a href="#" class="wordwrap">The title of the previous post</a>
   </button>
  </div>

  <div class="d-flex justify-content-end ml-auto col-6">
    <button type="button" class="btn btn-secondary btn-navigation bg-gray-900 text-muted border-0 rounded-0">Next
   <br>
      <a href="#" class="wordwrap">The title of the next post. It might be long. Very very long</a>
   </button>
    <a href="#" role="button" class="btn btn-secondary btn-navigation d-flex align-items-center bg-gray-800 border-0 rounded-0 hidden-sm-down"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
  </div>
</div>
</div>

```

CSS:

```css
.wordwrap {
  white-space: normal;
}

.bg-gray-800 {
  background-color: #dfdfdf;
}

.bg-gray-900 {
  background-color: #efefef;

}

```

[CodePen with the code](https://codepen.io/losol/pen/qjVgwx)