CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbarnav
Alex
Alex

Reputation: 355

How to create a left vertical sidebar with bootstrap

I would like to create another navigation bar in my page using bootstrap - a vertical one, but in the left side between my header and my footer, and also I have some text that should stay in the same position. What is the best way to do it? Any suggestions?

My html/css codes are:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>xxx</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <style type="text/css">
       html {
          position: relative;
          min-height: 100%;
        }
        body {
          margin-bottom: 160px;
              }

        footer {
          position: absolute;
          bottom: 0;
          left:0;
          width: 100%;
          height: 140px;
          background-color:#555;
            }

          hr {
          height: 1px;
          background-color:#555;
          margin-top: 30px;
          margin-bottom: 30px;
          width: 100%;
        }

    .custom{
    color: white;
    background-color:black;
    height: 85px;
    }

    </style> </head>
    <body>

    <div class="container-fluid">
    <nav class="navbar navbar-default">

              <div class="navbar-header">
              <a class="navbar-brand" href="#">Test</a>
              </div>

              <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                  <li class='active'><a href="#">Home</a></li>
                  <li><a href="#"> Team</a></li>  
                  <li><a href="#">Help</a></li>
                 </ul></div></nav>

    <div class="row">
    <div class="col-sm-12 custom">
    <h2><strong>Test -test-test</strong></h2>
    <h4>bla bla bla</h4>
    </div></div><BR>


    <div class="container">
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
    <p class="text-justify">Some textSome textvvSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR>
    </div>

    <footer>
      <div class="container">
      <div class="row">
      <div class="col-sm-12 text-center">
      <image style="height:80px" src="/footer_image/Logo.gif"></image>
      </div></div></div> </footer>

    </body>
    </html>

thanks Clarissa

Upvotes: 1

Views: 4170

Answers (1)

NSTuttle
NSTuttle

Reputation: 3345

Take advantage of your column classes found on Bootstrap here or if v4 here

Take a look at my pin here, this will give you the right idea.

<div id="header" class="col-lg-12">
    <p>Header/Nav</p>
</div>

<div id="sideLeft" class="col-lg-2">
    <p>Sidebar Left</p>
</div>

<div id="body" class="col-lg-8">
    <p>This is where your all body content goes.</p>
</div>

<div id="sideRight" class="col-lg-2">
    <p>Sidebar Right</p>
</div>

<div id="footer" class="col-lg-12">
    <p class="white-text">Footer</p> 
</div>

CSS:

#header {
    height: 50px;
    background-color: #ccc;
}
#body {
    height: 500px;
    background-color: #eee;
}
#footer {
     height: 300px;
     background-color: #3f3f3f;
}

Upvotes: 3

Related Questions