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, Jan 25 '18 at 01: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, Jan 25 '18 at 01:45

WebDevBooster · Accepted Answer · 2018-01-25T04:33:23.520

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 '18 at 04:33

answered Jan 25 '18 at 01:52

WebDevBooster

14,674
9
66
70

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 :/ – Joseph Romo Jan 25 '18 at 02:16
What happens if you add the classes `fa fa-camera` to one of the `li` elements? – WebDevBooster Jan 25 '18 at 02:25
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: https://stackoverflow.com/questions/48333612/how-to-vertically-align-center-a-font-awesome-icon-with-a-line-of-text-in-bootst But I don't think this might be the cleanest solution for my purpose? Have any suggestions? – Joseph Romo Jan 25 '18 at 02:29
Well, that tells you that this is just an issue with where you are loading the FA icons from. – WebDevBooster Jan 25 '18 at 02:33
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 – Joseph Romo Jan 25 '18 at 02:36
If you load FA in the header from this: `` and then add the `fa fa-camera` classes to one of the `li` elements, you will see a camera appear instead of a bullet. Right? – WebDevBooster Jan 25 '18 at 02:38
Yes It appears, with no space next to the word. And If I use fa-spin to re add the animation I had in the original .Test it will spin the icon AND the text. But still the list is not centered relative to the heading. I'd like to push the second column further to the right too. What I had before worked almost the way I wanted it to except that I wanted to push the second column further right – Joseph Romo Jan 25 '18 at 02:57
Click "run code snippet" next to the second snippet I just added. That gives you a working solution although it works in a slightly different way than what you had originally in mind. – WebDevBooster Jan 25 '18 at 03:05
You can push the second column further to the right by controlling the gap between the columns. To do that add this rule: `column-gap: 40px;` additionally to `column-count: 2;`. That will push the second column 40px to the right. – WebDevBooster Jan 25 '18 at 03:11
I was trying maintain the same spacing between the FA icon and the list item as in the honors and awards section, while keeping the 1st column's icon aligned vertically with those in the honors and awards section, and simply push the second column of the hobbies section more to the right so that the "HOBBIES" label would appear centered to the list below it – Joseph Romo Jan 25 '18 at 03:36
Click "run code snippet" next to my updated code snippet and read the instructions underneath. I think this now does exactly what you wanted and allows you to easily adjust every aspect. – WebDevBooster Jan 25 '18 at 04:35
And of course, to increase the size of the icons you'd have to add the `font-size` rules to the custom css items. – WebDevBooster Jan 25 '18 at 04:42
Just tried it out! worked just as I wanted. Thanks a lot mate! – Joseph Romo Jan 26 '18 at 23:09
Actually one last thing if you don't mind. What would be the best way to make it responsive? When I resize it to an in between size on mobile, the icon and the entry switch to separate lines? https://imgur.com/a/hkia0 – Joseph Romo Jan 26 '18 at 23:38
Hmm... are you sure you are using my exact code? Please copy and paste the exact code (all of it) from my snippet. There should never be such separation if you use that exact code. Something else might be causing it. I can't know what without seeing the code. – WebDevBooster Jan 26 '18 at 23:45
Yeah it works mostly, just pasted in my current code for this part. The other thing is when fully mobile, I'd like to increase the gap size of the two columns but I guess that'd be easily done with media queries? I was wondering if there was a way to use some other responsive Bootstrap elements in this list and its margins and spacing adjust as the screen size readjusts. https://imgur.com/a/mdY7e – Joseph Romo Jan 27 '18 at 00:01
Aha, it breaks onto the second line because there's not enough space for it to fit on one line. Well, the padding classes are responsive, but based on that screenshot, none of that is gonna do anything because there's not enough space for 2 columns when the screen is so small. So, in this case, you'll have to use media queries to get the list back into a single column. There's nothing else you can do there. – WebDevBooster Jan 27 '18 at 00:29
I mean, one possible option would be to add a responsive break i.e. to get every list item to sit on the second line (below the icon) on smaller screens. – WebDevBooster Jan 27 '18 at 00:34

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

1 Answers1