5

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.

doniyor
  • 36,596
  • 57
  • 175
  • 260
cdipaolo
  • 229
  • 1
  • 2
  • 10
  • 7
    A legit question that Is not a duplicate b/c it asks specifically about Bootstrap. The linked-to page is general and therefore does not address Bootstrap-specific solutions. – Matthew Cornell Sep 28 '16 at 19:55
  • @MatthewCornell - idk, it's like asking how to do something in jQuery and getting pointed to a completely viable javascript solution. Unless you go out of your way to indicate that vanilla js (or in this case css) is not what you're looking for, it does seem to 100% answer the question using the available language and tools. In this case, OP was even looking to avoid bootstrap style `col` containers. – KyleMit Sep 15 '17 at 18:46

1 Answers1

22

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 });
KyleMit
  • 30,350
  • 66
  • 462
  • 664
  • Thanks! Totally works and I just used a different number of columns for mobile, tablet, etc. and hid the other format – cdipaolo Jul 21 '14 at 20:27
  • @user3781614, awesome! Make sure you upvote answers you find helpful and accept answers that best solve your issue for this, and other questions on SO. – KyleMit Jul 21 '14 at 20:30
  • yeah I will once I have the necessary rep points. – cdipaolo Jul 21 '14 at 20:34