I use mdl 1.1.3 from the cdn for a demo project. My layout is
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col mdl-cell--6-col-tablet mdl-cell--12-col-phone">div1</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--6-col-tablet mdl-cell--12-col-phone">div2</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--6-col-tablet mdl-cell--12-col-phone">div3</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--6-col-tablet mdl-cell--12-col-phone">div4</div>
</div>
mdl #media queries gives me a 75% of the parent div for the 6-col-cell.
#media (min-width: 480px) and (max-width:839px)
.mdl-cell--1-col at 12.5%
.mdl-cell--2-col at 25%
.mdl-cell--3-col at 37.5%
.mdl-cell--4-col at 50% when it should be 25%
.mdl-cell--5-col at 62.5%
.mdl-cell--6-col at 75% when it should be 50%
.mdl-cell--7-col at 87.5%
.mdl-cell--8-col at 100%
.mdl-cell--9-col at 100%
.mdl-cell--10-col at 100%
.mdl-cell--11-col at 100%
.mdl-cell--12-col at 100%
Is mdl fault or I do something wrong?
MDL site gave the answer.MDL has a different approach for grid system than other css frameworks. The number of maximum cells is deferent for different screen sizes.
12 cells for desktop screens
8 cells for tablets
4 cells for phones
that said for a simple layout like the one above we have to code it like this
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">div1</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">div2</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">div3</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">div4</div>
</div>
Related
From the official documentation, I am only able to come up with something like this:
<div class="grid grid-cols-2 gap-3">
<div>1st col</div>
<div>2nd col</div>
</div>
But this gives me 2 columns with an equal width - how do I specify that the first column would be like 20% of the total width (I only need to place there a simple icon) and the rest of the width would be the second column (here would be a text)?
Thank you in advance.
Set grid-cols-5 to the wrapper and col-span-4 to second column. It will cover 4/5 (80%)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<div class="grid grid-cols-5 gap-3">
<div class="bg-blue-100">1st col</div>
<div class="bg-red-100 col-span-4">2nd col</div>
</div>
Another way with grid-flow-col
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<div class="grid grid-flow-col gap-3">
<div class="bg-blue-100 col-span-1">1st col</div>
<div class="bg-red-100 col-span-4">2nd col</div>
</div>
You can define additional utilities by extending the theme in tailwind.config.js:
module.exports = {
theme: {
extend: {
gridTemplateColumns:
{
'20/80': '20% 80%',
'fixed': '40px 260px',
}
}
}
}
<div class="grid grid-cols-20/80 w-full h-64">
<div class="bg-blue-500"></div>
<div class="bg-red-500"></div>
</div>
<div class="grid grid-cols-fixed h-64">
<div class="bg-blue-500"></div>
<div class="bg-red-500"></div>
</div>
Updated for Tailwind CSS 3:
With the introduction of the JIT compiler and the ability to use arbitrary/dynamic values in some utilities, you can now do this without the config:
<div class="grid grid-cols-[20%_80%] w-full h-64">
<div class="grid grid-cols-[40px_260px] w-full h-64">
You can use col-span like below
<div class="grid grid-cols-5 gap-3"> // This will create 5 grids so 20% each
<div class="some-class"></div>
<div class="col-span-4"></div> // This will take 80% of space
</div>
Reference: https://tailwindcss.com/docs/grid-column#class-reference
Simple
<div class="flex flex-wrap">
<div class="w-1/5"> 20% </div>
<div class="w-4/5"> 80% </div>
</div>
https://v1.tailwindcss.com/components/flexbox-grids
further to #horuskol's solution for column templates, % doesn't respect the container dimensions so if you use gap then the grid will overflow it's container
if instead of % you use fr then the grid contents will be styled flexibly and so not overflow the container
eg.
grid-cols-[1fr_2fr] gives 2 cols at 33% / 66%
grid-cols-[1fr_2fr_1fr] gives 3 cols at 25% / 50% / 25%
I'm trying to fit image gallery with twitter bootstrap but I have some troubles to fit height exactly the same height.
I want to achieve 30px padding between all gaps (between small images and large image).
This is my code:
<section>
<div class="container">
<div class="row">
<div class="gallery__wrapper">
<div class="gallery__container ">
<div class="gallery__item gallery__item--small">
<div class="gallery__item--media"><img src="https://dummyimage.com/810x461/e0e0e0/000000.jpg" alt=""></div>
</div>
<div class="gallery__item gallery__item--small">
<div class="gallery__item--media"><img src="https://dummyimage.com/810x461/e0e0e0/000000.jpg" alt=""></div>
</div>
</div>
<div class="gallery__container">
<div class="gallery__item gallery__item--large">
<div class="gallery__item--media"><img src="https://dummyimage.com/810x964/e0e0e0/000000.jpg" alt=""></div>
</div>
</div>
</div>
</div>
</div>
</section>
https://codepen.io/anon/pen/QoeXYN
On xl screen it is OK, two columns have the same height, but for lg, md screen the large image is shorter. How can I achieve the same height and keep the same gap between images?
this is my situation with bootstrap I put 2 blocks next to each other:
class="col-6 col-sm-6 col-md-6 col-lg-6"
At a certain point when we reach 1000px I want the boxes to be among each other like this:
this now only happens when i reach 576px,
does someone how i can accomplish this.
code:
<div class="col-sm-6">
<div class="modal-dialog modal-dialog-enable">
<div class="modal-content modal-dialog-enable" >
<div class="modal-header modal-dialog-enable">
</div>
<div class="modal-body modal-dialog-enable">
<p>
</p>
</div>
<div class="modal-footer modal-dialog-enable">
</div>
</div>
</div>
</div>
THX a lot
You can read this information:
"At a certain point when we reach 1000px I want the boxes to be among each other like this."
1000px belongs medium, and now display 2 columns (each has 50% width).
Way 1: Rewrite class name
<div class="col-6 col-sm-6 col-md-12 col-lg-6">First column</div>
<div class="col-6 col-sm-6 col-md-12 col-lg-6">Second column</div>
Way 2: Overwrite default bootstrap.min.css
#media (min-width: 992px)
.col-md-6 {
width: 100%;
}
I'm using FlexLayoutModule with Angular6 and trying to achieve two div's of both 50% height vertically. I have tried this particular code but both are not occupying 50% height of parent.
<div style="min-height:50px">I'm header</div>
<div style="height:100%">
<div fxLayout="column" fxLayoutGap="12px">
<div fxFlex="50%" style="background:#5896FF">
<h1>I should occupy 50% height of my parent</h1>
</div>
<div fxFlex="50%" style="background:#525252">
<h1>I should occupy 50% height of my parent</h1>
</div>
</div>
Link of so far working example
This is what I'm trying to achieve
I made a couple of changes to your example to have two div's split the screen vertically 50 / 50.
<div style="height:100%" fxLayout="column">
<div style="min-height:50px">I'm header</div>
<div fxLayout="column" fxLayoutGap="12px" fxFlex>
<div fxFlex style="background:#5896FF">
<h1>I should occupy 50% height of my parent</h1>
</div>
<div fxFlex style="background:#525252">
<h1>I should occupy 50% height of my parent</h1>
</div>
</div>
</div>
You also need to update styles.css:
html, body {
height: 100%;
margin: 0;
}
Here is a link to the updated example.
You can use 50vh instead of 50% . it will use 50% of the vertical height.
<div fxLayout="column" fxLayoutGap="12px" style="">
<div fxFlex="50vh" style="background:#5896FF">
<h1>I should occupy 50% height</h1>
</div>
<div fxFlex="50vh" style="background:#525252">
<h1>I should occupy 50% height</h1>
</div>
I'm trying to create a custom row which has 8 logos sat in even columns at the bottom of a page when sat at full size desktop (lg) I need them to work responsively.
I've tried a few options - 2 cols with 4 cols nested and 4 cols with 2 cols nested... the problem I have is the gutter creates extra spacing between columns which means the logos won't space evenly. Any experts have a better idea how I could place 8 logos spaced evenly in a row? perhaps creating a new 8 col custom grid?
Any help would be great.
Thanks
N
Bootstrap 3
How about using a list-inline with 4 columns of 2 like this..
<ul class="list-inline row">
<li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
<li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
<li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
<li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
</ul>
Demo: http://bootply.com/90906
Bootstrap 4
Since Bootstrap 4 is flexbox, any number of equal width columns is now possible using the auto-layout grid..
<div class="container-fluid">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
</div>
</div>
Demo: http://www.codeply.com/go/AOVGoJncei
2 columns 6 with each 4 colums 3 inside row-fluid
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
</div>
Extending on my answer here: https://stackoverflow.com/a/25023129/2266157
Here is a demonstration of an eight-wide Bootstrap row structure, with
Equal padding (i.e. column gutters)...
<div class="container">
<h2>No padding (.no-pad) on outermost columns (.col-md-6)<br></h2>
<h3>Then nested columns can have padding...</h3>
<div class="row no-pad">
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><i>col1</i></div>
<div class="col-md-3"><i>col2</i></div>
<div class="col-md-3"><i>col3</i></div>
<div class="col-md-3"><i>col4</i></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><i>col1</i></div>
<div class="col-md-3"><i>col2</i></div>
<div class="col-md-3"><i>col3</i></div>
<div class="col-md-3"><i>col4</i></div>
</div>
</div>
</div>
</div>
...or indeed no column gutters.
<div class="container">
<h3>...or not</h3>
<div class="row no-pad">
<div class="col-md-6">
<div class="row no-pad">
<div class="col-md-3"><i>col1</i></div>
<div class="col-md-3"><i>col2</i></div>
<div class="col-md-3"><i>col3</i></div>
<div class="col-md-3"><i>col4</i></div>
</div>
</div>
<div class="col-md-6">
<div class="row no-pad">
<div class="col-md-3"><i>col1</i></div>
<div class="col-md-3"><i>col2</i></div>
<div class="col-md-3"><i>col3</i></div>
<div class="col-md-3"><i>col4</i></div>
</div>
</div>
</div>
</div>
This CSS is required in addition to Bootstrap
.row.no-pad {
margin-right:0;
margin-left:0;
}
.row.no-pad > [class*='col-'] {
padding-right:0;
padding-left:0;
}
Here is a working demo:http://www.bootply.com/eWWpj3G9tL
And the logo centring
To position the logos, I'd either use an <img class="img-responsive"> or if they're smaller than the column width then you could CSS center them with text-align:center (or the bootstrap class text-center placed on the .col-*) or using the following CSS:
#logos img {
display:block;
margin:0 auto;
}
Sounds like this is for a specific module so I would just create a simple new grid for this...
.eightLogos .logo {
float: left;
width: 12.5%;
margin: 0;
padding: 0;
}
Its Simple... Just add another column to your css.
Its best not to edit bootstrap CSS (and use a cdn).
So... We need to create the column css for all screen types.
I usually address 3 screen sizes which means creating 3 css sets for this column
big screens & normal screens
medium screens (ipad ext.)
small screens (mobile phones ext.)
Decision time:
Since we are talking about 8 columns which is a lot
its best to go with these css rules (in my opinion)
i almost always use a .container class for my designs which
makes big screen mode suitable in tablet unless in portrait mode.
In short, Here are a good set of css rules
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
eight-col {width: 50%; padding: 0 15px;}
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
eight-col {width: 20%; padding: 0 15px;}
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
eight-col {float: left; width: 12.5%; margin: 0; padding: 0 5px;}
}
Please note:
i play around with padding as i see fit. Its best to leave some extra padding when in mobile mode but you can play around with it ;)