I'm trying to design an Admin panel for my application using twitter-bootstrap framework but i cannot get my layout to work.
I was inspired by this design:
It would be a two column layout "Sidebar" and "Main content" but I can't get the 100% height to work. I managed to get 2 column layout with 100% width using this code:
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span2 colorize-white">
<!--Sidebar content-->Sidebar
</div>
<div class="span10 colorize-white">
<!--Body content-->Main
</div>
</div>
</div>
CSS
/* Global */
html, body {
color: #6B787F;
padding: 0;
height: 100%;
background: #11161a;
font-family: 'PT Sans' !important;
}
.colorize-white {
background: #FFFFFF;
}
.no-margin {
margin: 0;
}
I'm half way there but there are two things I can't solve.
1) 100% Height
2) Getting rid of outer margins on second image
You can see that I have margin between browser border and Sidebar/Main elements and then margin between the two. I need to get rid of this if I add no-margin to all my elements in HTML i pasted including body tag i still don't get 100% height and i still cant get rid of margins between browser border and sidebar and main content while the margin space between Sidebar and Main content disappears.
You can also use max-width: 100%; and max-height: 100%; utilities as needed.
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
If you want to have a true 100% width element, simply put a w-100 class on your div without container . In your case, when you are using a container , switch it to a fluid one by replacing it with container-fluid , and adding a p-0 class as well.
Bootstrap comes with three different containers: .container , which sets a max-width at each responsive breakpoint. .container-fluid , which is width: 100% at all breakpoints. .container-{breakpoint} , which is width: 100% until the specified breakpoint.
I'm not so sure Bootstrap's grid model is what you're looking for here. You may instead be looking for absolute positioning. For example:
#sidebar, #content {
position: absolute;
top: 0;
bottom: 0;
}
#sidebar { left: 0; width: 10em; }
#content { left: 10em; right: 0; }
Try it out.
Here is an example that works for Bootstrap 3..
Make sure the HTML and body are both 100% height. Wrap the sidebar and content and then use position:absolute
on the sidebar.
http://www.bootstrapzero.com/bootstrap-template/basis
Code: http://bootply.com/86704
I am not sure if this is what you are looking for, but here it goes.
just modified the CSS slightly. margin:0;
to html, body
tag.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With