I am creating a grid with tailwind and flexbox. Is it possible to create a 7 column grid? I know I can use width percentage but what would be the best practice here?
Actually the best solution would be to use CSS Grid instead Flexboxes to do this. Tailwind supports grid with up to 12 columns by default (docs).
<div class="grid grid-cols-7">
<div class="col-span-1">1</div>
<div class="col-span-3">2</div>
<div class="col-span-3">3</div>
</div>
If You really need to use flex:
By default there are classes w-1/2, w-1/3, w-1/12 etc but not w-1/7. We can set width for div manually in style="" or CSS, but the best practice would be to extend Tailwind configuration.
We need to add to tailwind.config.js new width classes (docs):
module.exports = {
theme: {
extend: {
width: {
+ '1/7': '14.2857143%',
+ '2/7': '28.5714286%',
+ '3/7': '42.8571429%',
+ '4/7': '57.1428571%',
+ '5/7': '71.4285714%',
+ '6/7': '85.7142857%',
}
}
}
}
Now we can use our x/7 columns:
<div class="flex">
<div class="w-1/7">1</div>
<div class="w-3/7">2</div>
<div class="w-3/7">3</div>
</div>
If You only want to get 7 columns with equal width, then we do not need to extend config and use width classes at all:
<div class="flex">
<div class="flex-1">1</div>
<!-- ... -->
<div class="flex-1">7</div>
</div>
Related
I don't know how to make this kind of col 3 and 6 size.
Middle column has no padding, but it is not enough.
I was trying to make different sizes of col.
#media (min-width:992px){
.col-md-6 { width: 52,5641%;}
.col-md-3 { width: 23,7179%;}
}
but no success.
With Bootstrap you dont need to add media queries or your own width, just use the BS grid system (you can read more here) and let it handle all the tough work. Based on your picture a 3 column layout would use something like this:
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
Make sure you columns total 12 like above (3+6+3) If you need extra padding in between columns just add a nested DIV and apply the spacing you want to those.
<div class="row">
<div class="col-md-3">
<div class="myclass">
this will have extra padding
</div>
</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-3">.col-md-3</div>
</div>
.myclass {
padding: 20px;
}
Updated
Based on your comment if you want column 6 to be slightly larger than it is you will either need to expand that column and "shrink" the outer 2 columns to something like this:
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-8">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
If that's not what you are going for then you can create your own table within bootstrap.
<div class="row">
<div class="custom-col">My custom left side</div>
<div class="custom-main">my main column</div>
<div class="custom-col">My custom right side</div>
</div>
Sizing each of the column as you need.
Maybe Bootstrap is not the best option for your problem. It works if only you can divide the screen in 12 equal parts. Rewrite this rule could break other stuff.
What about using flexboxes or other CSS framework more flexible?
Is it possible to remove the padding from one particular grid within Boostrap 3 -
I need to layout images responsively but the design requires no gaps between columns.
Bootstrap 3 introduced row-no-gutters in v3.4.0
https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters
Yep you can do it by creating a custom style sheet and adding a additional css selector to the col class. [http://www.bootply.com/FtnGzu0dea][1]
/* CSS used here will be applied after bootstrap.css */
.thumbnails {
padding: 0;
}
<div class="wrapper">
<div class="container">
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
<div class="col-md-3 thumbnails">
<div class="thumbnail"><img src="http://placehold.it/350x150"></div>
</div>
</div>
</div>
[1]: http://www.bootp
ly.com/FtnGzu0dea
My suggestion is to add a class for removing the padding at a certain media query width. Here is a test case that uses a header image that should respect the padding at all but the small size. At that point it has no padding and fits the full width of the viewport. I highly recommend using #screen-xs-max if you are compiling LESS source files. It avoids the one pixel jump for media queries that use max-width.
http://jsfiddle.net/jmarikle/htmn5Lov/
CSS
#media (max-width: 767px) { /* replaced with #screen-xs-max if using LESS */
.sm-no-padding [class*=col-] {
padding: 0;
}
}
HTML
<div class="row sm-no-padding">
<div class="col-sm-12">
<img class="img-responsive" src="//placehold.it/2000x1000"/>
Image and/or content in a row where we remove the padding for small screens
</div>
</div>
If you want more granular control with columns rather than at the row level, just apply the class to the columns and change your selector to [class*=col-].sm-no-padding
You can also create a new CSS class and add the following code into your stylesheet.
Custom CSS:
.no-padding > [class*='col-'] {
padding-right:0;
padding-left:0;
}
new CSS to use into your HTML div
.no-padding
In Bootstrap 3 I am able to do the follow (for semantic markup):
.div1 {
.make-xs-column(12);
}
.div2 {
.make-xs-column(12);
}
Example HTML:
<div class="div1">
<!-- Stuff Goes Here -->
</div>
<div class="div2">
<!-- More Stuff Goes Here -->
</div>
Within inline class definitions I can change the order of div1 and div2 by doing:
<div class="div1 col-xs-push-12">
</div>
<div class="div2 col-xs-pull-12">
</div>
Is it possible to change the column ordering with LESS mixins? Or is this feature not currently available? Would it be good practice to do something like this?:
.div1 {
.make-xs-column(12);
.col-sm-push-12;
}
.div2 {
.make-xs-column(12);
.col-sm-pull-12;
}
Edited: I meant to ask about xs columns rather than sm. Should I do pull and push on sm+ devices and reverse the order of my markup?
It is the same story as with .make-*-column(), i.e. there're .make-*-column-offset .make-*-column-push and .make-*-column-pull mixins.
I'm using foundation 3 to build a responsive website but I want to have the Footer and Navigation background width to occupy the entire width? I have named my rows as
class="row navigation"
class="row footer"
I tried looking for how to fix this but I'm out of options. I'm assuming it is a small fix in the foundation.css file but it's a bit too overwhelming at the moment as I'm new to it.
Any poiinters much appreciated.
I ran into the same problem yesterday. The trick is, for full width spanning blocks, you just keep them out of the row/column structure, since row/column will always apply the default padding. Keep your footers and headers on their own, and use row/column inside them.
<header>
This will span the full width of the page
</header>
<div class="row">
<div class="twelve columns">
This text will flow within all typical padding and margins
</div>
</div>
<footer>
This will span the full width of the page
<div class="row">
<div class="twelve columns">
This text will flow within all typical padding and margins
</div>
</div>
</footer>
What I have been doing is to add a custom class so that I can chain it with .row and override the max-width setting.
<div class="row full-width"></div>
.row.full-width {
width: 100%;
max-width: 100%;
}
I put width in here too to cover bases, but it is already declared in foundation.css so you can just omit it.
If you're using Zurb Foundation Framework, simply remove the row class and wrap the element in a class container that is 100% width. Now you probably want to center the stuff, use class centered like this:
<div class="container navigation">
<div class="centered">
Some navigation stuff
</div>
</div>
I completely disagree with the answer. You shouldn't have to use !important
Please refer to my article and demo at http://edcharbeneau.github.com/FoundationSinglePageRWD/
You should be able to get what you need from there. The demo is for 2.2 but is very similar in function to v3.
Foundation 6 supports this feature naturally with row expanded. code example:
<div class="expanded row">
...
</div>
Read more here: http://foundation.zurb.com/sites/docs/grid.html#fluid-row
Use "Section" as in:
<section>
<div class="row">
<div class="small-12 columns">
</div>
</div>
</section>
Then, assign an ID to the section and use that for your background.
This is in regards to Foundation 5. None of the answers given so far, provide edge-to-edge, full widths. That's because inner .columns add padding.
For a true edge-to-edge, full width content, add this to your CSS.
.row.full { width: 100%; max-width: 100%; }
.row.full>.column:first-child,
.row.full>.columns:first-child { padding-left: 0; }
.row.full>.column:last-child,
.row.full>.columns:last-child { padding-right: 0; }
Simply add .full class to a .row you wish to extend full width.
<div class="row full">
<div class="medium-6 column">This column touches Left edge.</div>
<div class="medium-6 column">This column touches Right edge.</div>
</div>
Just override the max-width property as max-width: initial;, for example,
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
<div class="row fullWidth"> </div>
this works for me :)
I know that there are already many answers, but I think I have something new to add in this topic if someone is using Foundation 5 and stumbled upon this question (like me).
As Foundation is using REM units, it would be best to alter .row class using them and by adding extra class, so you can have only selected rows full-width. For example by using .full class:
.row.full {
max-width: 80rem; /* about 90rem should give you almost full screen width */
}
You can see that it is used like this even in documentation page of Zurb Foundation (they altered .row class, though): http://foundation.zurb.com/docs/ (just look into page source code)
You really would want to keep the row class otherwise you lose a lot of the power of the grid system. Why not change the setting for $rowWidth from 1000 (default) to 100%. This can be found in the file foundation_and_overrides.scss
Just set the
$row-width: 100%;
http://foundation.zurb.com/forum/posts/927-full-width-layouts
I am not sure if I am missing something, but I had to add a .row div for the .centered to work. I can still style the .header to have a full width background in this case, but the .container method did not work for me.
<header class="header">
<div class="row">
<div class="centered">
Logo and stuff
</div>
</div>
<div class="row">
Some navigation stuff
</div>
</header>
If you don't give it the "row" class and put columns inside it works on a 100% width
If you're using sass, this is a better way:
<div class="row full-width"></div>
.row{
&.full-width{
width: 100%;
max-width: 100%!important; //might be needded depending on your settings
&>.column:first-child,
&>.columns:first-child{
padding-left: 0;
}
&>.column:last-child,
&>.columns:last-child{
padding-right: 0;
}
}
}
yes, just use like this:
<div class="large-12 columns">
<h2>Header Twelve Columns (this will have full width of the BROWSER <---->></h2>
</div>
I'm currently building a website using Twitter bootstrap (which is amazing!).
I had the layout using:
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
</div>
Which works great, I have 2 divs per row basically, and we didn't have to include a counter in our loop to get rid of the margins. It was perfect! But we decided to change our mind about having a fixed layout, so I switched from the .row to .row-fluid. And this is when the problem comes.
I know have something like this:
<div class="row-fluid">
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
</div>
And the div's with .span6 work well for the first row, but then the margin-left on the .span6 are showing up starting from the second row, therefore the layout is, well, ...not good.
I'm surprised it works amazing for fixed layout but not row-fluid. Is there a work-around for this? I used this on all my site, so having to add counters for all of them would...too much work.
Here is JS Fiddle:
http://jsfiddle.net/denislexic/uAs6k/3/
Any help appreciated, thanks.
Your 2 examples actually have 4 <div class="span6"></div> within a full-width 'row'... adding up to '24', or twice the width meant for a 'row' or 'row-fluid', based on the 12 column grid setup. You're basically creating dropping floats when there are too many to fit within the parent row's width.
(This is also why it seems that 'margin-left:0' is not being applied to your 3rd 'span6', which looks like it's the first 'span6' of a 2nd row.)
In a default/fixed 'row', the nested column's 'span*'s + 'offset*'s will need to be less than or equal to its parent's column 'span*', OR if it's a first-level row, then 12, because the floated 'span*' widths are in pixels.
In a flexible/fluid 'row-fluid', the column widths are set by percentage, so each row and nested row can have nested column 'span*'s and 'offset*'s that add up to 12, each time.
http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem
This should solve your issue with the 'row-fluid' setup.
http://jsfiddle.net/csabatino/uAs6k/9/
<h1>NOW this is working.</h1>
<div class="row-fluid">
<div class="span6">Content</div>
<div class="span6">Content</div>
</div>
<div class="row-fluid">
<div class="span6">Content</div>
<div class="span6">Content</div>
</div>
<h1>Default fixed 'row' is working, too.</h1>
<div class="row">
<div class="span6">Content</div>
<div class="span6">Content</div>
</div>
<div class="row">
<div class="span6">Content</div>
<div class="span6">Content</div>
</div>
If you know the number of span for each row, you can use an expression like this:
.row-fluid [class*="span"]:nth-child(3n+1) {
margin-left: 0;
}
for example: if you have 3 spans for each row, the above expression will removes margin from the first span of each row. And the below one removes the margin-right for the last element on each row:
.row-fluid [class*="span"]:nth-child(3n+3) {
margin-right: 0;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
It only removes margin for the first child so you will need to add another class or change span6 to have margin-left:0;
I solved it by putting an empty div with span12 at the begining, uggly in the code but effective in the gui
If the app can't count elements and divide into rows, removing margin-left and adding padding-right worked just fine for me:
.gal [class*="span"] {margin-left:0; padding-right:20px;}
http://jsfiddle.net/uAs6k/116/
I just did this with jQuery instead:
$(document).ready(function(){
function doFluidFirstSpan() {
var top = $('.thumbnails > li:first-child').position().top;
$('.thumbnails > li').each(function(){
if($(this).position().top > top) {
$(this).addClass("alpha");
top = $(this).position().top;
}
});
}
doFluidFirstSpan();
}
and the css:
.alpha { margin-left: 0 !important; }