Boostrap menu items show separately in vertical list

bootstrap navbar
bootstrap list example
bootstrap vertical navbar
vertical navbar bootstrap 4
bootstrap 4 vertical tabs
bootstrap tabs
bootstrap 3 tabs example
bootstrap tabs styling

I have bootstrap code which is not showing the desired result. The menu items shows separately at the upper right corner of web page whereas they should be in the horizontal strip (like a tab structure). What is wrong with code?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<nav class = "navbar navbar-default">
  <div class = "container-fluid">
    <div class="navbar-header">
      <a href = "#" class = "navbar-brand">CMS System </a>
    </div>

    <ul class="nav navbar-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
    </ul>


  </div>
</nav>

You have to add some extra bit of style. May be there is an issue with the version of the bootstrap css you have used as well.

.navbar .container-fluid>.navbar-header {
  float: left;
  margin-right: 10px;
}
.navbar .navbar-nav {
  float: left;
  margin: 5px;
}
.nav>li {
  float: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

<body>
    <nav class = "navbar navbar-default">
        <div class = "container-fluid">
            <div class="navbar-header">
                <a href = "#" class = "navbar-brand">CMS System </a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
            </ul>
        </div>
    </nav>
</body>

Bootstrap Vertical Menu, How do I make the menu bar vertical in bootstrap? @Gustavo In your example, how can we make item 2 to collapse when any other item (outside item 2) is clicked? – nam Jun 22 '17 at 22:50 Hello, I just noticed that when you put a link on one of the sub-item/child item of the dropdown, it's not working. – nosnevetzy Feb 26 '18 at 11:09

You could change

<nav class = "navbar navbar-default">

to

<nav class = "navbar navbar-expand">

making the navbar horizontal

Formatting Lists with Bootstrap 4, takes space otherwise we need to use collapse class. Bootstrap Vertical and Horizontal Divider – Dividers are basically used to create line which works as separator. Here in this tutorial we are going to explain how you can create bootstrap vertical and horizontal divider. We will explain this with example and demo.

using latest version of bootstrap no need of css, you can check the below solution.

I hope this will solve the issue.

Note: Added some css extra classes for styling the background of navigations

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
    <ul class="navbar-nav text-right">
      <li class="nav-item active">
        <a class="nav-link" href="#">News</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Products</a>
      </li>
    </ul>
  </div>
</nav>

Dropdowns · Bootstrap, Which of the following bootstrap classes are used to add a dropdown menu? ul.list-group:after { clear: both; display: block; content: ""; } .list-group-item { float: left; } Fiddle. Also from your given code I believe you don't need to make use of the #with-button-elements and #nav-disabled-links. The above example will do just fine.

Learn All About Bootstrap Tabs and Bootstrap Pills, What is the difference between a NAV pill and a NAV tab? .tab(‘show’) This selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (for example, before the shown.bs.tab event occurs).

Bootstrap Menu Vertical Dividing, What I need is to display the first 3 elements (with header) in one column and the last two elements (with header) in another column separated by  Find the Bootstrap menu that best fits your project. The best free menu snippets available. Design elements using Bootstrap, javascript, css, and html.

Navs · Bootstrap, Image replacement · Position · Screenreaders · Sizing · Spacing · Text · Vertical align · Visibility Add .disabled to a .list-group-item to make it appear disabled. We separate these pseudo-classes to ensure list groups made of non-interactive id="nav-tabContent"> <div class="tab-pane fade show active" id="list-home"  Disclaimer: This site is started with intent to serve the ASP.Net Community by providing forums (question-answer) site where people can help each other. The content posted here is free for public and is the content of its poster.

Comments
  • like a tab structure
  • yes like a tab structure. horizontal items on strip
  • so to the page right side you need the tabs
  • I copied your code, it worked without including the custom css you provided.
  • @SumairaSamar, that's really grate to know:)