How to Display List Items as Columns

How to display list items as columns?

This can be done using CSS3 columns quite easily. Here's an example, HTML:

#limheight {    height: 300px; /*your fixed height*/    -webkit-column-count: 3;       -moz-column-count: 3;            column-count: 3; /*3 in those rules is just placeholder -- can be anything*/}
#limheight li {    display: inline-block; /*necessary*/}

<ul id = "limheight"> <li><a href="">Glee is awesome 1</a></li> <li><a href="">Glee is awesome 2</a></li> <li><a href="">Glee is awesome 3</a></li> <li><a href="">Glee is awesome 4</a></li>     <li><a href="">Glee is awesome 5</a></li> <li><a href="">Glee is awesome 6</a></li> <li><a href="">Glee is awesome 7</a></li> <li><a href="">Glee is awesome 8</a></li> <li><a href="">Glee is awesome 9</a></li> <li><a href="">Glee is awesome 10</a></li> <li><a href="">Glee is awesome 11</a></li> <li><a href="">Glee is awesome 12</a></li>     <li><a href="">Glee is awesome 13</a></li> <li><a href="">Glee is awesome 14</a></li> <li><a href="">Glee is awesome 15</a></li> <li><a href="">Glee is awesome 16</a></li> <li><a href="">Glee is awesome 17</a></li>     <li><a href="">Glee is awesome 18</a></li> <li><a href="">Glee is awesome 19</a></li> <li><a href="">Glee is awesome 20</a></li></ul>

Display list items as columns

I've got a solution using Flexbox. It requires that your ul has a specified height.

ul {
    display: flex;
    list-style: none;
    flex-direction: column;
    flex-wrap: wrap;

    height: 400px;
}

li {
    flex-basis: 25%;
}

The "flex-direction: column" causes the items to stack vertically. The "flex-wrap: wrap" makes them wrap to the next column when one has been filled. And the "flex-basis: 25%" on the list items makes it so every item is a fourth the height of the parent. So this number can be changed if you want more or less rows per column.

How to display an unordered list in two columns?

Modern Browsers

leverage the css3 columns module to support what you are looking for.

http://www.w3schools.com/cssref/css3_pr_columns.asp

CSS:

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

http://jsfiddle.net/HP85j/8/

Legacy Browsers

Unfortunately for IE support you will need a code solution that involves JavaScript and dom manipulation. This means that anytime the contents of the list changes you will need to perform the operation for reordering the list into columns and reprinting. The solution below uses jQuery for brevity.

http://jsfiddle.net/HP85j/19/

HTML:

<div>
    <ul class="columns" data-columns="2">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
    </ul>
</div>

JavaScript:

(function($){
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1; // account for initial column
    function updateColumns(){
        column = 0;
        columnItems.each(function(idx, el){
            if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns(){
        columnItems.detach();
        while (column++ < initialContainer.data('columns')){
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.columns');
    }

    $(function(){
        setupColumns();
        updateColumns();
    });
})(jQuery);

CSS:

.columns{
    float: left;
    position: relative;
    margin-right: 20px;
}

EDIT:

As pointed out below this will order the columns as follows:

A  E
B  F
C  G
D

while the OP asked for a variant matching the following:

A  B
C  D
E  F
G

To accomplish the variant you simply change the code to the following:

function updateColumns(){
    column = 0;
    columnItems.each(function(idx, el){
        if (column > columns.length){
            column = 0;
        }
        $(columns.get(column)).append(el);
        column += 1;
    });
}

how to display a list in 3 columns

If you want 3 columns with bootstrap it's class col-4 you need (12 bootstrap columns / 3) on your div.

<div class="row">
    <div *ngFor="let item of list" class="col-4">
        <input type="checkbox" [(ngModel)]="item.value" />
        <label> {{item.name}} </label>
    </div>
</div>