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 pr

Answer 1

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

Answer 2

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

Answer 3

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 4

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