3
\$\begingroup\$

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

enter image description here

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:

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

.wordwrap {
  white-space: normal;
}

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

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

}

CodePen with the code

\$\endgroup\$
1
\$\begingroup\$

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:

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

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.

\$\endgroup\$
  • \$\begingroup\$ Thanks for your comments! I have posted updated code based on your review. Getting closer... \$\endgroup\$ – Ole Kristian Losvik Jun 28 '17 at 8:45
0
\$\begingroup\$

Based on review from @unor, I have updated code. The code is cleaner, some more work for me on expanding the background color behind the arrows to expand to the border.

enter image description here

HTML:

<div class="m-2 post-navigation d-flex">
  <a href="#" rel="prev" title="Navigate to the previous post" class="btn bg-gray-950 m-1 col-6 d-flex align-items-stretch rounded-0">
    <span class="fa fa-lg fa-chevron-left d-flex align-items-center mx-2" aria-hidden="true"></span> 
    The title of the previous post
  </a>


  <a href="#" rel="next" title="Navigate to the next post" class="btn bg-gray-950 m-1 col-6 d-flex align-items-stretch flex-row-reverse">
    <span class="fa fa-lg fa-chevron-right d-flex align-items-center mx-2" aria-hidden="true"></span> 
    The title of the next post. It might be long. Very very long
  </a>
</div>

CSS:

.post-navigation a{
  white-space: normal;
}

.post-navigation span{
  background-color: #dfdfdf;
  color: #222222;
}

.bg-gray-950 {
  background-color: #f2f2f2;

}
\$\endgroup\$
  • \$\begingroup\$ If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From Review \$\endgroup\$ – Graipher Jun 28 '17 at 9:56
  • \$\begingroup\$ This is just an iteration of the first question based on the review from unor. Should I edit original question instead? \$\endgroup\$ – Ole Kristian Losvik Jun 28 '17 at 10:35
  • 1
    \$\begingroup\$ Nope, please don't edit the original question, it's not allowed when there are already answers. This self-answer is actually the right way for showing the new code. If there only wasn't this sentence I need the background color to expand to the border it's not clear what you mean here and this kind of questions are not answered on CR. \$\endgroup\$ – t3chb0t Jun 28 '17 at 10:40
  • \$\begingroup\$ Sorry about that, I just felt it was near a better code - however could not solve the last little bit. Have edited the answer. \$\endgroup\$ – Ole Kristian Losvik Jun 28 '17 at 10:47
  • \$\begingroup\$ I converted this to community wiki. If you would like a follow-up review with your improved code (fully working), then please ask a new question. \$\endgroup\$ – Stop ongoing harm to Monica Jun 28 '17 at 11:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.