A Bootstrap 4 navbar is vertical instead of horizontal? [duplicate]

475
October 02, 2018, at 1:30 PM

This question already has an answer here:

  • Angular 2 Bootstrap 4 navbar appearing vertically not horizontally 2 answers

I am trying to produce a horizontal pagination menu dynamically with PHP. This mostly works, and I'm using Bootstrap 4's Nav to organize it.

However, while the menu itself is correct, it outputs vertically instead of horizontal.

This is the code that outputs the menu. As far as I can tell, the code is correct. I am including it in case something might be off with the generator.

public function paginateList($Page = 1, $Limit = 15, $Route = '')
{
    $Count = $this->CoreImages->countImageTotal();
    $NumberOfPages = floor($Count / $Limit);
    $obj = "<nav class='navbar navbar-dark'>";
    $obj .= '<ul class="navbar-nav">';
    $obj .= "<li class='nav-item'><a class='nav-link' href='" .  $Route . '/1' . "'>" . 'First' . "</a></li>";
    for($i = 2; $i < $NumberOfPages; $i++) {
        $obj .= "<li class='nav-item'>";
        $obj .= "<a class='nav-link' href='" .  $Route . '/' . $i . "'>" .  $i . "</a>";
        $obj .= "</li>";
    }
    $obj .= "<li class='nav-item'><a class='nav-link' href='" .  $Route . '/' . $NumberOfPages . "'>" . 'Last' . "</a></li>";
    $obj .= '</ul>';
    $obj .= "</nav>";
    return $obj;
}

This is the actual output, run with an 'echo':

<nav class='navbar navbar-dark'>
    <ul class="navbar-nav">
        <li class='nav-item'><a class='nav-link' href='/1'>First</a></li>
        <li class='nav-item'><a class='nav-link' href='/1'>1</a></li>
        <li class='nav-item'><a class='nav-link' href='/2'>2</a></li>
        <li class='nav-item'><a class='nav-link' href='/3'>3</a></li>
        <li class='nav-item'><a class='nav-link' href='/4'>Last</a></li>
    </ul>
</nav>

What am I missing to get the orientation correct?

Answer 1

The thing is you should use navs instead of navbar

<ul class="nav"> 
    <li class='nav-item'><a class='nav-link' href='/1'>First</a></li> 
    <li class='nav-item'><a class='nav-link' href='/1'>1</a></li> 
    <li class='nav-item'><a class='nav-link' href='/2'>2</a></li> 
    <li class='nav-item'><a class='nav-link' href='/3'>3</a></li> 
    <li class='nav-item'><a class='nav-link' href='/4'>Last</a></li> 
</ul>

Or if you want to use navbar Please look into their documentation. you are missing some components that are in documentation.

Answer 2

To keep everything Bootstrap 4 - simply change your nav bar class on your ul tag, to nav only. You can keep the navbar class on your nav tag - this adds additional padding.

<nav class='nav navbar navbar-dark'>
    <ul class="nav">
        <li class='nav-item'><a class='nav-link' href='/1'>First</a></li>
        <li class='nav-item'><a class='nav-link' href='/1'>1</a></li>
        <li class='nav-item'><a class='nav-link' href='/2'>2</a></li>
        <li class='nav-item'><a class='nav-link' href='/3'>3</a></li>
        <li class='nav-item'><a class='nav-link' href='/4'>Last</a></li>
    </ul>
</nav>
Answer 3

By default, Bootstrap’s navbar is collapsed for mobile devices. This results in a vertical layout. You can add the navbar-expand class to expand it to a horizontal layout. This can be dependent on screen size as well, using typical Bootstrap method: for example navbar-expand-lg.

Navbars require a wrapping .navbar with . navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.

https://getbootstrap.com/docs/4.0/components/navbar/

Answer 4

To make your navbar horizontal you need to add some style(CSS) to it.There are two ways to do so.First, by using inline CSS and second by External CSS. In first way change your code from

<nav class='navbar navbar-dark'>
<ul class="navbar-nav">
    <li class='nav-item'><a class='nav-link' href='/1'>First</a></li>
    <li class='nav-item'><a class='nav-link' href='/1'>1</a></li>
    <li class='nav-item'><a class='nav-link' href='/2'>2</a></li>
    <li class='nav-item'><a class='nav-link' href='/3'>3</a></li>
    <li class='nav-item'><a class='nav-link' href='/4'>Last</a></li>
</ul>

to this one

 <nav class='navbar navbar-dark'>
<ul class="navbar-nav">
    <li class='nav-item' style="display:inline;"><a class='nav-link' href='/1'>First</a></li>
    <li class='nav-item' style="display:inline;"><a class='nav-link' href='/1'>1</a></li>
    <li class='nav-item' style="display:inline;"><a class='nav-link' href='/2'>2</a></li>
    <li class='nav-item' style="display:inline;"><a class='nav-link' href='/3'>3</a></li>
    <li class='nav-item' style="display:inline;"><a class='nav-link' href='/4'>Last</a></li>
</ul>

and the Second way is find nav-item class in your css file and update one more style to it i.e.

nav-item {
display: inline;
 }

From both ways the most preferred is the Second Way and you can follow the link also. https://www.w3schools.com/css/css_navbar.asp

READ ALSO
How can I display the number of data of a column in an excel sheet like a countif statement using javascript?

How can I display the number of data of a column in an excel sheet like a countif statement using javascript?

I'm trying to creating a web page wherein I can display the number of data in a column from a sheet in an excel file like using a countif statement in excel but using javascript?

145
Changing props from child in parent Vuejs

Changing props from child in parent Vuejs

So I have a Tabsvue component with four tabs:

52
Simple Html/JavaScript question regarding equations and conditionals

Simple Html/JavaScript question regarding equations and conditionals

I am new to programming/coding so this is probably quite easy for most of youI am supposed to create a web app for weight conversion: from U

35
Issue in using single JavaScript file for two HTML files

Issue in using single JavaScript file for two HTML files

I am trying to read inputs from user in HTML1Using JS, I am validating in the inputs received in HTML1

7