How do I create a responsive multi-column unordered list within a column in Bootstrap 4?

Question

I am trying to create a multi-column unordered list that I can center relative to its heading. I have tried some methods that I found to create the two column , but I am unable to successfully get it to center underneath a heading, or control the padding between the columns of the . When I do get the aesthetic to look as I wish however, generally using left padding, it loses responsiveness and looks very ugly.is the best way to create a multi-column such as

What I am trying to achieve: What I'd like

Picture of what I currently have: What I currently have

See Code and Style Sheet:

  @import url('https://fonts.googleapis.com/css?family=Nunito:400,700,800|Open+Sans:400,700,800');
html,
body {
  height: 100%;
  //width: 100%;
  min-width: 300px;
  margin: 0px;
  padding: 0px;
  font-family: 'Open Sans', sans-serif !important;
}

.navbar {
  font-family: 'Nunito', sans-serif !important;
}

h1,
h2,
h3,
h4,
{
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 400
}

h5,
h6 {
  font-family: 'Nunito', sans-serif !important;
  font-weight: 800;
}

.inlineFontChange {
  display: inline;
}


/*.progress{
    flex-direction: row;
    }
    */

.ulCenter {
  display: flex;
  justify-content: center;
}

p {
  text-align: justify;
  color: #3B424C;
}

#profilePic {
  margin-left: 20px;
  margin-top: 28px;
  margin-bottom: 10px;
  float: right;
}

@media only screen and (max-width: 480px) {
  #profilePic {
    float: none;
    margin: 0 auto;
    justify-content: center;
    display: block;
  }
}

// .navbar{
// background-color: #3B424C; //This is the color of the actual          background; navbar-dark-color is the link color!
//background:none !important;
// width: 100%;
// }
.jarallax {
  position: relative;
  z-index: 0;
}

.jarallax>.jarallax-img {
  position: absolute;
  object-fit: cover;
  /* support for plugin https://github.com/bfred-it/object-fit-images */
  font-family: 'object-fit: cover;';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}


/* Help from: https://free.nkdev.info/jarallax/*/

.overlay {
  display: table;
  width: 100%;
  height: 75vh;
  background-color: rgba(190, 190, 190, 0.6);
}

@media only screen and (max-height: 740px) {
  .overlay {
    height: 100vh;
  }
}

.overlay-cell {
  position: absolute;
  left: 0;
  //top: 35%;
  top: 34%;
  width: 100%;
  text-align: center;
}

.heroSection {
  height: 100vh; //Controls the height of the Hero
}

.subSection {
  height: 300px; //Controls the height of the subsection jarallax
  margin: 0;
}

#baseNav {
  //font-family: 'Yantramanav', sans-serif;
  //font-weight: 700;
  //font-size: 20px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  //overflow: hidden;
  //background-color: #3b424c;
  position: fixed;
  top: 0;
  width: 100%;
  transition: all 200ms ease-in-out;
}

#baseNav.hide {
  transform: translateY(-100%);
}

.navbar {
  top: 0;
  margin: 0;
  position: fixed; //THIS IS KEY! IN ORDER TO GET NAV OVER PICTURE
  width: 100%
}

.navbar-nav .nav-link {
  font-size: 1.2rem;
  font-weight: bold;
  @media (max-width: 34em) {
    font-weight:normal;
  }
  .navbar-nav .nav-item {
    padding: 0 1rem;
    @media(max-width: 34 em) {
      padding: 0;
    }
  }
}

.navbar-toggler {
  cursor: pointer;
}

