CODEWITHSUNDEEP
csstwitter-bootstrap
Sterling Duchess
Sterling Duchess

Reputation: 2080

Bootstrap full width and height

What would be a proper way to create a 2 column (Sidebar - Main) full width page with Bootstrap. I found few examples but mostly for width.

My attempt was to simply override:

html, body {
  margin:  0px;
  width:   100%;
  height:  100%;
}

sidebar {
  width:   200px;
  height:  100%;
}

However this creates concern for smaller screens. What would be a proper way to implement 2 column page layout. I'm trying to put make a layout for my administration panel.

Upvotes: 2

Views: 9090

Answers (5)

georges
georges

Reputation: 1

I managed to do that but I still have border issue : the border of .lefty and .content is above the footer, don't know why, I solved your problem, would you solve mine ; )

HTML :

<div class="container">


      <div class="row header">
      <div class="col-xs-12">col-xs-12</div>
      </div> <!-- End of header -->


      <div class="row content">
              <div class="col-xs-3 lefty">lefty</div>
              <div class="col-xs-9 content">content</div>
      </div> <!-- End of content -->

      <div class="row footer">
      <div class="col-xs-12">col-xs-12</div>
      </div> <!-- End of footer -->

CSS :

    html,body{
    height:100%;
    min-height:100%;
    width: 100%;
    min-width: 100%;
    margin: 0;
    padding:0;
}
.container {
    height:100%;
    width: 100%;
    min-width: 100%;
    margin:0;
    padding:0;
}
.full-height{
    width:100%;
    height:100%;
    min-height:100%;
    margin:0;
    padding:0;
}
.header{
    background-color: #333;
    border: 1px solid white;
    height: 10%;
    color: white;
    margin:0;
    padding:0;
}
.lefty{
    background-color: #333;
    border: 1px solid white;
    height: 80%;
    color: white;
    margin:0;
    padding:0;
}
.content{
    background-color: #333;
    border: 1px solid white;
    height: 80%;
    color: white;
    margin:0;
    padding:0;
}
.footer{
    background-color: #333;
    border: 1px solid white;
    height: 10%;
    color: white;
    margin:0;
    padding:0;
}

Best,

Upvotes: 0

Xarcell
Xarcell

Reputation: 2011

The thing to do is use media queries.

Float the sidebar in large screens, but in small screens do not, just let it line up under your content.

Upvotes: 0

&#222;aw
&#222;aw

Reputation: 2057

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
    </div>
    <div class="span10">
      <!--Body content-->
    </div>
  </div>
</div>

see here http://twitter.github.io/bootstrap/scaffolding.html

Upvotes: 0

Tom Maitland
Tom Maitland

Reputation: 578

You can just use the Bootstrap fluid grid? It will create a 2 column flexible layout. You can then use Bootstrap responsive to make that collapse down in one column if you want to.

Code from the Bootstrap website to do it.

<div class="container-fluid">
 <div class="row-fluid">
   <div class="span2">
     <!--Sidebar content-->
   </div>
   <div class="span10">
     <!--Body content-->
   </div>
 </div> 
</div>

And a fiddle: http://jsfiddle.net/MgcDU/3581/

Upvotes: 3

vishakvkt
vishakvkt

Reputation: 864

Instead of hardcoding the sidebar to 200 px, why not set it in percentage (20%). This way, even if the user zooms in/out of the page on smaller/bigger screens, the sidebar will always remain consistent.

Upvotes: 0

Related Questions