I'm upgrading a website and the latest cms version we are using uses Bootstrap 4 compared to the older version.
I was wondering if there is a quick way to change BS4 breakpoints & container sizes so that they resemble the ones of Bootstrap 3...
Maybe these BS4 scss variables would do the trick?
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
Ideally I wont have to change any css classes in my markup too. I was wondering if anyone has come across a similar requirement.
Would this do the trick?
$grid-breakpoints: (
xs: 0,
sm: 768px,
md: 992px,
lg: 1200px
);
$container-max-widths: (
sm: 750px,
md: 970px,
lg: 1170px
);
Related
I was looking at tailwind doc for container class and saw how it could be customized in tailwind.config.js, likely so:
module.exports = {
theme: {
container: {
padding: {
DEFAULT: '1rem',
sm: '2rem',
lg: '4rem',
xl: '5rem',
'2xl': '6rem',
},
},
},
};
But as it was said, only works in x direction, that's padding-left and padding-right.
Is there a way to add vertical padding in the config file like horizontal one?
I want to add a 50% container to every breakpoint.
For example: The witdh of .container is 1140px in the xl breakpoint.
So I want to do something like this:
.is-style-container-50 {
max-width: calc($container-max-widths / 2);
}
I found the variable $container-max-widths in the docs.
There are the breakpoints in it like this:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
The problem is, that I get an error message like this:
Error: (sm: 540px, md: 720px, lg: 960px, xl: 1140px) isn't a valid CSS value.
Is there any other way to use the container width for calculations?
Or do I have to use fixed values?
$container-max-widths is a list of values mapped to the keys (sm,md,lg,xl).
You need to get a value from the xl key of $container-max-widths.
Example for xl you need this:
.is-style-container-50 {
max-width: map-get($container-max-widths , xl) / 2;
}
To use all the breakpoints you need to cycle trough all the list:
#each $size-name in map-keys($container-max-widths){
$size-value: map-get($container-max-widths , $size-name);
.is-style-container-50 {
#include media-breakpoint-up($size-name){
max-width: $size-value / 2;
}
}
}
You can also build another list with 50% of values and use it with the Bootstrap mixin for add max-widths to his containers make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints):
$container-mid-max-widths: (
sm: #{map-get($container-max-widths, sm)*0.5},
md: #{map-get($container-max-widths, md)*0.5},
lg: #{map-get($container-max-widths, lg)*0.5},
xl: #{map-get($container-max-widths, xl)*0.5}
);
.mid-container {
// Using Bootstrap Mixin: make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints)
#include make-container-max-widths( $container-mid-max-widths , $grid-breakpoints );
}
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
This is a SASS map (https://sass-lang.com/documentation/values/maps), not a CSS instruction. I don't have enough informations to help you further but hope this hint will help.
I have a problem with the order of stacking of grid items whenever browser shrinks.
This is what I want on the normal desktop screen(lg):
---------------------------------------------
| col 1 | col 2 | col 3 |
---------------------------------------------
But After Shrinking the browser I am getting the following result:
-------------------------
| col 1 |
-------------------------
-------------------------
| col 2 |
-------------------------
-------------------------
| col 3 |
-------------------------
Can I with material ui Grid layout achieve this on a mobile screen:
-------------------------
| col 1 |
-------------------------
-------------------------
| col 3 |
-------------------------
-------------------------
| col 2 |
-------------------------
I have read articles on changing the order of CSS-grids for the same topic but how to achieve this using material-ui Grid layout.
Edit: I have revised the answer for MUI Core v5
<Grid container spacing={16} justify="flex-start">
<Grid item xs={12} sm={6} md={4} lg={4}>
<Paper>
<h1>{1}</h1>
</Paper>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={4} order={{ xs: 3, sm: 2 }}>
<Paper>
<h1>{2}</h1>
</Paper>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={4} order={{ xs: 2, sm: 3 }}>
<Paper>
<h1>{3}</h1>
</Paper>
</Grid>
</Grid>
https://codesandbox.io/s/xvv7o07614?file=/src/GridStacking.js
Extending to Olivier's answer Material-UI heavily uses the CSS flexbox layout within its implementation. As the documentation quotes
A flex container is the box generated by an element with a computed display of flex or inline-flex. In-flow children of a flex container are called flex items and are laid out using the flex layout model.
So Grid items are flex items and Grid Container is flexbox container in laymans language. Hence we can use the order property on Grid items to change their relative order of appearance when the Box or Grid Container resizes. So passing the style in the following manner to the grid item should work out
itemStyle: {
order: ${Desired_order_before_Shrinking},
[theme.breakpoints.up(`${DesiredScreenSize}`)]: {
order: ${Desired_order_after_Shrinking},
},
}
Finally doing <Grid item xs={12} md={6} className={this.props.classes.itemStyle}> will reorder that item. Hope it creates better understanding.
UPDATE:
Material UI V5. Thanks to #Adam Cooper's answer below
<Grid container spacing={2}>
<Grid item md={12} lg={4} order={{ md: 1, lg: 1 }}>col 1</Grid>
<Grid item md={12} lg={4} order={{ md: 3, lg: 2 }}>col 2</Grid>
<Grid item md={12} lg={4} order={{ md: 2, lg: 3 }}>col 3</Grid>
</Grid>
With material-ui v5 this can be achieved more elegantly using the order prop together with the new responsive style system:
<Grid container spacing={2}>
<Grid item md={12} lg={4} order={{ md: 1, lg: 1 }}>col 1</Grid>
<Grid item md={12} lg={4} order={{ md: 3, lg: 2 }}>col 2</Grid>
<Grid item md={12} lg={4} order={{ md: 2, lg: 3 }}>col 3</Grid>
</Grid>
In a React application using Material-UI, how a paper's width can be always expanded to a maximum of 600px regardless if its contents have a width of less or more than 600px, but keep the paper flexible, so when the paper's parent container's width shrinks to less than 600px, the paper shrinks its own width along the parent as well?
Currenty I have:
const styles = theme => ({
root: {
flexGrow: 1
},
paper: {
...theme.mixins.gutters(),
padding: theme.spacing.unit * 2
},
});
...
<Grid container className={classes.root}>
<Grid container justify="center">
<Paper className={classes.paper}>
</Paper>
</Grid>
</Grid>
Specifying a fixed width of 600px for the paper doesn't get the desired results, because when the paper's parent width shrinks to less than 600px (e.g. the browser is horizontally downsized) the no-longer-flexible paper remains rigid to 600px width.
You can use a combination of setting width to "100%" and maxWidth to 600.
const styles = theme => ({
root: {
flexGrow: 1
},
paper: {
...theme.mixins.gutters(),
padding: theme.spacing.unit * 2,
width: "100%",
maxWidth: 600
},
});
I'm trying to get only the containers grid from bootstrap4 grid system but I have an error on compiling and I really don't understand why :|
so this is the my custom scss file:
$grid-gutter-width: 30px !default;
$enable-grid-classes: true !default;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
) !default;
#mixin make-container() {
width: 100%;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
margin-right: auto;
margin-left: auto;
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the #content apply to the given breakpoint and wider.
#mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
#if $min {
#media (min-width: $min) {
#content;
}
} #else {
#content;
}
}
// For each breakpoint, define the maximum width of the container in a media query
#mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
#each $breakpoint, $container-max-width in $max-widths {
#include media-breakpoint-up($breakpoint, $breakpoints) {
max-width: $container-max-width;
}
}
}
#if $enable-grid-classes {
.container {
#include make-container();
#include make-container-max-widths();
}
}
#if $enable-grid-classes {
.container-fluid {
#include make-container();
}
}
and this is the error:
(xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) isn't a valid CSS value.
This should be compiled in some media-queries with given variables but
somewhere the movie is broken and ... so please give me a hint or something :|
I am using https://www.sassmeister.com/ for online compiling.
Your sass is missing a required function breakpoint-min used in the media-breakpoint-up mixin. It's located in the mixins/_breakpoints.scss file around line 26 of the latest Bootstrap source files (Nov/2018)
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 576px
#function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
#return if($min != 0, $min, null);
}
You've likely already found out since 11 months ago but I'll leave it here for anyone else to know to carefully read copied code and check for any required or missing functions, variables or mixins.
Here is the fixed code, I've test and works:
$grid-gutter-width: 30px !default;
$enable-grid-classes: true !default;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
) !default;
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
// 576px
#function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
#return if($min != 0, $min, null);
}
#mixin make-container() {
width: 100%;
padding-right: ($grid-gutter-width / 2);
padding-left: ($grid-gutter-width / 2);
margin-right: auto;
margin-left: auto;
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the #content apply to the given breakpoint and wider.
#mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
#if $min {
#media (min-width: $min) {
#content;
}
} #else {
#content;
}
}
// For each breakpoint, define the maximum width of the container in a media query
#mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
#each $breakpoint, $container-max-width in $max-widths {
#include media-breakpoint-up($breakpoint, $breakpoints) {
max-width: $container-max-width;
}
}
}
#if $enable-grid-classes {
.container {
#include make-container();
#include make-container-max-widths();
}
}
#if $enable-grid-classes {
.container-fluid {
#include make-container();
}
}