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.
Related
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
);
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?
tailwind CSS container width in 2xl is not desired for me .
how can I change it ?
I want to remove its default width in 2xl .
How can I do it?
Add only necessary breakpoints to tailwind.config.js. Default values you can see in tailwind theme config
module.exports= {
theme: {
screens: {
'sm': '640px', // => #media (min-width: 640px) { ... }
'md': '768px', // => #media (min-width: 768px) { ... }
'lg': '1024px', // => #media (min-width: 1024px) { ... }
'xl': '1280px', // => #media (min-width: 1280px) { ... }
}
}
}
Or if you need some custom solution not directly connected with your "screens" configuration (as suggested by JHeth) you can configure container behavior separately like this:
module.exports= {
theme: {
container: {
screens: {
'sm': '100%',
'md': '100%',
'lg': '1024px',
'xl': '1280px',
'2xl': '1600px',
}
}
}
}
I want to make this mixin responsive means it generate the media queries
based on breakpoints.
Here is my SCSS Code :
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
) !default;
#mixin overscroll-behavior-auto() {
-ms-scroll-chaining: chained;
overscroll-behavior: auto;
}
#mixin overscroll-behavior-contain() {
-ms-scroll-chaining: none;
overscroll-behavior: contain;
}
#mixin overscroll-behavior-none() {
-ms-scroll-chaining: none;
overscroll-behavior: none;
}
.overscroll-auto {
#include overscroll-behavior-auto();
}
.overscroll-contain {
#include overscroll-behavior-contain();
}
.overscroll-none {
#include overscroll-behavior-none();
}
#each $breakpoint in map-keys($grid-breakpoints) {
#include media-breakpoint-up($breakpoint) {}
}
I include my sass code thank you guys
Codepen
I made some modifications to the syntax of overscroll-behavior(). Mainly that its not overscroll-behavior-auto(), overscroll-behavior-contain() etc. any longer, but:
overscroll-behavior($behavior, $breakpoint);
This was necessary to not write the same code three times, since you can't generate mixins.
$overscrollBehavior: (
"auto": ["chained", "none" ],
"contain": ["none", "contain"],
"none": ["none", "none" ],
)!default;
$breakpoints: (
"xs": 0px,
"sm": 576px,
"md": 768px,
"lg": 992px,
"xl": 1200px,
"xxl": 1400px,
) !default;
#mixin overscroll-behavior($behavior, $breakpoint) {
$map: $overscrollBehavior;
#for $i from 1 through length($map) {
$label: nth(nth($map, $i), 1);
$values: nth(nth($map, $i), 2);
#if $behavior == $label {
$map: $breakpoints;
#for $i from 1 through length($map) {
$bp: nth(nth($map, $i), 1);
$bpValue: nth(nth($map, $i), 2);
#if $breakpoint == $bp {
#media (min-width: #{$bpValue}) {
-ms-scroll-chaining: unquote(nth($values, 1));
overscroll-behavior: unquote(nth($values, 2));
}
}
}
}
}
}
body {
#include overscroll-behavior(none, xs);
}
#media (min-width: 0px) {
body {
-ms-scroll-chaining: none;
overscroll-behavior: none;
}
}
If that's not quite what your looking for, let me know!
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();
}
}