Bootstrap 4 navbar appearing vertically not horizontally

Question

I have built a Navbar exactly how it has been done on a tutorial yet somehow my navbar appears vertically when it should appear horizontally. Any ideas on how to fix this problem? Thanks in advance

<nav class="navbar navbar-fixed-top navbar-light bg-faded">
    <div class='container'>
        <ul class="nav navbar-nav">
            <li class='nav-item'>
                <a class='nav-link' routerLink="/home" routerLinkActive="active">Home</a>
            </li>
            <li class='nav-item'>
                <a class='nav-link' routerLink="/documents" routerLinkActive="active">Docs</a>
            </li>
            <li class="nav-item dropdown">
                <div ngbDropdown class="d-inline-block dropdown-links">
                    <button class="btn btn-outline-primary" id="proposalDropdown" ngbDropdownToggle>
                        Proposals
                    </button>
                    <div class="dropdown-menu" aria-labelledby="proposalDropdown">
                        <a class="dropdown-item" routerLink="/proposals" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true}">Proposals</a>
                        <a class="dropdown-item" routerLink="/proposals/new" routerLinkActive="active">New Proposal</a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</nav>

Answer 1

Bootstrap 4 requires you add navbar-expand-md to your opening nav classes otherwise it will be vertical ..

<nav class="navbar navbar-fixed-top navbar-expand-md navbar-light bg-faded">

You can replace the md with xs, lg or sm for different breakpoints.

Go to Bootstrap 4 Navbar documentation and view the first example.

Answer 2

First thing to check is to refer the bootstrap in the css

This example is for an application in Angular

1. Without bootstrap included the pagination looked as below

2. Include the bootstrap reference in the project

3. Now the pagination with bootstrap effect