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



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:



&lt;div class="container m-5 d-flex flex-md-row align-items-start align-items-stretch hidden-print"&gt;
  &lt;div class="d-flex justify-content-start col-6"&gt;
    &lt;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"&gt;&lt;i class="fa fa-chevron-left" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;button type="button" class="btn btn-secondary btn-navigation mr-2 bg-gray-900 text-muted border-0 rounded-0"&gt;Previous
   &lt;br&gt;
      &lt;a href="#" class="wordwrap"&gt;The title of the previous post&lt;/a&gt;
   &lt;/button&gt;
  &lt;/div&gt;

  &lt;div class="d-flex justify-content-end ml-auto col-6"&gt;
    &lt;button type="button" class="btn btn-secondary btn-navigation bg-gray-900 text-muted border-0 rounded-0"&gt;Next
   &lt;br&gt;
      &lt;a href="#" class="wordwrap"&gt;The title of the next post. It might be long. Very very long&lt;/a&gt;
   &lt;/button&gt;
    &lt;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"&gt;&lt;i class="fa fa-chevron-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;


CSS:



.wordwrap {
  white-space: normal;
}

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

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

}


CodePen with the code
Having an a element inside a button element is not valid. You can’t nest "interactive" elements.

As these are links (navigating to resources) and not buttons (changing state), you should use the a element instead of the button element.

When using a, you could use the next and prev link types.

Using the br element in this context is possibly not appropriate. It must only be used for meaniningful line breaks. But if you can’t use a colon to separate the label from the title (e.g., for text browser users), using br might make sense.

You could use the cite element for the titles of the linked posts.

So the plain HTML could look like this:

&lt;a href="#" rel="prev"&gt;Previous: &lt;cite&gt;The title of the previous post&lt;/cite&gt;&lt;/a&gt;
&lt;a href="#" rel="next"&gt;Next: &lt;cite&gt;The title of the next post. It might be long. Very very long&lt;/cite&gt;&lt;/a&gt;


If you need additional elements for your font-based icons, you should use the span element instead of the i element. The meaning of i doesn’t cover decorative icons.