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/
Related
I am using Twitter Bootstrap v3.0.3. My question relates to the attached screenshot.How can I add margins between the columns without causing the third column to drop/wrap
This effect could be achieved by using the padding declaration.
However this requires that an inner element defines the background color.
This will not cause the columns to expand as Bootstrap 3 uses box-sizing on its columns.
Edit:
Also, note that only columns should be immediate children of rows(List item 3).
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.
I want to create something like this in the Susy grid system:
The different color demonstrate different sections of the website and also their background colors. The vertical lines are the grid columns.
If I use a simple grid container I can set the background color only within the div which is inside the grid, but I would like to have the background color stretched to the left and right edge of the website. The content stays inside the grid.
I found a solution using multiple grid containers (one for each section), but I heard that this approach is not recommended.
And I also don't want to use a fluid grid container.
As Eric Meyer, a developer of Susy, pointed out in the comments, the Susy grid is just a concept and there is nothing wrong with having multiple grids on the website, one in each section.
I was dealing with a similar issue.
I had used the following approach: Have a div (let's call it 'content') inside each of your sections.
Apply the container class to the 'content' div. .content{#include container;}
This way, when you set the background color of a section, it spans the entire width of the page while the content in the sections adheres to the rules of the grid.
Hope it makes sense.
I have made a grid with the excellent Susy.
I want to add a box the content in my grid. When I do this, everything gets cramped, as the box aligns to the same edge of the grid as the content.
I can add padding to the box and then apply box-sizing: border-box. This removes the 'cramping' but it also causes the content to no longer align to the gird.
What I would really like to do is keep the content aligned to the grid and have the box extend into the gutter. Is there a way to do this with Susy?
I have attached a graphic to demonstrate what I mean:
The best solution currently is to add negative margins equal to your padding.
See: Susy: How to extend content box to cover grid-padding as well?
We've added a more complex version of that same mixin to Susy (here), but it hasn't been released in the gem yet.
With Bootstrap loaded, the div doesn't expand along with the contents inside. So if I insert an image or enlarge the text, it just kind of...gets squished in or squished out of the div.
http://jsfiddle.net/thomaswtsang/SSmJt/3/
What is it about Bootstrap that causes this to do this?
It looks like the bootsrap css used by you does not have the responsive features.
Please download the bootstrap library from the customize option.
You can have a look at this modified sample. You need to add some structural changes also as defined by bootstrap. You need to place the spanx definitions inside a row element to work correctly.