Menu
I'm creating an admin dashboard for an app, where I need a layout like this:
---------------------------------------------------------------------------------
| |
| NAVBAR |
---------------------------------------------------------------------------------
| | | |
| N | | |
| A | | |
| V | | |
| I | | |
| G | | |
| A | | |
| T | MAIN VIEW | SUB |
| I | | VIEW |
| O | | |
| N | | |
| | | |
| | | |
| | | |
| | | |
---------------------------------------------------------------------------------
The width and height should be 100% of the entire viewport. I tried to do it by fixing the top navbar using .navbar-fixed-top, position: absolute for the side navigation and fixing the heights for the main and sub views using media queries for different screen sizes. But I am looking for a better, cleaner solution. How can I do it?
397
By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.
Three Equal ColumnsUse the . col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use three col elements, which gets a width of 33.33% each.
you're just creating a shape, pinning it behind the page and stretching it to full height. By making use of the existing bootstrap classes, you'll get the right width and it'll stay responsive. There are some limitations with this method ofc, but if it's for the page's root structure, it's the best answer.
position:absolute You can also use position absolute as well as set all the viewport sides (top, right, bottom, left) to 0px will make the div take the full screen.
Here's a fairly simple way to accomplish what you want. The media query allows the height of the nav, main and sub views to go to auto assuming that you want to collapse for xs viewports.
CSS:
html, body {
height: 100%;
}
.container-fluid.content {
padding-top: 50px;
height: 100%;
}
.container-fluid.content>.row {
height: 100%;
}
.mainview, .navview, .subview {
height: 100%;
overflow: auto;
}
.navview, .subview {
background-color: #eee;
}
@media (max-width: 767px) {
.mainview, .navview, .subview {
height: auto;
}
}
Basic HTML Structure:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="container-fluid content">
<!-- Example row of columns -->
<div class="row">
<div class="col-sm-2 navview">
<h2>Navigation</h2>
</div>
<div class="col-sm-7 mainview">
<h2>Main View</h2>
</div>
<div class="col-sm-3 subview">
<h2>Sub View</h2>
</div>
</div>
</div>
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
