Is this behaviour somehow possible:
The structure:
<div class="col">
text…
<div class="image two-col-width"></div>
</div>
<div class="col">
text…
<div class="image"></div>
<div class="image two-col-width"></div>
</div>
<div class="col">
text…
</div>
the columns are using float
As far as I can see this is not possible with css.
Even with multiple columns this will not work because column-span accept only none or all.
Is there any workaround like a javascript plugin to make this work?
Thanks a lot
It's indeed not possible to do it with floats only because the float columns can't track or calculate the size of the colored divs going cross column. However this is easily achievable with Flexbox.
Related
If I have a scenario using Bootstrap 5 like...
<div class="container">
<div class="row row-cols-auto">
<div class="col">One</div>
<div class="col">Two</div>
<div class="col">Three</div>
</div>
</div>
All columns currently take whatever width their content needs.
I want column two to be as wide as it can be without interfering with the display of columns one and two.
Is this possible with Bootstrap alone or would I need to rely on additional CSS styling?
Just found the answer. Make all columns EXCEPT the one I want to take up all the space col-auto. Make that one class="col".
<div class="container">
<div class="row">
<div class="col-auto">One</div>
<div class="col">Two</div>
<div class="col-auto">Three</div>
</div>
</div>
I know Bootstrap is design mobile first. I wonder if the possible layout is possible with just Bootstrap's CSS classes?
Figure A on size col-md or larger
And when screen is col-sm or col-xs, go to B or C. (2 different solutions).
I'm looking for the correct div layouts for A->B and A->C.
The heights for each section are random because the content generated in them will be dynamic. I added heights in the divs just for filler, but they will be dynamic and can't be set.
The following DOES NOT work...
Fiddle ... https://jsfiddle.net/s4jj30wf/
<div class="row">
<div style="background:blue" class="col-xs-12 col-md-4">
<div style="height:100px"></div>
</div>
<div style="background:yellow" class="col-md-8 col-xs-12">
<div class="row">
<div style="background:green" class="col-md-12 col-xs-12">
<div style="height:20px"></div>
</div>
<div style="background:pink" class="col-md-12 col-xs-12">
<div style="height:100px"></div>
</div>
<div style="background:red" class="col-md-12 col-xs-12">
<div style="height:100px"></div>
</div>
</div>
</div>
<div style="background:orange" class="col-md-4 col-md-pull-4 col-xs-12">
<div style="height:50px"></div>
</div>
</div>
Solution: There are 2 ways based on if the columns have static height or dynamic height. If they have static height then we have a pure css solution using the float and clear property as well as margin-top property to achieve this.
Sample pure css with fixed height of columns:
http://codepen.io/Nasir_T/pen/ZBOgoe
If the height is not fixed and dynamic then we will need use of jquery to adjust the margin-top property in order to dynamically kill the gap between the mis-aligned 2 elements based on A->B and A->C scenario. We will be using the default jquery and modernizr js for this simple solution.
Sample jQuery & css solution with dynamic column height:
http://codepen.io/Nasir_T/pen/VmjoPd
Hope this helps.
I think what you maybe looking for is column ordering where you can .push-md- and .pull-md-
In document there is some flow of elements, you can't just mix them as you like unless you position them absolutely.
Using only bootstrap classes, I think the only way how to do that is to duplicate the content - you will have all A, B and C in the page and based on screen size display the one you want - using classes visible-xs, hidden-sm etc.
But duplicating content is usually not wise idea.
I love bootstrap, but i'm trying to achieve something totally outsides its expected grid, which is to have cells stack under each other without grouped lines. Something like Pinterest, if you will.
Bootstrap normal grid:
Bootstrap no rows concept:
Perhaps the correct answer is "don't use bootstrap" but having built many sites with it, I would love to continue using it and find a way around this.
If indeed i should use another responsive framework with a grid system more like what I need, what would you recommend?
tia
I've worked on a similar problem for a nested drag'n-drop box api with goal to be compliant with bootstrap grid on final render, the builder wasn't a bootstrap grid but a home made similar paradigm of bootstrap grid and I've fixed it with the CSS3 marvelous flexbox
take a look at Solved by flexbox
I have putted a root row (only one for multiline) and added a class to it which implement
display: flex;
flex-wrap: wrap;
eg:
<div class="row flex-row">
<div class="col-6">Variable height content</div>
<div class="col-3">...</div>
<div class="col-12">...</div>
<div class="col-3">...</div>
...
</div>
and the css
.flex-row{
display: flex;
flex-wrap: wrap;
}
this will have the effect to adjust automatically the height of all the box that is on same line to the bigger one
Looks like you have to use JS to reach goal.
You can use following libs:
Jquery Wookmark - Light weight and fast. Used in myself resolving similar issue
Isotope - Flexible and reach functions one
Mansonry - Popular lib, similar to Isotope
You could try inverting columns and rows in bootstrap.
<div class="row">
<div class="col-sm-4">
<div class="row">Some content here</div>
<div class="row">Some content here with more text than the first content but it still needs some more</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
</div>
<div class="col-sm-4">
<div class="row">Some content here</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
<div class="row">Some content here</div>
</div>
</div>
Here is a jsfiddle of this.
The key thing to realize about the col-(size)-(gridsize) is that they will wrap left to right then top to bottom. So, if you make a col with a grid size less than 12, other col will begin to wrap around. You can also nest them as needed to split up the page. So, it's possible to create a 'rowless' layout like so:
(this isn't an amazing demo but it illustrates that what you want is possible)
http://jsfiddle.net/7575A/1/
you can use row in col and then but new cols in these rows
if you have problem in padding make your
classes no-padding / no-left-padding / no-right-padding
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
</div>
I'll just show you a jsfiddle I've created to illustrate what I'm trying to achieve:
http://jsfiddle.net/vraG7/3/embedded/result/
Here's the code for that part:
<div class="row">
<div class="twelve columns">
<h2 class="first_column category_title">Nome Categoria</h2>
<div class="row">
<div class="nine columns thumbnail"><img
src="http://www.placehold.it/125x125" alt=""></div>
<div class="three columns date"><time
datetime="2013-02-28" >28<br>02<br>2013</time></div>
</div>
<div class="row">
<div class="twelve columns">
<h2 class="post-title">Titolto del post</h2>
</div>
</div>
</div>
</div>
</div> <!-- category-column -->
What I'm trying to do is to have the 125x125 image and the date box to its right to be the same width as the orange box with "Nome categoria". I thought I did everything right, but apparently I'm missing something.
It is hard to say what exactly the problem is. You are overriding a lot of foundation styles. height, margin, etc. on a bunch of divs.
1) You are applying the background color that you hope to align to to an <h2>. I suggest applying it to the containing <div>. the h2 will never to do the edge of the div, therefore you will not be able to align them.
2) for the date you applying the color to the background. it is possible they are already aligned. if you change the above.
3) for troubleshooting nested grids, it is easy to add the panel class to all of them, this will increase the spacing but let you see the relationship of each nested grid to each other.
this is on foundation 4, but might be useful:
http://foundation.zurb.com/grid-example2.php
I am using the isotope plugin on my site which is in local development. I'm running into a css problem which i'm hoping someone will be able to help me with. Here's the situation.
<div class="wrapper"> //* Position is relative
<div class="portfolio1"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio2"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio3"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio4"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
</div>
This pretty much lays the portfolio items out in a grid. My problem is that I have a comment system inside which adds the comments inline. When this happens the ".portfolio" class slides underneath the remaining items on the page. Is there a way either through css or jquery that can remedy this problem? I understand that you can position the elements with relative and float them to keep them from running underneath, but as soon as you do that then the isotope plugin breaks down. Here's a screen shot of the problem as well.
Screen Shot
Cheers,
Mike
I'm guessing the comments are inserted with Ajax? Maybe there's some CSS attached to them that could be overridden to position them differently and keep them within their divs.
Just as likely, though, you shouldn't use Isotope for this. If you're using isotope just to create grid there are simpler ways to do that (you might only need to use float). Isotope does some very fancy footwork, does it differently in different browsers and really likes to work on elements with a nice, specific size. If the comments are getting added with javascript, changing the divs at the same as as Isotope is trying to calculate how it's going to move things around for the layout, you're going to run into trouble.