// This adjusts the Main Menu and Dropdown (submenu) colors
$bgMain: rgba(59,
66,
76,
0); // This color '0' at the end is for       transparency for navbar hiding
$bgDropdown: rgba(59,
66,
76,
1);
$bgHighlight: hsl(184,
85%,
43%);
$colDefault: #ffffff;
$colHighlight: #95ce33;
$dropDown: true;
.navbar {
  background-color: $bgMain;
  .navbar-brand {
    color: $colDefault;
    &:hover,
    &:focus {
      color: $colHighlight;
    }
  }
  .navbar-text {
    color: $colDefault;
  }
  .navbar-nav {
    .nav-link {
      color: $colDefault;
      border-radius: .25rem;
      margin: 0 0.25em;
      &:not(.disabled) {
        &:hover,
        &:focus {
          color: $colHighlight;
        }
      }
    }
    @if ($dropDown) {
      .dropdown-menu {
        background-color: $bgDropdown;
        border-color: $bgHighlight;
        .dropdown-item {
          color: $colDefault;
          &:hover,
          &:focus,
          &.active {
            color: $colHighlight;
            background-color: $bgHighlight;
          }
        }
        .dropdown-divider {
          border-top-color: $bgHighlight;
        }
      }
    }
    .nav-item.active,
    .nav-item.show {
      .nav-link,
      .nav-link:hover,
      .nav-link:focus {
        color: $colHighlight;
        background-color: $bgHighlight;
      }
    }
  }
  .navbar-toggle {
    border-color: $bgHighlight;
    &:hover,
    &:focus {
      background-color: $bgHighlight;
    }
    .navbar-toggler-icon {
      color: $colDefault;
    }
  }
  .navbar-collapse,
  .navbar-form {
    border-color: $colDefault;
  }
  .navbar-link {
    color: $colDefault;
    &:hover {
      color: $colHighlight;
    }
  }
}

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu {
    .dropdown-item {
      color: $colDefault;
      &:hover,
      &:focus {
        color: $colHighlight;
      }
    }
    .dropdown-item.active {
      color: $colHighlight;
      background-color: $bgHighlight;
    }
  }
}

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu {
    .dropdown-item {
      color: $colDefault;
      &:hover,
      &:focus {
        color: $colHighlight;
      }
    }
    .dropdown-item.active {
      color: $colHighlight;
      background-color: $bgHighlight;
    }
  }
}

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu {
    .dropdown-item {
      color: $colDefault;
      &:hover,
      &:focus {
        color: $colHighlight;
      }
    }
    .dropdown-item.active {
      color: $colHighlight;
      background-color: $bgHighlight;
    }
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu {
    .dropdown-item {
      color: $colDefault;
      &:hover,
      &:focus {
        color: $colHighlight;
      }
    }
    .dropdown-item.active {
      color: $colHighlight;
      background-color: $bgHighlight;
    }
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu {
  .dropdown-item {
    color: $colDefault;
    &:hover,
    &:focus {
      color: $colHighlight;
    }
  }
  .dropdown-item.active {
    color: $colHighlight;
    background-color: $bgHighlight;
  }
}

#about {
  padding-top: 3em;
  padding-bottom: 3em;
}

#mainOverlay {
  margin: 0;
}

.logoImages {
  margin: auto;
  display: block;
}

//This is for the FA Icon alignment in the Skills list
dl {
  margin-left: 40px
}

dt {
  font-size: 1.3em;
  position: relative;
}

dt:not(:first-of-type) {
  margin-top: 2em
}

dt:before {
  content: "";
  font-family: FontAwesome;
  left: -40px;
  position: absolute;
  top: 5px;
}

