twitter bootstrap – multi column dropdown

I’ve solved it by adding class “columns” where I’ve set columns count and drop down width.
Of course you can set columns count and width depending on media queries.

https://jsfiddle.net/maciej_p/eatv1b4b/18/

HTML:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">wybierz region<b class="caret"></b></a>
    <ul class="dropdown-menu columns">
        <li><a href="#"><strong>Górny Śląsk</strong></a></li>
        <li><a href="#">powiat będziński</a></li>
        <li><a href="#">powiat bielski</a></li>
        <li><a href="#">powiat bieruńsko-lędziński</a></li>
        <li><a href="#">powiat cieszyński</a></li>
        <li><a href="#">powiat częstochowski</a></li>
        <li><a href="#">powiat gliwicki</a></li>
        <li><a href="#">powiat kłobucki</a></li>
        <li><a href="#">powiat lubliniecki</a></li>
        <li><a href="#">powiat mikołowski</a></li>
        <li><a href="#">powiat myszkowski</a></li>
    </ul>
</li>

CSS:

@media screen and (max-width: 991px){
    .columns{
        height: 200px;
        overflow-y:scroll;
    }
}

@media screen and (min-width: 992px){
    .columns{
        -moz-column-count:2; /* Firefox */
        -webkit-column-count:2; /* Safari and Chrome */
        column-count:2;
        width: 500px;
        height:170px;
    }
}