I have an issue when using Low Alphabet in Bootstrap with the layout, which i don't get if I take Low Alphabet out of the code.

The issue is at the end of this page URL below, the last two images do not line up and instead one drops and the other goes to the right, when it should flow to the left.


The code I'm using is below. The Low Alphabet codeworks perfect, however its the formatting that is the issue and this only happend when using Low Alphabet.

<div class="row">
{exp:low_alphabet:entries channel="who-we-are" alpha_filter="{title}" orderby="surname" limit="20"}
<div class="col-lg-4 portrait">
<a href="{url_title_path='who-we-are/profile'}">
<img class="img-responsive" src="{profile_thumbnail}" />
<h3 class="entry-title">{first_name} {surname}</h3>

I would be very grateful if anyone could help.


This has nothing to do with Low Alphabet. It's a layout issue where you're not taking two lines of content into account with floats. See this screenshot:

Mis-aligned boxes

You can see that Simon's description spans 2 lines, which makes the containing box larger, mis-aligning the box below. In the source, I edited the description to be only one line:

Dandy boxes

Voilà, everything lines up just fine.

Change your css to take this into account, and that should solve it.

  • Dear Low, Thank you for your help, it is very much appreciated, such a simple solution. Sep 8 '15 at 12:34

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.