Does anyone know if this can be accomplished with bootstrap mixins.
columns( number of parent)
Something like what Neat has.
In Neat the Columns mixins works like these
#mixin span-columns($span, $display: block) { ... }
Where $span can be 3 or something like 3 of 12
Specifies the number of columns an element should span. If the
selector is nested the number of columns of its parent element should
be passed as an argument as well.
thanks
When i understand your question well you should read Less mixins and variables.
You will find the mixins to generate semantic grid columns in the less/mixins/grid.less file of Bootstrap's source code.
To generate a div that overspans 3 columns you should use for instance:
div.three{
.make-xs-column(3);
}
Notice the mobile first nature of these mixins. With the above code the xs mixin generate CSS code which will be applied for all screen width (no media queries).
When using:
div.three{
.make-xs-column(6);
.make-sm-column(3);
}
You div will overspan 6 columns for screen width below the 768 pixels (thexs grid) and 3 columns above the 768 pixels, the sm grid and up (explicit calling the larger grid mixins is not needed unless you want to overspan a difference number of columns). It's inportant to start the mixins for the smaller grids before the larger grids, see also: Bootstrap 3 mixin multiple make-*-column
Related
I have this code, with border bottom in every row.
https://jsfiddle.net/brygom/0z582swx/3/
For some reason the border bottom of row not complete all row width. Even if i don't use overflow-auto the border not completed.
The problem is that you are forcing to use 13 .col-2 inside a unique row. In Bootstrap this is not possible because a row has a maximum size of 12, so if you want three equal-width columns across, you can use .col-4, if instead you want two equal-width columns across you can use .col-6. Here you can se in detail how the bootstrap grid system works.
If you try to substitute .col-6 to .col-1 infact, you can see that the width of the line increases. The problem is that you have 13 columns and so I think that using the Bootstrap grid system is not the better choice.
If you want to create a table I suggest you to use the Bootstrap table, in this way you can add as many columns as you want with your preferred customized style. (here you can find the documentation).
If you want to customize better the table you can use instead a normal <table>.
I'm currently having a problem trying to set to the left every sublist of the navigation bar so that it aligns correctly bellow every sublist if there is more than 6 columns, the problem happens from the 7th list. I'm using bootstrap and every sublist have a size of 2 (so from the 7th as it passes the 12 column size it moves down, as expected)
What I'm getting a result is
And the expected result is
Piece of code used per list:
<div class="sub-navigation-section col-md-2">Ul and li inside</div>
The CSS that is attempting to do the expected result is a Float:left;
Bootstrap uses a 12 column grid system so you won't be able to divide that up equally into 7 columns. You could do this by creating your own class that has a width of approx 14.285% (100/7) and the same properties as the bootstrap col-* classes (float left etc)... but remember you'll need to cater for different viewports etc
If you wont use javascript, you can alternatively use CSS3´s column-gap and column-width like in this example:
https://www.bootply.com/118335
It floats the boxes like waterfall layout. Hope this helps you.
I am using Bootstrap for having a better mobile design.
I am using this grid model:
.col-md-2 (navigation bar) .col-md-8 (content)- col-md-2 (right column)
with following width sizes:
16.66666667 % + 66.66666667 % + 16.66666667 %
But I would like to change .col-md-2 into 2 different sizes like
10.66666667 + 22.66666667, so I would have 2 different classes or is it possible to change the first used .col-md-2 class and then the second one in my later integreted css-file, because this classes are in different css id's.
I tried to create 2 own col-md classes, but this don't worked.
My solution in the second loaded css file (don't worked correct)
#menu.col-md-2 {width:22.66666667%;}
#rechts.col-md-2 {width:10.66666667%;}
The total witdh would be now to long, but I should be like before, because I add 6% to the first class and subtract 6% to the second class.
I want to change the sizes, The first column is to short for a 10inch tablet.
I advice you to create two different classes and apply them as you want.
E.g :
.col-md-2.specialCol1 {
// Special size
}
.col-md-2.specialCol2 {
// Special size 2
}
Do you know what I mean ?
EDIT
I suggest you to use this order :
.col-md-3 (navigation bar) .col-md-7 (content)- col-md-2 (right column)
To focus on the content.
Then, use the media queries to adapt, e.g. :
#media screen and (max-width: 640px) {
.yourCol {
// Your size
}
}
The above example will apply under 640px width. Detect what you need and apply changes.
I always suggest to not change the standard Bootstrap class widths. Create your own... By the way, why at all you need something like this? 10.6666 is really near the col-md-1, why don't use it? Pherapse you can obtain a good result without the need to create custom withs classes, but simply working with margins and paddings.
I've been working with Susy for a while now and came across a use case that I can't seem to figure out. The best way to explain it is to use Twitter as an example.
If you look on their site you'll see they use a three column standard layout with a break point at 1250. After that point is reached, the entire right most column 3 goes underneath column 1.
How is this done with pure CSS in Susy 2? When I look at twitter it seems like they are physically moving the content from column 3 into column 1. I'm assuming this is all done with JS but id rather do it a bit more clean. Ideas?
Looks like it was as simple as using breakpoint as another mixin for my columns. I simply added
#import "breakpoint";
#include breakpoint (new screen size here) {
.right span (5 of 13);
.left span (8 of 13 last);
.middle span (5 of 13);
}
Imagine you are using a CSS grid system and your page components are divs, snapped to the grid with a border radius.
If you wish to nest such components, the distance between the parent and child component must be at least a column width - right?
What if you want a smaller distance?
What if you want to nest up to 3 or 4 levels?
Any ideas?
Thanks
If you wish to nest such components, the distance between the parent
and child component must be at least a column width - right?
Why are using border radius to line up blocks/columns in a grid? Shouldn't you be using margins?
If you want to line things up in a grid, all grid columns must have a gutter.
What you're looking for in a CSS grid framework looks very much like 1KB Grid.
If you want more flexibility, you can use the Variable Grid System. From what you're proposing, there really isn't a need for you to use a custom grid or make a css grid framework.