I am trying to make navigation bar. The output is navigation bar but it is vertical.I want horizontal one.Can anyone help me with this
<nav class="navbar navbar-default" role="navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">Portfolio-Tanvi Jain</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">About</a></li>
<li><a href = "#">Portfolio</a></li>
<li><a href = "#">Contact me</a></li>
</ul>
</div>
</nav>
You are using Bootstrap classes, but you most likely didn’t include the Bootstrap.css file or you include the Bootstrap 4 css file. If you are using codepen, you can add Bootstrap 3 (the one you need) by going to Settings > CSS > quick-add and selecting Bootstrap 3.
Also:
I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard.
@BenGitter I have added Bootstrap.css in my codepen
Can you link to your codepen?
You have added both Bootstrap 3 and 4, but you only need verssion 3. If you remove Bootstrap 4 (4.0.0-alpha.6) it should work.
1 Like
yes it is working now thank you . Can you please tell me if I want to use bootstrap 4 instead of 3 then what changes do I need?