I am trying to put together a sidebar in Bootstrap 3, but I want some items grouped under headings, like this

```
historical data
 temperature 
 humidity
current data
 temperature
 humidity

```

But "historical data" and "current data" are not links themselves -- they are just headers to group similar items together. This should be a simple modification of basic pattern, but it fails.

The code I tried is

```
<ul class="nav navbar-inverse">
  <li>
   <p class="sidebar-text> Historical data</p>
   <ul class="nav">
     <li> <a href="..."> Temperature </a> </li>
     <li> <a href="..."> Humidity </a> </li>
   </ul>
   <li>
  <li>
   <p class="sidebar-text> Live data</p>
   <ul class="nav">
     <li> <a href="..."> Temperature </a> </li>
     <li> <a href="..."> Humidity </a> </li>
   </ul>
   <li>
 </ul>

```

This is almost exactly the same as the pattern used on bootstrap documentation pages, except that bootstrap documentation uses links for main sections, and I replaced the link elements with `<p class="sidebar-text">`

However, the result looks wrong. The sublists are placed to the right of the textinstead of under it![enter image description here](https://i.stack.imgur.com/Dkvik.png) 

I made a bootply demo to see the results: <http://www.bootply.com/XDM10D9I83>

Is there a way to make this work without forcing section headers to be links?