Place the unordered list in a row-column pair (nesting) and include style="column-count: 2" within it. All set!
In simpler terms, swap out your current list with this code snippet:
<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>
The addition of the css rule column-count: 2 will automatically divide the content into two columns.
To demonstrate the functionality, here's a complete solution enclosed in a container (although you may not need an additional container in your case):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* CSS styling for icons */
</style>
<div class="container">
<div class="row">
<div class="col" style="column-count: 2; column-gap: 50px;">
<ul class="Test list-unstyled">
<li class= "pb-2 pt-2 puzzle">Puzzles</li>
<li class= "pb-2 wrench">Handy Work</li>
<li class= "pb-2 plane">Travel</li>
<li class= "pb-2 car">Automobiles</li>
<li class= "pb-2 volunteer">Volunteering</li>
<li class= "pb-2 camera">Photography</li>
</ul>
</div>
</div>
</div>
By utilizing the list-unstyled class on the ul, bullet points are eliminated.
To fine-tune left alignment of list items, apply classes such as pl-2 or pl-3 to the li elements (or modify margin-left: 8px; in custom css for individual icons). Adjust spacing between icons and text by altering margin-right: 8px; in custom css for each icon. To reposition the second column, adjust column-gap: 50px;.