How do you create two side bars with bootstrap?
  • I want to create a static page with 2 side bars(left and right)  and the content in the middle.
    The side bars will have vertical green colors.The sidebars will have fix heights

  • 6 Comments sorted by
  • set align property for both
  • Do you mean align-content setting?I tried it but no success.
    When you load the page you get this:
    http://1drv.ms/1x8Lhox
    When you minimize window you get this:
    http://1drv.ms/1x8Lvfv
    which is ugly.The maximum height for col-md-1 is 1800px;
    I attached sample on my  content here:
    http://1drv.ms/1x8Nxfs

    Thank you

  • I use jquery to set col-md-1 class like this
       $(".col-md-1").css('background-color''#3C663C');
       $(".col-md-1").height('1800px');

  • Helllo
    Please use following HTML for creating side bars.




    <div class="row">

    <div class="col-lg-2"> Myleft Side Bar </div>
    <div class="col-lg-8"> My Center Content Div </div>
    <div class="col-lg-2"> My left Side Bar </div>

    </div>



    Add your custom classes after col-lg-2 and col-lg-8 to customize appearance. Also make sure that your monitor have resolution more than 1024X786 px.. and also attach bootstarp css and js to your html file.

  • I want the height of the class col-lg-2 to have a default height of 1800px and have green color.But you minimize the browser i want the layout to be mobile friendly.

    Thank You
    class="col-lg-2"
    class="col-lg-2"
  • ok. Please confirm that the side bars will have content or they will be empty? If they have content then jut add content to sidebars their height will increase automatically.
    If they are blank and then 

    update your code to 




    <div class="row">

    <div class="col-lg-2 sideBar"> Myleft Side Bar </div>
    <div class="col-lg-8"> My Center Content Div </div>
    <div class="col-lg-2 sideBar"> My left Side Bar </div>
    </div>


    and now open your css file and add following code
    .sideBar{ min-height:1800px;}

Howdy, Stranger!

It looks like you're new here. If you want to get involved, or you want to Ask a new Question, Please Login or Create a new Account by Clicking below

Login with Facebook

Tagged

Popular Posts of the Week

Optimum Creative