Bootstrap seems to want to enforce its own padding everywhere within the grid system (I'm using the non-responsive "container", "row", and "span.." classes.) I'd prefer to make my own widgets that live inside the constraints of the row system but enforce their own padding. Is there a canonical way to control the padding behavior of Bootstrap's rows?
Maybe you can customize padding values in LESS variables and re-compile. http://twbs.github.io/bootstrap/customize/
Related
I'm developing a pure flexbox grid framework called flexboxes. I'm looking to implement a way to offset flex items by a particular number of grid columns in any flex-direction. This is possible with percentage margin but can it be done in a simpler way using flex properties? With what's available in flexboxes#0.4.0? I'd rather not implement margin classes this way because doing to would seemingly require adding classes for all 4 directions to accommodate all flex-direction values.
I have a 3 column grid in Twitter Bootstrap. Each cell has text. For one column, I'd like to right align text and adjust right side padding for those cells. Is there something built into Bootstrap for this?
Or do I need to write a class and attach it to each cell that needs this alignment?
The Bootstrap class is text-right.
For the padding, you'll have to manually add any overrides to your CSS somehow. Either a consistent container for your third column. Or add a wrapper with a class to increase the padding on the right. (Though extraneous divs are never good!).
Just in case: I don't recommend adding this additional padding to override text-right itself since that may have weird effects elsewhere in the site when you use this same class.
Source: http://www.getbootstrap.com/css/
Was answering another question about centering a div that had the bootstrap's span12 class applied to it, and part of the solution was to reset the float as the span12, as well as the other span* classes, are floated.
Since span12 width is 100% when combined with row-fluid and 1170px when not (and other sizes that I suspect are meant to fill most of the area on different screen sizes)
This to me suggests that it is mostly a standalone grid item: not meant to have other grid elements floating along side it.
I could see if they wanted to allow for having other grid elements along side it for really huge sites (screen widths of like 2560px etc), except this would not work at all when using row-fluid as the first one in the row would take up all the space as it uses 100% width.
But I personally have not seen many, if any, sites that would use such a huge width that would allow for using a span12 grid element along side other grid elements.
So does bootstrap implement other styling methods that make it necessary to float the span12 class? Or are they just anticipating future use for huge sites?
As I use bootstrap myself, if it is necessary for other styling techniques I do not want to end up one day having removed the float when it is needed and also do not want to mislead others when answering questions if the resetting the float would end up messing up their layout when using bootstrap.
Edit
As DontFeedTheCode points out this has been addressed in Bootstrap 3, all the other grid classes get floated while the 12th one does not.
in the 2.3.2 version looks like they were using [class*="span"] as the selector for setting styles so span12 gets selected by accident
As bootstrap is written in LESS, and in 2.3.2 all span classes were generated using .gridColumn() mixin - all span classes had the float:left;. This is not for any large layout like 2500 or such.
From my understanding, gutters are the white space between columns. Questions:
In Bootstrap, I assume gutters are the spaces between .container and .container-fluid. Is this correct?
Gutter width seems to be between 20px - 30px based on display size. What to do if the design doesn't require spacing between containers?
1. Gutters
Gutters are the space between .span, whether it's in a .row or a .row-fluid. But the gutter width is defined by a different setting for the normal grid and the fluid one (one is fixed in px, the other is relative in %).
Additional values are set depending on the screen width, if you use the responsive layout.
Check this doc (same with v3)
Important : the gutter width is used in several others rules, for example the margin-left of the .row, or the width of the .container.
2. No gutters
Gutter widths are defined as LESS variables. If you want to use a grid that doesn't have gutters, you should download a customized version of bootstrap - see Grid System (same with v3).
I myself prefer to download the LESS files, import an override file after variables.less, set my own variables and compile it myself, so that I can upgrade Bootstrap without worrying about my previous modifications.
Is there any css/layout way we can have equal height columns via 960.gs
right now i have been using jquery equal height script
Any other recommended solution
You could try using the inline-block css display type. Depending upon your design that might do the trick, but won't if you need equal borders or backgrounds.
And you could use a <table>. I know how politically incorrect that is, but tables do work and are not hack. You may need to adjust the <td> style type for cellspacing and padding to get it compatible with the gs.960