I am currently testing out Blueprint to create the layout for a site. So far it has been going great, but now I've run into a problem I'm wondering if there is any elegant solution to.
I am using the default 24 column layout and have a situation where I would like to do something similar to:
<div class="span-8 box">..</div>
<div class="span-8 box">..</div>
<div class="span-8 box last">..</div>
Problem is that the box-class adds a padding which causes the three div's to not fit into the 24 columns.
One "solution" is to use span-7 instead for all three, but this doesn't fill the entire width.
Any ideas?
You can use the class this way:
<div class="span-8">
<div class="box">..</div>
</div>
<div class="span-8">
<div class="box">..</div>
</div>
<div class="span-8 last">
<div class="box">..</div>
</div>
You could change the "span-7" css rule:
...
.span-7 {width:274px;}
...
And change the divs to "span 7".
Simplest thing I could think of :)
jsFiddle example.
Related
I understand the problem, as described and answered here.
I have quite a complicated layout with a sidebar navigation, a top navigation, a fluid-container and then page-title and page-body structure for each page. So just adding another container did not solve the problem as suggested in that answer.
Once I get into the page-body, all the rows are stretching 'outside' the parent page-body.
Notice I have added padding to the default container-fluid to 'pull' all the content in from each side of the page. Removing them does not fix it.
I've tried every change I can think of except removing the padding from the default row, because I'm pretty sure that is a no-no.
Anyone have any idea how to get those pesky form controls to stay 'inside' the page body?
There is two solution either give an additional class to row and manipulate its layout or don't use row use <div class="col-md-*" /> without parent .row class div as many times u want and use <div class="clearfix"> if you want to break forcefully to next row
EDIT:-
For example
<div class="row">
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
</div>
<div class="row">
<div class="col-md-4">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
</div>
The same can be achieved without .row class
<div class="col-md-4">div1</div>
<div class="col-md-4">div2</div>
<div class="col-md-4">div3</div>
<div class="clearfix">div4</div>
<div class="col-md-4">div5</div>
<div class="col-md-4">div6</div>
<div class="col-md-4">div1</div>
I need to eliminate the large gaps between the boxes in the left column, but I can't figure out how to do it. (see image)
I have an html template that is generating the div contents with a for-loop (row of 2 col-xs-6 columns), so I can't set static height values and float things (because the number of lines is always changing).
The code looks similar to this:
<div class="row">
<div class="col-xs-6" py:for="title, content in data">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
{ title }
</div>
</div>
<div class="col-xs-12" py:for="line in content">
{ line }
</div>
</div>
</div>
Does anyone know some css wizardry to help me out?
At this point in time bootstrap doesn't support offset grids in a pinterest-like style.
Although, you can use bootstrap in combination with something like Masonry Grid to get the effect you are looking for:
http://masonry.desandro.com/
Id use match height as it suits your question more. Here is what you do.
Download this and add to your scripts. Then add a class calldd match-height to your div columns which you want to be the same height.
https://github.com/liabru/jquery-match-height/blob/master/dist/jquery.matchHeight-min.js
$(function() {
$('.match-height').matchHeight();
});
If any issues replace $ with jQuery
This is an easy question. But what I want to know is: Is there a way to delete a div without removing its content USING bootstrap? I can also refactor the question to: Is there a way to delete a div CLASS dynamically with Bootstrap?
My code is simple:
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
GOOGLE MAP
</div>
<div class="col-md-2"></div>
</div>
</div>
I know there already exists a way to make it visible and or hide it (hidden-phone ..), but what I want to do is actually remove the container, the row and the cols and leave the google map to fill the whole width.
What I have right now is:
<div class="container hidden-phone">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="googleMap"> ... </div>
</div>
<div class="col-md-2"></div>
</div>
</div>
And then, right after that, I add the div of the google map again. But instead of hidden-phone, now:
<div class="googleMap visible-phone"> ... </div>
This way, when you switch to a phone, the container and separations of the map with the screen are none.
This is the easiest way, but it seems a little unpractical, because maybe I don't see one, but it is there, so I'm downloading the map into the client twice, I believe that is not clever.
I could always use JavaScript(jQuery) to listen to the event of resizing and remove it my self.. That is not a problem at all, but maybe bootstrap has a build-in functionality already, something like a data attribute like "data-hidden-phone-class='someClass'", or maybe a class that hides some classes when resizing like: "hidden-classes-phone" this way when the screen resizes to a phone one, boostrap would hide all the classes of that element? Or something.
I know the names for attributes and classes are not attractive, but is for the purpose of the question.
I hope I made myself clear enough, let me know if you don't understand something, thanks!
I have a demo site which is located here to give you an idea of what's going on. If you scroll to the bottom where you see the 9 individual posts they are all laid out properly. How ever if you shrink the screen to anything less then 1232px's youll see that the 7th post breaks away from the others and shifts down.
Now I am using default styles to align them as such, using row and then span4. Can any one explain why this happens? And any way to fix it?
Your span totals should add up to 12. Your example site however adds up to more than 40! I don't think there is any defined behaviour for what should happen if you don't use it as intended.
From Bootstrap homepage
"The default Bootstrap grid system utilizes 12 columns"
So the total of your spans must add to 12 per row. ie.
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
<div class="row">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
<div class="row">
<div class="span7">...</div>
<div class="span3 offset2">...</div>
</div>
I'm experimenting with Bootstrap and using jsfiddle.net to create some quick and dirty tests.
I'm running into a brick wall on a really simple test however. I just want to see the grid system in Bootstrap, so I've duplicated their first example:
<div class="row">
<div class="span4">Span 4</div>
<div class="span8">Span 8</div>
</div>
However, it doesn't seem to work-- the "Span 4" and "Span 8" appear stacked rather than in the expected two-column layout.
Am I missing something obvious? Here's the fiddle: http://jsfiddle.net/8Xf2j/1/
Thanks
If you use the bootstrap-combined.min.css file, it means that the Responsive Layout is active.
Moreover, you have to use a .container to set the minimum width (if not, the body will fit the window, which will result in stacking anyway - on small screens).
Here is one way to use the grid : Demo (jsfiddle)
<div class="container">
<div class="row">
<div class="span4">Span 4</div>
<div class="span8">Span 8</div>
</div>
</div>
You should notice that only the bootstrap.min.css file is included in the resources.
Notice that the width of span is already defined. Its total width is 960px(span4(320px) + span8(640px) = span12(960px)). So jsfiddle is showing the result like this. Create an html file and try it, setting the border for your reference.