dt.achievement:before {
  content: "\f091";
  //These two nested lines control the FA Icon animation! because of the  fact i am using a ::before element, I cannot use the native fa spinning classes explicitly in the html
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

dt.academic:before {
  content: "\f19d";
}

dd {
  margin-left: 0
}

dd.description {
  font-size: 1 em;
}

/////
.Test {
  columns: 2;
  -webkit-columns: 2;
  //padding-right: em;
  //float:center;
  -moz-columns: 2;
  justify-content: center;
  ul {
    margin-left: 40px
  }
  li {
    font-size: 1.3em;
    position: relative;
  }
  li:not(:first-of-type) {
    margin-top: 2em
  }
  li:before {
    content: "";
    font-family: FontAwesome;
    left: -40px;
    position: absolute;
    top: 5px;
  }
  li.achievement:before {
    content: "\f091";
    //These two nested lines control the FA Icon animation! because of the  fact i am using a ::before element, I cannot use the native fa spinning classes explicitly in the html
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
  }
  li.puzzle:before {
    content: "\f12e";
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
  }
  li.wrench:before {
    content: "\f0ad";
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
  }
  li.academic:before {
    content: "\f19d";
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
  }
  li.plane:before {
    content: "\f072";
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
  }
  li.car:before {
    content: "\f1b9";
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
  }
  li.volunteer:before {
    content: "\f0c0";
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
  }
  li.camera:before {
    content: "\f030";
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
  }
  .honors {
    float: right;
  }

<div data-jarallax data-speed="0.6" class="jarallax">
  <img class="jarallax-img" src="assets/skills.jpg" alt="">
  <div class="overlay subSection container-fluid">
    <div class="row justify-content-center">
      <div class="overlay-cell clearfix">
        <div class="col-sm-12">
          <h1 class="display-2 ">Skills</h1>
        </div>
      </div>
    </div>
  </div>
</div>

<section id="about">
  <h5 class="text-center pb-3">Ready to tackle any challenge. Proven by performance.</h5>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-5">
        <!--- Instruments -->
        <h4 class="text-center pt-3">Instruments</h4>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">CombiFlash® Rf+ </div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Mass Spectrometer (GC-MS, ESI-MS, APCI-MS)</div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">NMR</div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">UV-Vis Spectrophotometer </div>
        </div>
        <!--- Languages -->
        <h4 class="text-center pt-5">Languages</h4>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">English </div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Español</div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Français</div>
        </div>
        <!--- Software -->
        <h4 class="text-center pt-5">Software</h4>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">ChemDraw </div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Spartan ’16</div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Bruker® TopSpin</div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Adobe® Suite (Illustrator, Photoshop, and etc..)</div>
        </div>
        <div class="progress mb-3" style="height: 35px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Wolfram® Mathematica</div>
        </div>
      </div>

      <div class="col-md-5 honors offset-md-2">
        <h4 class="text-center pt-3">Honors and Awards</h4>
        <dl>
          <dt class="achievement">Boy Scouts of America Eagle Scout Rank</dt>
          <dd class="description">The Highest Rank in Scouting</dd>
          <dd>April 2014</dd>

          <dt class="academic">Principal's Award of Excellence </dt>
          <dd class="description">Recognized for Scientific Research</dd>
          <dd>June 2013 & 2014</dd>


          <dt class="academic fa-spinner">Presidents Award for Educational Excellence</dt>
          <dd class="description">U.S. Department of Education | President Barack H. Obama</dd>
        </dl>

        <h4 class="text-center pt-3">Hobbies and Interests</h4>
        <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>
  </div>
</section>

UPDATED HTML:

<section id="about">
<h5 class="text-center pb-3">Ready to tackle any challenge. Proven by 
performance.</h5>
<div class="container">
    <div class="row justify-content-center">
          <div class="col-md-5">
              <!--- Instruments -->
              <h4 class="text-center pt-3">Instruments</h4>
              <div class="progress mb-3" style="height: 35px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">CombiFlash® Rf+ </div>
              </div>
              <div class="progress mb-3" style="height: 35px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Mass Spectrometer (GC-MS, ESI-MS, APCI-MS)</div>
              </div>
              <div class="progress mb-3" style="height: 35px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">NMR</div>
              </div>
              <div class="progress mb-3" style="height: 35px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">UV-Vis Spectrophotometer </div>
              </div>
              <!--- Languages -->
              <h4 class="text-center pt-5">Languages</h4>
              <div class="progress mb-3" style="height: 35px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">English </div>
              </div>
              <div class="progress mb-3" style="height: 35px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Español</div>
              </div>
              <div class="progress mb-3" style="height: 35px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Français</div>
              </div>
              <!--- Software -->
              <h4 class="text-center pt-5">Software</h4>
              <div class="progress mb-3" style="height: 35px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">ChemDraw </div>
              </div>
              <div class="progress mb-3" style="height: 35px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Spartan ’16</div>
              </div>
              <div class="progress mb-3" style="height: 35px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Bruker® TopSpin</div>
              </div>
              <div class="progress mb-3" style="height: 35px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Adobe® Suite (Illustrator, Photoshop, and etc..)</div>
              </div>
              <div class="progress mb-3" style="height: 35px">
                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 75%">Wolfram® Mathematica</div>
              </div>
          </div>

          <div class="col-md-5 honors offset-md-2">
              <h4 class="text-center pt-3">Honors and Awards</h4>
              <dl>
                  <dt class="achievement">Boy Scouts of America Eagle Scout Rank</dt>
                  <dd class="description">The Highest Rank in Scouting</dd>
                  <dd>April 2014</dd>

                  <dt class="academic" >Principal's Award of Excellence </dt>
                  <dd class="description">Recognized for Scientific Research</dd>
                  <dd>June 2013 & 2014</dd>


                  <dt class="academic fa-spinner" >Presidents Award for Educational Excellence</dt>
                  <dd class="description">U.S. Department of Education | President Barack H. Obama</dd>
              </dl>

              <h4 class="text-center pt-5">Hobbies and Interests</h4>
              <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>
                </div>
            </div>
          </div>

UPDATED SCSS:

.honors{
float: right;
}


li.puzzle::before {
font-family: "FontAwesome";
content: "\f12e";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.wrench::before {
font-family: "FontAwesome";
content: "\f0ad";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.plane::before {
font-family: "FontAwesome";
content: "\f072";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.car::before {
font-family: "FontAwesome";
content: "\f1b9";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.volunteer::before {
font-family: "FontAwesome";
content: "\f0c0";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}
li.camera::before {
font-family: "FontAwesome";
content: "\f030";
margin-right: 8px;
display: inline-block;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }

100% {
  -webkit-transform: rotate(359deg);
  transform: rotate(359deg);
}
}



dl {margin-left: 40px}

.ulCenter{
display: flex;
justify-content: center;
}



dt {font-size: 1.3em;position:relative;}
dt:not(:first-of-type) {margin-top: 2em}

dt:before {
content: ""; 
font-family: FontAwesome;
left: -40px;
position:absolute;
top: 5px;
}

dt.achievement:before {
content: "\f091"; 

//These two nested lines control the FA Icon animation! because of the 
fact i am using a ::before element, I cannot use the native fa spinning 
classes explicitly in the html
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;
}

dt.academic:before {
content: "\f19d"; 
}


dd {margin-left: 0}
dd.description {font-size: 1 em;}

So, is the issue all about the "Hobbies and Interests" list? — WebDevBooster
– WebDevBooster, Commented Jan 25, 2018 at 1:43
@WebDevBooster, yes it is. I just included the other code from this section in case some of my design choices may conflict with any suggestions that may be provided for this new question — Joseph Romo
– Joseph Romo, Commented Jan 25, 2018 at 1:45

WebDevBooster · Accepted Answer · 2018-01-25 04:33:23Z

1

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>

The css rule column-count: 2 will automatically split the contents into 2 css columns.

To demonstrate that this actually works, here is a working solution with everything wrapped into a container in this case (you don't want to use the container in your case because you already have one):

<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>
    li.puzzle::before {
        font-family: "FontAwesome";
        content: "\f12e";
        margin-right: 8px;
        display: inline-block;
        -webkit-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
    }
    li.wrench::before {
        font-family: "FontAwesome";
        content: "\f0ad";
        margin-right: 8px;
        display: inline-block;
        -webkit-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
    }
    li.plane::before {
        font-family: "FontAwesome";
        content: "\f072";
        margin-right: 8px;
        display: inline-block;
        -webkit-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
    }
    li.car::before {
        font-family: "FontAwesome";
        content: "\f1b9";
        margin-right: 8px;
        display: inline-block;
        -webkit-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
    }
    li.volunteer::before {
        font-family: "FontAwesome";
        content: "\f0c0";
        margin-right: 8px;
        display: inline-block;
        -webkit-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
    }
    li.camera::before {
        font-family: "FontAwesome";
        content: "\f030";
        margin-right: 8px;
        display: inline-block;
        -webkit-animation: fa-spin 2s infinite linear;
        animation: fa-spin 2s infinite linear;
    }
    
    @keyframes fa-spin {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
        }
    }
</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>

Notice the use of the list-unstyled class on the ul. That removes the bullet points.

To adjust the alignment on the left of the list items, add classes like pl-2 or pl-3 etc. to the li elements (alternatively, you could add margin-left: 8px; etc. in custom css of the individual icons). To adjust the distance between the icons and the terms, increase or decrease the value of margin-right: 8px; in custom css of the individual icons. To adjust where the second column appears, change the value of column-gap: 50px;.

edited Jan 25, 2018 at 4:33

answered Jan 25, 2018 at 1:52

WebDevBooster

15k9 gold badges69 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

18 Comments

Joseph Romo Over a year ago

Hmm, I don't seem to be able to get this to work properly since I have the font awesome code in ".Test". When I use the code above, the formatting gets messed up, and the FA icons get replaced with bullets :/

WebDevBooster Over a year ago

What happens if you add the classes fa fa-camera to one of the li elements?

Joseph Romo Over a year ago

Weirdly enough it doesn't work. No bullet or icon will appear. Just a blank space will take its place. This is a similar problem I had with another part of my site I was working on. The methodology I applied for this 'Hobbies' section came from the solution to the other issue: stackoverflow.com/questions/48333612/… But I don't think this might be the cleanest solution for my purpose? Have any suggestions?

WebDevBooster Over a year ago

Well, that tells you that this is just an issue with where you are loading the FA icons from.

Joseph Romo Over a year ago

Well because it loads when I used what I currently have up on my code. This phenomenon only happens when I use FA stuff in lists and the default fa classes. This is why in my css there’s the icon Unicode and the :before stuff

|

Collectives™ on Stack Overflow

How do I create a responsive multi-column unordered list within a column in Bootstrap 4?

1 Answer 1

18 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

18 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related