Does bootstrap have a way to specify justified columns, in the same way that I could do with tables? In other words, I know I want six columns across, but using span2 will give me six equal columns. But this will look inconsistent because some of my columns have less text than others, and I want them equally spaced.
If I resorted to tables and didn't specify column widths, it would distribute each column width proportionately, giving me the exact effect I'm looking for.
Any ideas?
No, you can not. Not unless you want to tweak the grid yourself. Having a span2 column that has less width than other span2 columns breaks the layout and defeats the point.
One possibility is to create an inner div inside the column and give it either padding or margins to make its content area smaller.
Otherwise, just roll your own grid and use that instead. It's fairly easy.
Related
I imagine there is a simple way to do this, but I can't wrap my head around it.
I have a container that's display: grid, and all I need is:
if there are one or two children, it should have two columns
if there are more than two children, it should have three columns
I don't want to do with some logic that checks the number of children (I'm using emotion, by the way). There must be a way to do it with widths, grid-template-columns, etc.
Please help!
You can use grid-auto-columns co-jointly with grid-template-colums to have a minimum set amount of columns with more being added if there are enough children.
I want to use bootstrap's well component on a horizontal form.
Most rows of the form only have one or two fields in a set of columns, and I am specifying the width of each column.
I would like to style some of the of rows in a well, but I don't want to have the well go across the entire screen, because it looks weird to have so much extra space to the right of the fields. I only want to style the maximum width of the columns in the rows.
If enclose the grid within a div of a set size, then all of the controls' sizes and positioning are affected.
Is there anyway to style a row this way?
Is there a way to create a div that has the right width, and position underneath the actual rows?
I want to utilize CSS3 Columns around my site as it on wide pages provides a better UX for the users. However if I use CSS3 Columns, sometimes the left column is full (lets say 20 lines of text) and the right side only have2 lines of text. Can I with pure css3 (maybe Flexbox) make it have equal amount of content? Or do I need JS to fix this?
Beaware I'm not talking about equal height, but equal amount of content :)
You'll need to specify a height property.
From the Mozilla docs:
The CSS3 Column specification requires that the column heights must be
balanced: that is, the browser automatically sets the maximum column
height so that the heights of the content in each column are
approximately equal.
However, in some situations it is also useful to set the maximum
height of the columns explicitly, and then lay out content starting at
the first column and creating as many columns as necessary, possibly
overflowing to the right. Therefore, if the height is constrained, by
setting the CSS height or max-height properties on a multi-column
block, each column is allowed to grow to that height and no further
before adding new column. This mode is also much more efficient for
layout.
Sorry it was a padding-bottom which messed it up. When I remove that it spreads out nicely. Strange!
I'm doing a project with bootstrap, and I have a problem with the alignment of the s columns. These apparently are not well aligned to the size of a specified column, so are spaces within the site.
I did not find some method that allows me to solve this.
I leave an image below.
Problem Image
It looks like you're putting multiple rows' worth of columns within the same <div class="row">. That works if they're all the same height, but yours aren't. Bootstrap implements its grid system by making each cell float: left, which will give kind of funky results if some columns are taller than others. Here's an example where you can kind of see how it ends up positioning variable-height cells.
Instead, you probably want to do multiple separate rows, as shown in the second third of that same example. Each row will start over at the left margin, fully under the row above it, which sounds like what you want.
Alternatively, you can add a <div class="clearfix"></div> as another way to start over at the left margin (as shown in the final third of that example). This isn't as clean, but it can give you more flexibility to do really fancy stuff with your responsive layout. See the documentation for responsive column resets.
I'd go with multiple rows unless you really need the flexibility of responsive column resets.
Now this is a tricky question, with the concern of not using tables or JavaScript for this task.
Basically I have a five columned row, one column takes any type of content that can extend the height, but the task is to make the sibling columns take up the same height as that column with fluid content.
Demo: http://jsfiddle.net/Mrg5E/
As you can see in the second row, it has bigger content inside it that takes up the height, but this breaks the siblings height too.
I've looked around proposed answers, mainly using tables or JavaScript - this is something I need to avoid this. I've also looked at hacks such as the Holy Grail, etc, but this is mainly for 2-3 columns when I have 5 columns (sometimes 4).
Is there a possible fix in CSS to match all the siblings heights?
If you have no idea what the one column with variable content's height will be, then no, you can't do this with CSS alone. You will need to either fake it, or use javascript.
If you have a fixed width layout, you could try the faux column technique. That's "faking it" with a background image that tiles vertically, giving the illusion that the columns are the same height. The example in the article uses two columns, but there is no reason you can't use it for five.
The other way is using javascript. If you are using jquery, there is a plugin that can help you out. The basic idea is to identify the greatest column height, then apply that height to the other columns.
Use the min-height property and for cross browser solution, take a look at:
http://css-tricks.com/snippets/css/cross-browser-min-height/
Working Example