CODEWITHSUNDEEP
htmlwordpresstwitter-bootstrapnavbarbootstrap-4
CADesigner
CADesigner

Reputation: 49

Why is my Bootstrap 4 navbar-brand taking up a whole line?

I'm trying to make a pretty standard navbar with Bootstrap 4, with a navbar-brand image to the left and the nav list items to the right of that. I've literally copied the code from the bootstrap website (where all items align in the same line), but when I paste it to mine the nav items move to their own line.

I haven't edited the bootstrap website's menu at all, it's only 4 items so it's not that the menu is too long and dropping to it's own line. My Bootstrap should be connected correctly as every other thing that I'm using bootstrap for seems to be working fine.

Code is below.

Would appreciate any guidance! Thanks!!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<header class="site-header" role="banner">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link" href="#">Features</a>
        <a class="nav-item nav-link" href="#">Pricing</a>
        <a class="nav-item nav-link disabled" href="#">Disabled</a>
      </div>
    </div>
  </nav>
</header>

Upvotes: 0

Views: 902

Answers (1)

Phani Kumar M
Phani Kumar M

Reputation: 4590

In the code provided by you, you are referring to BootStrap 3 files instead of 4. All your code works fine in Bootstrap 4. To display nav list items to right of header, you can use navbar-expand-lg instead of navbar-toggleable-md.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/assets/js/vendor/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" />

<header class="site-header" role="banner">
	<nav class="navbar navbar-expand-lg navbar-light bg-faded">
		<a class="navbar-brand" href="#">Navbar</a>
		<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
			aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>

		<div class="navbar-collapse collapse" id="navbarNavAltMarkup">
			<div class="navbar-nav">
				<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
				<a class="nav-item nav-link" href="#">Features</a>
				<a class="nav-item nav-link" href="#">Pricing</a>
				<a class="nav-item nav-link disabled" href="#">Disabled</a>
			</div>
		</div>
	</nav>
</header>

Upvotes: 2

Related Questions