How to right align the icons?-CodePudding

<div class="container-fluid m-0 p-0 text-overlay">
    <div class="row m-0 p-0">
        <div class="col-12 m-0 p-0">
            <img
                src="images/Background.png"
                class="img-fluid vw-100 vh-100"
                alt=""
            />
        </div>

        <div class="center mx-auto box">
            <i class="fas fa-search mt-4"></i>
            <span class="mt-4 fs-3 search">Search</span>
            <div class="social-media">
                <i class="fab fa-facebook"></i>
                <i class="fab fa-twitter"></i>
                <i class="fab fa-instagram"></i>
                <i class="fab fa-youtube"></i>
                <i class="fab fa-snapchat"></i>
            </div>
            <div class="center">
                <h1 class="text-center title">
                    DATA ANALYSIS <br />
                    & STATISTICS
                </h1>
                <p class="text-center mt-4 title-text">
                    Lorem ipsum dolor sit amet consectetur adipisicing <br />
                    elit. Reiciendis iste, aperiam possimus temporibus
                    <br />
                    pariatur nulla quas et atque voluptatibus!
                </p>
                <div class="text-center">
                    <button
                        type="button"
                        class="btn text-white mt-4 px-3 py-1"
                        style="background-color: rgb(38, 25, 100)"
                    >
                        Learn More
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

I want to align the social media icons to the right side of the white box. I tried to use flex box and align using justify-content-end, but I guess I am doing something wrong.

CodePudding user response：

Think it would be better to use the navbar component built into Bootstrap as you'll get flexbox display & alignment on that element & child by default (see: https://getbootstrap.com/docs/5.1/components/navbar/).

If you want to continue with the code you have, you can wrap the search & icon blocks in a d-flex wrapper with flexbox alignment utils (see: https://getbootstrap.com/docs/5.1/utilities/flex/), these are responsive classes if you need to adjust on mobile for example. You need to wrap the search in a div too so the flexbox properties are applied to the search block as a group. Made a codepen to show how it can be done with your original code: https://codepen.io/themelizeme/pen/gOxGLPW

I don't know what affect your custom css classes you have will make but I would think most can be done with Bootstrap utils.

CodePudding user response：

Assuming you mean the search class when you say white-box, is this what you want: JSFiddle? (used a placeholder image)