W
W
WebforSelf2021-04-21 13:52:38
css
WebforSelf, 2021-04-21 13:52:38

How to make additional breakpoints bootstap 4?

The question of such a plan, there is a layout whose width is 1920px
But there is a container 1600.

I made such a plan - 1920 is - container-fluid
1600 - container

I set a limit using max-width. How to make container and container-fluid change proportionally

when resizing ?
What is it for, so that there are indents on the sides. After all, with a screen resolution of 1600, there will be only 15 pixels on the sides.
While the thought came like this, make up the proportions
1920 / 1600
1600 / 1333.333px;
etc. Or how to make the indents proportional?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
I
iBird Rose, 2021-04-21
@iiiBird


The question of such a plan, there is a layout whose width is 1920px
But there is a container 1600.

This means you don't need a container for 1920 because it's the usual 100%. those. just a normal div so it will work as you need.
for this and indents at container. because it was created for the content part. so that when the screen width is equal to the container - the text does not stick to the sides of the screen.
As for the rest, you open sass sources, the _variables.scss file and work with two variables: $grid-breakpoints and $container-max-widths as you like

S
Spisoktem, 2021-04-21
@Spisoktem

you can leave container-fluid for all desktops and add padding-left and padding-right as a percentage of main container (1600px) to 1920px width via media query anything below 1920px and above 1200px, i.e. it will be like this:

@media (max-width: 1919px) and (min-width 1200px){
.container-fluid{
padding-left: 8.33333333%;
padding-right: 8.33333333%;
}
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question