{# Switch to icon instead of text in `sm` view size for BS3 only. #}
<hr>
<ul class="nav">
  {%- if prev %}
  <li>
    <a href="{{ prev.link|e }}" title="{{ _('Previous Chapter: ') + prev.title|striptags }}">
      {{ "&laquo;"|safe }} {{ prev.title|striptags|truncate(length=24, killwords=True) }}
    </a>
  </li>
  {%- endif %}
  {%- if next %}
  <li>
    <a href="{{ next.link|e }}" title="{{ _('Next Chapter: ') + next.title|striptags }}">
      {{ next.title|striptags|truncate(length=24, killwords=True) }} {{ "&raquo;"|safe }}
    </a>
  </li>
  {%- endif %}
</ul>

{# Switch to icon instead of text in `sm` view size for BS3 only. #}
<hr>
<ul class="nav">
  {%- if prev %}
  <h5>Previous topic</h5>
  <li>
    <a href="{{ prev.link|e }}" title="{{ _('Previous Chapter: ') + prev.title|striptags }}">
      {{ prev.title|striptags|truncate(length=24, killwords=True) }}
    </a>
  </li>
  {%- endif %}
  {%- if next %}
  <h5>Next topic</h5>
  <li>
    <a href="{{ next.link|e }}" title="{{ _('Next Chapter: ') + next.title|striptags }}">
      {{ next.title|striptags|truncate(length=24, killwords=True) }}
    </a>
  </li>
  {%- endif %}
</ul>

Use "Previous topic" / "Next topic"
Use "Previous topic" / "Next topic"
