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
Related
I am having trouble with my css. I am trying to have my contact information, the quote, and my contact form to be in the same row but different columns. And also why is it that my html doesn't all fit on one page, I can scroll to the rigth and there's just empty white space. I figure its because I added -1.23em in my navbars margin; However, I only did this because my navbar was not filling the whole page. Here is a link to my gist and bitballon. Thank you in advance.
https://gist.github.com/bklynbest/a19565b1b5289f045919e76d657848ea
http://sad-goodall-e4f115.bitballoon.com
You have a .row div in the nested directly under the body on line 103 that is causing the page to spread past 100% width
Bootstrap requires a containing element to wrap site contents and
house our grid system. You may choose one of two containers to use in
your projects. Note that, due to padding and more, neither container
is nestable. bootstrap containers
Regarding the contact info your nesting and class names are not correct, you currently have the following:
<div class="container-fluid" id="contact">
<div class="row">
<div class="column">
<div class="col-xs-12 col-md-12">
<div id="quote">...</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="contact">...</div>
</div>
</div>
</div>
</div>
<form>
you will need to change this to follow bootstrap3 grid conventions, something like the following:
<div class="container">
<div class="row" id="contact">
<div class="col-sm-4">
<div id="quote">...</div>
</div>
<div class="col-sm-4">
<div class="contact">...</div>
</div>
<div class="col-sm-4">
<form>
</div>
</div>
</div>
There are so many questions on this, but they all seem to just want one item on the left and one on the right, or a button group. All of those are straightforward.
How can I achieve similar to this bootply
but instead of two buttons in the group on the right, two other elements - two divs, or two h3 for example?
Whatever I try these 2 elements always end up vertically stacked and not horizontally aligned in the right side of the footer.
EDIT
#Harinder88 provided this solution which, as you can see, does do what I asked and so I have accepted as the answer as I think in the vast majority of use cases, this is what most people are trying to achieve.
However, you can see that if the text is too long for the column, it gets wrapped and now everything is not on a single line. But I accept that is the compromise of having a responsive design. It just so happens that in my actual use case, that last item cannot be allowed to wrap, so I just have to give it a fixed width to solve that. Thanks #Harinder88.
Now see this example i aligned 2 items horizontal in left and right with 2 methods u can use any 1 of them
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<ul class="list-inline">
<li class="col-xs-12">
<div class="pull-right">
<div class="row">
<div class="col-md-6 col-xs-6">
<p>Left side with col</p>
</div>
<div class="col-md-6 col-xs-6">
<p> Right side with col</p>
</div>
</div>
</div>
<div class="pull-left">
<div class="pull-left">Left side with pull</div>
<div class="pull-right">Right side with pull</div>
</div>
</li>
</ul>
</div>
</div>
<div class="panel-body">Content here..</div>
</div>
<hr>
you can use pull-right for align div right and pull-left for align div on left side .
if you want to do further partition you can use use same things again.
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<ul class="list-inline">
<li class="col-xs-12">
<div class="pull-right">
<button class="btn btn-default">ON</button>
<button class="btn btn-primary active">OFF</button>
</div>
<div class="pull-left">
<h4>
Fotter (you can use anything here button code or link tag , you can remove hr tag and use anything you want )
</h4>
</div>
</li>
</ul>
</div>
</div>
<div class="panel-body">Content here..</div>
</div>
I managed to figure this out by replacing the button groups and the buttons with spans, then it works fine. Everything aligned on one line, 1 item pulled left and 2 pulled right.
<div class="panel-footer">
<div class="panel-title">
<ul class="list-inline">
<li class="col-xs-12">
<span class="pull-right">
<span>Recording - Last updated at x</span>
<span class="trail-status">PUBLISHED</span>
</span>
<h5>x comments
</h5>
</li>
</ul>
</div>
<div class="clearfix">
</div>
</div>
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
I have tried to build a MVC master template and sub pages based on bootstrap.
Somehow I have managed to break it and I cannot work out what has happened.
My test site is at http://taxiroutemvc.azurewebsites.net/
Notice how the various sections don't align vertically?
I'm guessing either too many or too few divs or some class problem but I just cant find it.
Bootstrap was not designed for you to add the well class on the same element as a spanX. You want to nest a <div> with the well class inside of your spanX.
Edit:
Also, when using the fluid scaffolding, all your rows need to be row-fluid.
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<form>
<div class="row-fluid"> <!-- not just 'row' -->
<div class="span12" id="bingMap">
etc.
</div>
</div>
</form>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="well">
<h3>We cover the following areas:</h3>
Cardiff | Barry
</div>
</div>
</div>
</div>
What's the best way to use nesting.
Multiple spans inside row - dynamic content :
One row per 12 columns ?
OR, One row for ANY number of columns ?
Sample case n°1 - which one is the best & why ? :
<div class="row">
<span class="span6"></span>
<span class="span6"></span>
<span class="span6"></span>
<span class="span6"></span>
</div>
Or
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
</div>
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
</div>
Sample case n°2 - More levels to organise the content.
Here, use the div "my_margin" to add some margin at left & right - and you must have "first_row" around it.
So it's : row-->span10,offset1-->row-->SPANS
<div id="first_row" class="row">
<div id="my_margin" class="span10 offset1">
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
</div>
</div>
</div>
Or,
You shouldn't use the span10,offset1 but direct margin;
In that case, you must create rules for each #Media_size to make it responsive.
<div style="margin-right:XYpx; margin-left:XYpx" class="row">
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
</div>
Or - Spans are 'supposed' to be use for your main contents, and then you just play with css. So, something like that :
<div row>
<div class="span6">
http://jsfiddle.net/JkPhw/
<div class="span6">
<div class="span6">
http://jsfiddle.net/JkPhw/
<div class="span6">
</div>
To case n°1:
It depends, if you have for example a list of nine teasers where three teasers fill a line, I'd do it with one row:
<ul class="row">
<li class="span4"></li>
<li class="span4"></li>
<li class="span4"></li>
<!-- six more -->
</ul>
If you're using the grid for layouting a form, I'd make a row for each label-input pair:
<!-- one label-input pair does not fill the whole content width -->
<form>
<div class="row">
<label class="span3"></label>
<input class="span5" />
</div>
<div class="row">
<label class="span3"></label>
<input class="span5" />
</div>
<!-- and so on -->
</form>
I think you shouldn't make a grid and put your content in the different grid cells to layout it, but build semantically correct markup and apply the grid to layout the content (tiny difference).
PS: keep box-sizing in mind.
To n°2:
I don't quite get the idea there, if you're using the grid, you shouldn't apply left/right-margin to it. The grid depends on its horizontal margins to work properly... if you have to change this to match your frontend with the design it's probably not in the grid anymore.
Update: I'd most certainly use your first example though, if you have smaller content. But use the correct grid span widths:
<article class="row">
<header class="span12"></header>
<div class="span10 offset1">
<div class="row">
<div class="span5"></div>
<div class="span5"></div>
</div>
</div>
</article>