I want to create a template for a project that i am working on using Bootstrap and i have a problem with the behavior of the offcanvas sidebar. I want the sidebar to take all the space below the header and to not be scrollable. I have found two templates, that combined do what i want but i have a problem merging them as i am not very good with css. I have tried a lot to do but i can't figure how to do it. Here is a picture showing the desired functionality/behavior of the template i want to make:
Here are the two templates i have found:
Dashboard
Dashboard (with off-canvas sidebar)
And here is the code (HTML+CSS) of each template (stripped down) so you can easily figure out how they work:
Dashboard - fixed sidebar
HTML
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
</div>
</div>
CSS: getbootstrap.com/examples/dashboard/dashboard.css
Dashboard (with off-canvas sidebar) - scrollable
HTML
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
</div>
<div class="col-sm-9 col-md-10 main">
<h1 class="page-header">Dashboard</h1>
</div>
</div>
CSS: http://textuploader.com/k6ae
Related
I have a bootstrap breadcrumb element with a page header on the same row which works fine on large monitors but on mobile the header covers the breadcrumb. How do I force the header to a new row for smaller screens?
<div class="card">
<div class="card-body d-lg-flex align-items-center">
<nav class="mb-3 mb-lg-0">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item active">This Page</li>
</ol>
</nav>
</div>
<div class="align-self-end align-self-md-center center-y">
<asp:Label ID="lblHeader" runat="server" CssClass="h2 text-primary" Text="Header Text"></asp:Label>
</div>
</div>
You can use Bootstrap's grid system to force the header to a new row on smaller screens. One way to achieve this is to wrap the breadcrumb and the header in separate div elements with the class of row, and then give each div a class of col-lg-* and col-md-* for the larger screens and col-* for smaller screens. For example:
<div class="card">
<div class="row">
<div class="col-lg-12 col-md-12 col-12">
<nav class="mb-3 mb-lg-0">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item active">This Page</li>
</ol>
</nav>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-12">
<asp:Label ID="lblHeader" runat="server" CssClass="h2 text-primary" Text="Header Text"></asp:Label>
</div>
</div>
</div>
This way on larger screens the breadcrumb and header will be on the same line, but on smaller screens the header will be on a new row, thus avoiding the overlap.
I would like to make a layout where my logo is at the left, and my title and menu are on the right of the logo. When the screen is too small then it should be logo, title and then menu. (On either side there is a col-lg-2)
My attempt was:
<header class="row">
<div id="logo"class="col-xs-12 col-sm-2
col-md-2 col-md-offset-2 col-lg-2 col-lg-offset-2">
</div>
<div id="title_menu" class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div id="title">
Title
</div>
<nav id="navigation_bar" >
Menu
</nav>
</div>
</header>
<div class="row">
<div id="something" class="col-xs-12 col-sm-12
col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
something
</div>
header {
background: #0090e5 !important;
}
#logo {
height:250px;
}
#title_menu {
height:50px;
}
But on an IPhone the title and menu disappear and seem to be behind the element in the row underneath. I am using the height, because I want everything to be align with the bottom of the row.
I'm not sure exactly what you're going for, but there appears to be quite a bit of redundancy in your classes. One thing you should know about Bootstrap is that you only need to specify the number of columns on each size if the number of columns is changing. For instance, if you want a div to take up 2 columns on small, medium and large, you only need to define small, every size above small will automatically use the same number of columns. Similarly, you don't need to specify col-xs-12 because that is already assumed. So you could simplify it to this(notice how I'm only defining the number of columns for sm and everything else is taken care of automatically):
<div class="container">
<header class="row">
<div id="logo" class="col-sm-2">
<img src="http://placehold.it/50x50">
</div>
<div id="title_menu" class="col-sm-5">
<div id="title">
Title
</div>
</div>
<div class="col-sm-5">
<nav id="navigation_bar">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
</nav>
</div>
</header>
</div>
This will display the logo, title and menu all on the same line from small up and it will show the logo, title and menu stacked on mobile(xs).
Bootply example
Hello I want to achieve the following design, but it has to be responsive (I am using bootstrap):
I used the following HTML5 tags
<div class="row">
<div class="logo visible-md visible-xs visible-sm visible-lg col-md-2 col-xs-2 col-sm-2 col-lg-2">
<img src="/images/logo.png">
</div>
<div class="pull-right">
<img src="/images/Banner.png" class="img-responsive">
</div>
<div style="clear: both"></div>
</div>
<br>
<div id="nav" class="navbar" style="width:90%">
<ul class="nav navbar-nav">
<li>home</li>
<li>test dp</li>
</ul>
</div>
The problem is when re-sizing the browser (i.e. opening from mobile device or re-sizing the browser size ), the image Banner.png change place and is not aligned anymore with the blue navbar
Edit 1:
I have used Absolute Positioning and added the code here, it works fine but is not stable (i.e. produces the space between the image and the navbar is not the same when I resize the browser with different sizes)
https://jsfiddle.net/c45xqLe9/
Got an ASP MVC 4/5 project, using VS2012. Added is bootstrap 3.2
I had a look at the few others who had problems with Twitter Bootstrap's Dashboard example, but they did not enable me to formulate a solution to my own problem.
I have a dashboard, and to show the different pages I made use of the tab-content and tab-panes css classes. However the main area ends up below and to the right of the navigation. The other similar questions mentioned row-fluid, which the latest bootstrap doesn't have. I also tried the various answers suggested in them by modifying my css.
Here is my code:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Clients</li>
<li>Orders</li>
<li>Stock</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main tab-content">
<h1 class="page-header" style="margin-top: 0 !important;">Dashboard</h1>
<div class="tab-pane" id="clients">
#Html.Action( "Index", "Client")
</div>
<div class="tab-pane" id="orders">
#Html.Action("Index", "Order")
</div>
<div class="tab-pane" id="stock">
#Html.Action("Index", "Stock")
</div>
</div>
</div>
</div>
Perhaps my css is wrong, or perhaps my implementation of getting the pages to load in the main area is wrong. Thank you to any answers/suggestions to get this to work.
Other things I tried: To use ajax actionlink with the div as the target update
If you are already using col-* values you don't need to use offset classnames:
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
...
</div>
<div class="col-sm-9 col-md-10 main tab-content">
...
</div>
</div>
Check this Demo
I'm laying out a navbar and it's coming out all wrong. I want to have a left and right component so I'm using two span6's. But I'm finding that the first span6 is centered on its own line. Chrome's dev tools show the centered div as having the correct dimensions and 20px left-margin -- it's just centered. As if the container is center it?
Here's the HTML for the navigation view:
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span12">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>
"I want to have a left and right component so I'm using two span6's."
...Except if your code is the same as the code you posted in your question, you are using one span12, and then one span6. Here's a version that uses two span6 classes.
http://jsfiddle.net/FtPZf/
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span6">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>