CODEWITHSUNDEEP
bootstrap-4
Carl Warburton
Carl Warburton

Reputation: 181

Bootstrap 4 navbar appearing vertically not horizontally

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>

Upvotes: 12

Views: 14612

Answers (4)

Amir7
Amir7

Reputation: 42

Avoid adding classes with single quotations, add classes with double quotations instead.

Upvotes: 0

psuneel127
psuneel127

Reputation: 171

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

enter image description here

  1. Include the bootstrap reference in the project

enter image description here

  1. Now the pagination with bootstrap effect

enter image description here

Upvotes: 1

Inyoka
Inyoka

Reputation: 1446

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.

enter image description here

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

Upvotes: 12

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

Add navbar-toggleable-sm(md/lg) to nav element to make it horizontal till sm, otherwise it would be render vertical every time.

<nav class="navbar navbar-toggleable-sm navbar-fixed-top navbar-light bg-faded">

   ....

</nav>

Demo Plunker

Upvotes: 11

Related Questions