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;">
    <p>Praesentium et modi molestiae voluptatibus iste laboriosam omnis consequatur. Iure libero quos repellendus placeat. Tempore voluptate molestiae aut omnis suscipit tempore non nulla. Sit mollitia necessitatibus quia nemo vitae veniam rerum. Officia praesentium et hic. Qui velit in dolorem recusandae repellendus aspernatur id.</p>
    <p>Doloremque recusandae dolorum sequi. Explicabo ipsam dolore et et impedit. Natus quam enim magni impedit sapiente illo aliquid consectetur. Corrupti placeat omnis totam. Provident quo sit qui velit aperiam quo eos.</p>
    <p>Velit nulla veritatis voluptatem vitae rerum aperiam. Cupiditate quasi provident rerum iusto nostrum numquam. Qui voluptatibus dolor eaque quaerat voluptatum fugit. Quia nostrum rerum explicabo optio optio ad. Sed laudantium consequatur ipsum deserunt dolore ipsa debitis sequi. Asperiores doloremque laboriosam quam tempora.</p>
    <p>Ducimus in nesciunt vel laudantium officia odit occaecati. Ex et repellendus sint fugit. Amet sequi assumenda at veritatis voluptas velit quidem placeat. Vero aut ullam et voluptate nihil velit id modi. Sapiente nam aperiam voluptatum ullam necessitatibus rem accusantium at.</p>
    <p>Incidunt eius animi ea corrupti aut consequuntur consequuntur. Odio perspiciatis unde asperiores esse. Aut explicabo fugit quasi.</p>
  </div>

Which gives you this…

Praesentium et modi molestiae voluptatibus iste laboriosam omnis consequatur. Iure libero quos repellendus placeat. Tempore voluptate molestiae aut omnis suscipit tempore non nulla. Sit mollitia necessitatibus quia nemo vitae veniam rerum. Officia praesentium et hic. Qui velit in dolorem recusandae repellendus aspernatur id.

Doloremque recusandae dolorum sequi. Explicabo ipsam dolore et et impedit. Natus quam enim magni impedit sapiente illo aliquid consectetur. Corrupti placeat omnis totam. Provident quo sit qui velit aperiam quo eos.

Velit nulla veritatis voluptatem vitae rerum aperiam. Cupiditate quasi provident rerum iusto nostrum numquam. Qui voluptatibus dolor eaque quaerat voluptatum fugit. Quia nostrum rerum explicabo optio optio ad. Sed laudantium consequatur ipsum deserunt dolore ipsa debitis sequi. Asperiores doloremque laboriosam quam tempora.

Ducimus in nesciunt vel laudantium officia odit occaecati. Ex et repellendus sint fugit. Amet sequi assumenda at veritatis voluptas velit quidem placeat. Vero aut ullam et voluptate nihil velit id modi. Sapiente nam aperiam voluptatum ullam necessitatibus rem accusantium at.

Incidunt eius animi ea corrupti aut consequuntur consequuntur. Odio perspiciatis unde asperiores esse. Aut explicabo fugit quasi.

Resize the browser window’s width and the text will flow from one column to another. Pretty cool, eh?

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.