Why is my column-count not working with Bootstrap in Chrome?

Question

I tried displaying multiple buttons in columns using

.columnized {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

and markup

<div class="columnized col-md-6">
    <p>
        <button type="button" class="btn btn-default btn-xs">text</button>
    </p>
    <!-- ... more buttons ... -->
</div>

but the entire div is showing like a line and all the ps looks like they are floated to the right.

It's curious that this works in Firefox 28 and even Internet Explorer 10 and not in Chrome 33.

score 12 · Accepted Answer · answered Apr 04 '14 at 07:31

12

I was using Twitter's Bootstrap and the .col-md-6 has defined min-height as 1px, hence the thin line.

I managed to solve it by adding min-height: initial to my columnized class.

Hope this helps others that bump against this odd problem.

answered Apr 04 '14 at 07:31

Iulian Onofrei

9,188
10
67
113

1

Yep this worked for me too. How did you figure out that `initial` would work? – Yes Barry Aug 26 '14 at 05:58
1

Worked! Here Bootstrap keeps adding min-height property – Rajitha Bandara Feb 26 '15 at 13:19

score 5 · Answer 2 · answered Mar 16 '16 at 16:02

I also found that using

-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;

and

break-inside: avoid-column;
-webkit-column-break-inside: avoid;

solved problems with content breaking vertically between columns.

The column-count tag is easier to implement than floating divs, the main difference being that column content is ordered vertically, while floated content is ordered horizontally. Hope this helps.

Why is my column-count not working with Bootstrap in Chrome?

2 Answers2