Bootstrap columns and type flow problem

I’m using a Wordpress theme that is built with Bootstrap as the framework. I’m having an issue with text alignment.
In the attached image, you will see how when a line of text flows to the second line it does not align with the first line. (the red line is just to show where the text should align). If this was a non-responsive site I could fix it easily, but being responsive it is more challenging.

A simple fix would be to configure this to a 2 columns rather than 4.

http://69.195.124.160/~slavens1/test/property/40-test-property/

Any advice is appreciated.

Ak

I added this code to the HTML page. You can probably put the CSS at the end of your local stylesheet.

<style type="text/css">

.listing-details-value {
    display:inline-block;
    vertical-align:top;
    width:48.5%;
    min-width:none;
}

</style>

I don’t think your markup is semantically correct. You should either use a table or a definition list. Don’t try and use Bootstrap for every element on your page.

You could hope for a quick fix, like the CSS above, or you could take the time to re-write the HTML again properly.

You could use two bootstrap columns and then add in two definition lists, or just use a single bootstrap row and float two definition lists inside that.

1 Like

Brilliant. I used the definition list and it worked perfectly. Thank you Alexholsgrove!

Also, thank you to Ronpat!