home

Bootstrap Left Side List

Left side sections is kind of sub links for the website for example you can refer the below demo. In the main content part we have two different sections (left side section and main content section). Here we have sample code of left side lists, in the code we have some ul tag which is containing nav-list along nav class, after that we have list tags (li tags) and first li tags is the heading for the complete lists which has the class name of nav-header, and another one is active class to activate the current li tag.

<!DOCTYPE html>
  <html lang="en">
  <head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </head>
    <body>
      <div class="container">
           <ul class="nav nav-list">
<li class="nav-header">Bootstrap Basic Template</li>
<li class="active"><a href="#">Introduction</a></li>
<li><a href="#">Header</a></li>
<li><a href="#">Navigation</a></li>
<li><a href="#">Banner area</a></li>
<li><a href="#">Side Listing area</a></li>
<li><a href="#">Main Content</a></li>
</ul>
</div> </body> </html>
Please save the code and make your file name as index.html (browser will take by default first preference and index gets open)

 

 

Bootstrap Logo Place

Header
Navigation
Banner area
Side Listing area
Main Content