Bootstrap Writing In Columns (like a newspaper)

I'm using django and bootstrap, and I was wondering if there was a way to write in columns like a newspaper does. Obviously it is easy to create columns in bootstrap, but I was wondering how to have the text divide itself into the columns nicely so there is not one column that is longer. Also I would include a 'writers' section at the top of one of the columns so I would need to account for that.

I am thinking of just dividing the words in the columns by the number of columns but then I think that there would be one run on column, mostly because of the writers section.

Answer

July 21, 2014

KyleMit

For browsers that support it, you can use columns css3 property:

.twoColumns{
    -webkit-column-gap: 20px;
       -moz-column-gap: 20px;
            column-gap: 20px;
    -webkit-column-count: 2;
       -moz-column-count: 2;
            column-count: 2;
}

<div class="twoColumns">
    Sed ut perspiciatis unde omnis iste natus error ...
</div>

Demo in Fiddle

If you need to support older browsers, you can use the polyfill here:

https://github.com/BetleyWhitehorne/CSS3MultiColumn

Include the script after your stylesheet and it will convert if neccessary:

<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="css3-multi-column.js"></script>

Or you can do it in Javascript with Columnizer like this:

$('.twoColumns').columnize({ columns: 2 });