07 November 2019

Flowing Text Between Columns in HTML (CSS)

When laying out text, narrow columns of text are a bit easier to read than super wide lines of text. Graphic designers often break up longer blocks of text into thinner columns to enhance readability. Newspapers have done this for centuries.

In HTML we could easily determine in advance how much text to put into each column, but it would be much nicer to put it all inside one div. Plus, if this text is coming from a CMS you don’t want the user to figure out how much to put in each column.

Instead we want the text to flow from column to column like a word processing application would do. Turns out, this is fairly easy to do in HTML with some CSS3. It is well supported as well (IE 10+). The resulting HTML is pretty simple.

<div style=”column-count: 3;”>lots of text here</div>

One downside is that it isn’t responsive. It would be handy to use media queries so that on a smaller mobile phone you have one column, two columns for a phablet, three columns for a tablet, four columns on desktop, etc.

I’m often working within Bootstrap and figured there were likely some mixins I could hook into to build responsive columns. And there are.

This works like many other Bootstrap column things and uses their predefined media queries. Want one column? That’s the default. Want two columns on size sm and up? .column-count-sm-2. Four columns on desktop? .column-count-md-4.

Presto.