Bootstrap4 documentation states that the predefined classes align-items-center and justify-content-center can be used to align contents vertically and horizontally. While testing the example provided in the Bootstrap4 document, it worked correctly. However, when using these classes in the following code, the alignment of the contents within the ul tag is not as desired. The ul tag has been set to display:flex using Bootstrap classes, but the contents (li tags) are not aligned both horizontally and vertically centered. I also inspected the ul property in Chrome DevTools and found that it had margin-top: 0 and margin-bottom: value. What could be causing this issue?
HTML:
<body>
<div id="top-ribbon" class="container-fluid">
<div class="row align-items-center">
<div id="socials" class="col-6 col-md-2 offset-md-2">
<ul class="d-flex align-items-center justify-content-center">
<li class="list-inline-item color-white"><i">1</i></li>
<li class="list-inline-item color-white">2<i"></i></li>
</ul>
</div>
</div>
</div>
Css:
color-white{
color: white;
}
#top-ribbon{
background-color: rgb(168, 8, 133);
border: 1px solid;
height: 200px;
}
.row{
height: 200px;
}
#top-ribbon div{
border: 1px solid;
}
#socials ul{
border: 1px solid;
}