Make list of icons responsive with Bootstrap - html

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>
<li><i class="fab fa-html5"></i></li>
<li><i class="fab fa-css3-alt"></i></li>
<li><i class="fab fa-js"></i></li>
<li><i class="fab fa-bootstrap"></i></li>
<li><i class="fab fa-sass"></i></li>
<li><i class="fab fa-less"></i></li>
<li><i class="fab fa-github"></i></li>
<li><i class="fab fa-wordpress"></i></li>
<li><i class="fab fa-adobe"></i></li>
<li><i class="fab fa-python"></i></li>
</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">
<i class="fab fa-html5"></i>
<i class="fab fa-css3-alt"></i>
<i class="fab fa-js"></i>
<i class="fab fa-bootstrap"></i>
<i class="fab fa-sass"></i>
<i class="fab fa-less"></i>
<i class="fab fa-github"></i>
<i class="fab fa-wordpress"></i>
<i class="fab fa-adobe"></i>
<i class="fab fa-python"></i>
</div>

Answer 2

You could have done something this way
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<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>
<div class="container text-center">
<span style="padding:5px">
<i class="fab fa-facebook-f"></i>
</span>
<span style="padding:5px">
<i class="fab fa-twitter"></i>
</span>
<span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span>
<span style="padding:5px">
<i class="fab fa-facebook-f"></i>
</span>
<span style="padding:5px">
<i class="fab fa-twitter"></i>
</span> <span style="padding:5px">
<i class="fab fa-facebook-f"></i>
</span>
<span style="padding:5px">
<i class="fab fa-twitter"></i>
</span> <span style="padding:5px">
<i class="fab fa-facebook-f"></i>
</span>
<span style="padding:5px">
<i class="fab fa-twitter"></i>
</span>
</div>