html - How can I create a vertical bootstrap responsive navigation? -

I'm very new at this. I would like to know how to create a vertical navigation bar with bootstrap but I want to set it on the left side in the 100% height. And be responsible for mobile

I have tried to do something like that, but in reality it is not what I want

Fixed (in this case X and SAP size) main content should then take full screen width.

All you need to do is styled the navigation with CSS, so that its full height, negative left positioning (to hide it by default), different background color etc.

An example of the HTML "skeleton":

  & lt; Div class = "container" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-lg-3 col-md-4 mobile-menu" & gt; & Lt; Ul class = "navigable nav-pills nav-stack" & gt; & Lt; Li class = "active" & gt; & Lt; A href = "#" & gt; Menu item & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Menu item & lt; / A & gt; & Lt; / Li & gt; ... & lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div class = "col-lg-9 col-md-8" & gt; & Lt; Div class = "row" & gt; & Lt ;! - Your content - & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

and CSS:

  .mobile-menu {padding-top: 15px; Overflow-y: auto; } @ Media (max-width: 991px) {. Mobile-menu {status: fixed; Top: 0; Width: 240 pixels; Left: -243px; Z-index: 100; Height: 100%; Box-Shadow: 3px 0 5px RGBA (0, 0, 0, 0.23); Background color: #fff; }}  

Then you just need to open some javascript to open / close the menu (actually a simple left: 0 / left: -243px in this example), and maybe you have animations Want to

I have created such a bootstrap for you, you can find it and it's really easy to use.