display UL LI items “inline” in a bootstrap row

Question

I'm having a hard time working with UL LI items in a bootstrap set up. I'm trying to align them so that there are next to each other (horizontal) rather than being aligned vertically. Here's my bode:

<div class="container-fluid" style="margin-bottom:45px;">
        <div class="row text-center">
            <div class="col-lg-12">
                <h4 class="text-center">FOLLOW US</h4>
                <hr style="width:60%">
            </div>
        </div>
        <div class="row ">
            <div class="col-lg-12 d-flex justify-content-around" id="socialMedia">
                <ul style="list-style:none;">
                    <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                    <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                    <li><a href="#"><i class="fab fa-yelp"></i></a></li>
                </ul>
            </div>
        </div>
    </div>

but i have not been able to get it to align horizontally. I tried to apply CSS to #socialMedia, like Float:left, display:inline but it's not working.

Right now they are positioned in dead center, and that's how I want them to stay.

Does anyone have any idea?

Answer 1

Use the d-inline class...

<ul class="list-unstyled">
    <li class="d-inline"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
    <li class="d-inline"><a href="#"><i class="fab fa-instagram"></i></a></li>
    <li class="d-inline"><a href="#"><i class="fab fa-yelp"></i></a></li>
</ul>

https://www.codeply.com/go/DaDD3njGFz

Answer 2

You said you applied the float to #socialMedia but that's the ul . You have to apply float: left on the li s. Add the float: left to #socialMedia li .

(If that still doesn't work, you have to make sure you have enough specificity to override Bootstrap. Last resort, add !important ).