Center Navbar

Jelinek asked 5 years ago

Hello, I have a question about navbar. Can I somehow center my buttons in navbar

Here is my navbar code:

Navbar

nav class="navbar navbar-expand-lg text-center fixed-top navbar-dark unique-color-dark"

<!-- Navbar brand -->
<a class="navbar-brand" href="home.php">
    <img src="https://mdbcdn.b-cdn.net/img/logo/mdb-transparent.png" height="30" alt="mdb logo">
</a>

<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
        aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">

    <!-- Links -->
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
        </li>

        <!-- Dropdown -->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"
               aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </li>

    </ul>
</div>

/nav


Marta Szymanska staff pro premium answered 5 years ago

Hi,

please, check out this snippet: https://mdbootstrap.com/snippets/jquery/ascensus/145691 and take this solution to your project.

Best, Marta


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: phpStorm
  • Browser: Any
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags