Make list of icons responsive with Bootstrap

Question

I have this list of icons (fonts) lined up on the bottom of a section's page. On mobile, the line of icons overflows over on the right of that page. I would like to have 3 or 4 icons per row instead on smaller screen. I have tried multiple possibilities and the best I got was the line to be cut off (not having all icons show). Any cue would be greatly appreciated, I don't know what I'm doing wrong :-/

HTML:

<!--Skills-->

<div class="container">
 <div class="icons text-center">
   <ul>
   <a href="##" id="html"><li><i class="fab fa-html5"></i></li></a>
   <a href="##" id="css"><li><i class="fab fa-css3-alt"></i></li></a>
   <a href="##" id="js"><li><i class="fab fa-js"></i></li></a>
   <a href="##" id="bootstrap"><li><i class="fab fa-bootstrap"></i></li></a>
   <a href="##" id="sass"><li><i class="fab fa-sass"></i></li></a>
   <a href="##" id="less"><li><i class="fab fa-less"></i></li></a>
   <a href="##" id="github"><li><i class="fab fa-github"></i></li></a>
   <a href="##" id="wordpress"><li><i class="fab fa-wordpress"></i></li></a>
   <a href="##" id="adobe"><li><i class="fab fa-adobe"></i></li></a>
   <a href="##" id="python"><li><i class="fab fa-python"></i></li></a>
  </ul>
 </div>
</div>

As for CSS:

/*Skills*/

.icons {
    padding: 0px 0px;
    }

ul {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content:space-around;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    }

ul li {
   list-style: none;
   font-size: 30px;
   border-radius: 400px;
   width: 50px;
   height: 50px;
   display: block;
   text-align: center;
   padding-top: 4px;
   padding-bottom: 0px;
   color: #2c3e50;
}

.icons > ul li {
flex: 1;
}

form ul li {
  font-size: 15px;
  width: inherit;
  color: #ff0000;
  text-align: left;
}

form ul {
  margin-left: 0px;
  margin-right: 0px;
  height: 10px;
}

/*What I tried so far... some of them might be nonesense but I was desperate!*/

@media (max-width: 450px) {
    .icons {
        padding: 25px;
        width: 25%;
        flex-wrap: wrap;
        position: absolute;
        margin:auto;
        justify-content: center;
        align-items: center;
        display:inline-block;
        text-align: center;
        overflow-x: hidden;
        line-height: 1.2;
        width: 100%;
        margin-bottom: auto;
        margin-left: auto;
        margin-right: auto;
    }

@media (max-width: 450px) {
    .icons li {
      width: 50%;
    }

Answer 1

restructure your code to remove ul, li and let the default behavior manage this for;

working snippet below:

i {
  list-style: none;
  font-size: 30px;
  border-radius: 400px;
  width: 50px;
  height: 50px;
  display: block;
  text-align: center;
  padding-top: 4px;
  padding-bottom: 0px;
  color: #2c3e50;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Do you really need ul, li ?
<hr/>
<div class="icons text-center">
  <a href="##" id="html"><i class="fab fa-html5"></i></a>
  <a href="##" id="css"><i class="fab fa-css3-alt"></i></a>
  <a href="##" id="js"><i class="fab fa-js"></i></a>
  <a href="##" id="bootstrap"><i class="fab fa-bootstrap"></i></a>
  <a href="##" id="sass"><i class="fab fa-sass"></i></a>
  <a href="##" id="less"><i class="fab fa-less"></i></a>
  <a href="##" id="github"><i class="fab fa-github"></i></a>
  <a href="##" id="wordpress"><i class="fab fa-wordpress"></i></a>
  <a href="##" id="adobe"><i class="fab fa-adobe"></i></a>
  <a href="##" id="python"><i class="fab fa-python"></i></a>
</div>