How to Create Multi Columns from a Single Unordered List

ul {
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
  <li>item 13</li>
  <li>item 14</li>
  <li>item 15</li>
  <li>item 16</li>
  <li>item 17</li>
  <li>item 18 </li>
  <li>item 19</li>
  <li>item 20</li>
  <li>item 21</li>
</ul>

Ordered/Unordered List on multiple columns

Columns are still a bit buggy. Your example looks fine in Firefox (as long as you've added the -moz- prefix so it works at all). In Chrome, it cuts off the bullet/number as you describe—but you can add list-style-position: inside to change where it gets drawn. This works great if your list items are all one line, but it does change the appearance if they extend to multiple lines.

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 do I create a responsive multi-column unordered list within a column in Bootstrap 4?

Put the unordered list into its own row-column pair (nesting) and add style="column-count: 2" to that. Done!

In other words, replace your list with this code:

<div class="row">    <div class="col" style="column-count: 2">        <ul class="Test">            <li class= "pb-3 puzzle">Puzzles</li>            <li class= "pb-3 wrench">Handy Work</li>            <li class= "pb-3 plane ">Travel</li>            <li class= "pb-3 car">Automobiles</li>            <li class= "pb-3 volunteer">Volunteering</li>            <li class= "pb-3 camera">Photography</li>                  </ul>    </div></div>

ul {  -webkit-column-count: 5;  column-count: 5;}

<ul>  <li><a href="/link.html">Link1</a>  </li>  <li><a href="/link.html">Link2</a>  </li>  <li><a href="/link.html">Link3</a>  </li>  <li><a href="/link.html">Link4</a>  </li>  <li><a href="/link.html">Link5</a>  </li>  <li><a href="/link.html">Link6</a>  </li>  <li><a href="/link.html">Link7</a>  </li>  <li><a href="/link.html">Link8</a>  </li>  <li><a href="/link.html">Link9</a>  </li>  <li><a href="/link.html">Link10</a>  </li></ul>

function addThoseHeadings(elementTagInput, yourHEADING){ 

    var elementTag = $( elementTagInput );

    var allElementsObject = {positions : {}};

    $(elementTag).each(function( index ) {
        var theOffset = $(this).offset();
        allElementsObject.positions[index] = {
            left: theOffset.left,
            top: theOffset.top
        };
    });

    var arr = Object.keys( allElementsObject ).map(function ( key, subkey ) { return allElementsObject[key][subkey]['top']; });
    var minimumOffset = Math.min.apply( null, arr );

    $.each(allElementsObject.positions, function( indexUnwanted, valueOffsets ) {
        if( valueOffsets.top == minimumOffset ){
            var elementToAppendTo = document.elementFromPoint( valueOffsets.left, valueOffsets.top );
            $( elementToAppendTo ).before( '<span class="replaceThese" style="left:'+(valueOffsets.left)+'px;top:'+(valueOffsets.top-35)+'px;">'+yourHEADING+'</span>' );
        }
    });

}

var yourHEADING = "Log No";

addThoseHeadings( "labeldetailsmall", yourHEADING );

$(window).resize(function() {
    $( ".replaceThese" ).remove();
    addThoseHeadings( "labeldetailsmall", yourHEADING );
});

span {
    display: inline-block;
    position: fixed;
}