Align Entire Div Content Center on Mobile Boostrap

Question

I've written something of a 'custom' nav bar using Bootstrap 4.5.

Basically, it's two columns/grids with a logo in the right column and a list that acts as a nav bar in the other.

I am really pleased with how it looks on a laptop/computer/tablet etc:

But it looks awful on mobile because the logo is aligned to the left (inherited, not actually using anything to align it left) and the list is aligned to the right ( class="... text-right..." ).

I'd like to make it so both the logo and list are aligned center on smaller mobile. I've tried a few things, like using an @media attribute in css with float:center; , and the only other way I can think to do this is to make the normal nav bar hidden/invisible on mobile and add a new one that's only visible on mobile, but I really don't want to have to do that as it'd mean I'd have to add links to the list twice etc.

I also tried aligning just the list center with this documentation: https://getbootstrap.com/docs/4.0/utilities/text/ , but it didn't work.

My current nav-bar is:

        <div class="topsection">
            <div class="container">
                <div class="row">
                    <div class="col-sm">
                         <a href="/"><img class="img-responsive" src="https://cdn.example.com/img/logo2.png" height="50px"></a>
                    </div>
                    <div class="col-sm align-baseline">
                        <p><ul class="list-inline text-right font1">
                            <li class="list-inline-item active-nb"><a href="/">Home</a></li>
                            <li class="list-inline-item"><a href="/projects">Projects</a></li>
                            <li class="list-inline-item"><a href="/mywork">My Work</a></li>
                            <li class="list-inline-item"><a href="/feed">Feed</a></li>
                        </ul></p>
                    </div>
                </div>
            </div>
        </div>
        <hr class="main">

(The attributes main and topsection aren't important, they just style the backgrounds of things etc)

Currently, it looks like this on mobile:

Answer 1

Use the Bootstrap utility classes. Alignment is already responsive...

<div class="topsection">
    <div class="container">
        <div class="row justify-sm-content-between justify-content-center">
            <div class="col-sm col-auto">
                <a href="/"><img class="img-responsive" src="//placehold.it/120x50" height="50px"></a>
            </div>
            <div class="col-sm">
                <ul class="list-inline text-sm-right text-center py-2 font1">
                    <li class="list-inline-item active-nb"><a href="/">Home</a></li>
                    <li class="list-inline-item"><a href="/projects">Projects</a></li>
                    <li class="list-inline-item"><a href="/mywork">My Work</a></li>
                    <li class="list-inline-item"><a href="/feed">Feed</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Demo

Answer 2

I've written something of a 'custom' nav bar using Bootstrap 4.5.

Basically, it's two columns/grids with a logo in the right column and a list that acts as a nav bar in the other.

I am really pleased with how it looks on a laptop/computer/tablet etc:

But it looks awful on mobile because the logo is aligned to the left (inherited, not actually using anything to align it left) and the list is aligned to the right ( class="... text-right..." ).

I'd like to make it so both the logo and list are aligned center on smaller mobile. I've tried a few things, like using an @media attribute in css with float:center; , and the only other way I can think to do this is to make the normal nav bar hidden/invisible on mobile and add a new one that's only visible on mobile, but I really don't want to have to do that as it'd mean I'd have to add links to the list twice etc.

I also tried aligning just the list center with this documentation: https://getbootstrap.com/docs/4.0/utilities/text/ , but it didn't work.

My current nav-bar is:

        <div class="topsection">
            <div class="container">
                <div class="row">
                    <div class="col-sm">
                         <a href="/"><img class="img-responsive" src="https://cdn.example.com/img/logo2.png" height="50px"></a>
                    </div>
                    <div class="col-sm align-baseline">
                        <p><ul class="list-inline text-right font1">
                            <li class="list-inline-item active-nb"><a href="/">Home</a></li>
                            <li class="list-inline-item"><a href="/projects">Projects</a></li>
                            <li class="list-inline-item"><a href="/mywork">My Work</a></li>
                            <li class="list-inline-item"><a href="/feed">Feed</a></li>
                        </ul></p>
                    </div>
                </div>
            </div>
        </div>
        <hr class="main">

(The attributes main and topsection aren't important, they just style the backgrounds of things etc)

Currently, it looks like this on mobile:

Answer 3

.your-class{
display:flex;
place-content:center;
}

should work with basic css.