<nav class="navbar navbar-expand-md navbar-dark bg-danger">

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse_target">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapse_target">

            <a class="navbar-brand"><img src="nav-bar_pics/rock-kitten.jpg"
            width="50" height="50"></a>
            <span class="navbar-text">It's Kitten Loud</span>

            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="homepage.html" style="font-size: 2em;">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="catalog.html" style="font-size: 2em;">Tours</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="biography.html" style="font-size: 2em;">Biography</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Music.html" style="font-size: 2em;">Albums</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about.html" style="font-size: 2em;">About Us</a>
                </li>
            </ul>
        </div>
    </nav>

I’m trying to get the links on my navbar in the center of the screen but I can’t figure out what I need to do. I’ve tried text-align and justify-center but neither seems to do anything.

The links are the ones with the weird font I want the picture and the normal text to stay where they are

r/webdev - Bootstrap Navbar



Source link

Write A Comment