I have the following dhtml skeleton
<div class="content">
<div class="container">
<div class="pull-right">
<a class="btn btn-primary" href="#">Press me</a>
</div>
<table class="table table-condensed table-bordered">
</table>
</div>
</div>
I want table to be centered on the page. I am using latest version of bootstrap. My table is a very large width table. Sizes of the divs as this is shown on my chrome dev console are.
.content: 1583x3803
.container: 1170x3803 (with 206.5 margin left and right)
.table: 1334x3753
So I see that my table needs more space than the container has. I thought that container centers the divs according to their size. Is there a way to make my table no matter it's width to always center inside a div?
Related
In some cases the bootstrap navbar-fixed-bottom will overlap other content without displaying a scrollbar.
For example https://jsfiddle.net/m5vgd9g7/1/:
<div>
<a class="btn btn-primary" href="#">
Button
</a>
</div>
<div class="navbar navbar-default navbar-fixed-bottom"
style="padding-bottom:0px; min-height:0px">
bottom
</div>
If you make the display pane very short vertically, the text "bottom" overlaps the button:
How can the overlap be prevented, so a vertical scrollbar appears before they overlap?
You should add a class to your top div which is row, so your top html would look like
<div class="row">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
This will add you a scrollbar for your content vertically. But when we declare a fixed navbar you should keep in mind to add a padding/margin to the rest of the content to the size of the navbar, which should display the rest of the content without being intruded by the navbar. So your final html for the top div would look like,
<div class="row" style="padding-bottom:15px;">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
Note: I would never use inline styles as it would complicate the html in the long run and hard to debug. I did it here for the sake of demonstration.
And the fiddle example is here : https://jsfiddle.net/m5vgd9g7/
EDIT
Thanks to #JDiMatteo who commented about the row class addition. I was about to maintain the bootstrap standards in grid system. (ref: http://getbootstrap.com/css/#grid). Apparently it seems row should be contained within container or container-fluid classes for it to work. This will define a row, where elements/columns(as in bootstrap) could reside in. And by using this, you can get rid of the custom styling we used earlier, padding/margin.
<div class="container">
<div class="row">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Recently Filtered</div>
<table class="table table-striped">
<tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
<tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
<tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
<tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
</table>
</div>
</div>
The table inside a panel is overflowing when I zoom in, here's a picture example
What's the proper mark up accommodating this problem? I know that it can scale properly for sure.
You could always add .table-responsive class to the table to get it scroll horizontally. Example:
<div class="table-responsive">
<table class="table table-striped">
...
</table>
</div>
If that isn't what you're wanting, you'll need to lower the font size to make it fit better.
it appears to only happen when the viewport has responded down to mobile sizes. The easiest fix is to add overflow rule.
.panel {
overflow: auto;
}
you could also change font sizes or remove unneeded table cells. You could also abbreviate
ID
Temp
V
Date
Just an idea, you tryed to add a div with class panel-body around the table?
I am using bootstrap for grid.
When the an column is expanded the other columns which are on right are aligning properly but the elements which are left to it are not aligning properly.
<div class="row">
<div class="repeater" ng-repeat="student in students | filter : query">
<div class="span{{12/columns}} col-sm-6 panel panel-warning">
<div class="panel-body">
<div class="row">
<div class="col-md-5"><img ng-src = "img/{{student.img}}" width="80px;" class="img-circle"></div>
<div class="col-md-7">
<button class="btn btn-info" style="margin-top:20px;" ng-click="show=!show">{{student.name}}</button>
<button type="button" class="close pull-right" ng-click="remove(student)">× </button>
</div>
</div>
<table class="table table-striped table-hover" ng-show="show">
<tr><th style="padding-right:0px;">Father Name:</th><td>{{student.fathername}}</td> </tr>
<tr><th>Class: </th><td>{{student.class}}</td></tr>
<tr><th>Subj1: </th><td>{{student.results.subj1}}</td></tr>
<tr><th>subj2: </th><td>{{student.results.subj2}}</td></tr>
<tr><th>subj3: </th><td>{{student.results.subj3}}</td></tr>
<tr><th>subj4: </th><td>{{student.results.subj4}}</td></tr>
</table>
</div>
</div>
</div>
</div>
Here is the fiddle link view in fullscreen view.
I want all the elements in the grid to align properly without leaving any place.
Can anyone help me?
This is not entirely possible with bootstrap. To explain you why, the .col-md-4 class has css property float: left which means whenever you open the right-most box, the left-side elements takes the height of the right-box, thus not allowing any other boxes below it.
You could get it working for the left and right elements by giving float:right for every last element in the row (in your case using .col-md-4:nth-child(3n){ float:right; }) like in the demo here but the middle element cannot be helped because it is still under float:left.
For your requirement, I recommend you use a JS library like Masonry which does exactly what you are expecting and used in cases where containers have variable heights and you want to fix them tightly, leaving no gap.
Here is what you are looking for: http://jsfiddle.net/ewNc6/
The trick is to insert a 'clear:both' on the first of each row.
<div class="col-md-4" ng-repeat="student in students" style="{{$index % 3 == 0 && 'clear:both'}}">
This normally will tie the code to the number of rows, but then again so does <div class="col-md-4" ,so you might be ok when doing so.
Im using the newest twitter bootstrap to construct a responsive grid website. i have three divs across a responsive grid like so:
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
...and this works as intended via the bootsrap documentation. However I have a separate background color on these divs from the html body background color, and when i drag the browser window to a smaller width to "collapse" the divs to show on top of each other, the gutter space between them disappears (creating a look of one big div versus three separate ones) is there anything i can do to create some gutter space between the divs when the width gets small enough to cause them to stack vertically?
You have a couple options...
(1) You could define a class and apply it to any divs you want to have a bottom margin.
In your application.css (or similar):
.mb10 {margin-bottom:10px;}
In your html page:
<div class="row-fluid">
<div class="span4 mb10">....</div>
<div class="span4 mb10">....</div>
<div class="span4 mb10">....</div>
</div>
OR
(2) You could make sure you wrap your div.span4 content in <p></p> tags.
<div class="row-fluid">
<div class="span4"><p>....</p></div>
<div class="span4"><p>....</p></div>
<div class="span4"><p>....</p></div>
</div>
From the Bootstrap - Typography section:
http://twitter.github.io/bootstrap/base-css.html#typography
In addition,
<p> (paragraphs) receive a bottom margin of half their line-height
(10px by default).
The question may sound a bit... stupid. But I'm kinda stuck.
I'm using Twitter Bootstrap. My test code is :
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" style="background:#eee; border:1px solid blue;">
<ul class="nav nav-list">
<!-- List contents -->
</ul>
</div><!--/span-->
<div class="span9" style='background:#fff; padding-left:10px; border:1px solid red'>
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website...</p>
<p><a class="btn btn-primary btn-large">Learn more »</a></p>
</div>
<div class="row-fluid">
<!-- The content -->
</div><!--/row-->
</div>
</div>
</div>
And this is what it looks like (I'm using colored borders to show you WHERE each of the 2 divs is) :
Now, my question is :
Is there any way I could have the second, red-bordered, div (span9) occupy THE WHOLE rightmost column (without any margins around it), so that the final result looks like :
the Control Panel on the left (a whole column with with that gray-ish background)
the right-most div on the right (occupying all of the remaining space, with a white background)
I don't have much experience with twitter bootstrap, but I'm assuming that the answer would be to look at the css properties for your 'row-fluid' class and check the margin and width.
margin: 0 auto; will give remove any margin (space around the outside of the div) and center it in the container
if ^ is already true, width=50%; (if you're going to have both side by side)
Hope that helps!