Itvanya2016-01-09 13:49:55
Itvanya, 2016-01-09 13:49:55

1600px wide responsive layout using bootstrap. What about sizes?

Guys, hello. I received a task that I had not met before. I will say right away that I mainly made layouts with a width of 960-1000px. At the moment, the task is to make a layout with a width of 1600px (I received a layout of exactly this width from the designer), the image is stretched to the full width of which, and the main content is a container with a width of 1380px. Obviously, put a picture in the wrapper, and put the content block in it, giving it centering. The problem is how to do it responsively using bootstrap. The bootstrap container is 1170px wide and the container-fluid is 100% wide. That is, layout using relative units will no longer work, since the main content is a block with some given width, and around it is a picture stretching up to 1600px+. The same layouts up to the width, not exceeding the width of my screen, I typeset without problems,
Thanks for the answer. With past and upcoming holidays!

Answer the question

In order to leave comments, you need to log in

3 answer(s)
Sergey Kuznetsov, 2016-01-09

I join the previous Sergey ..)
More specifically: follow the link: getbootstrap.com/customize/#container-sizes
Set the sizes you need: instead of 1140+30 (30 is a spacer, by the way, which you can also change a little higher on the page) enter accordingly 1570px (it's just 1600px-30px).
Next, at the bottom of the page, click COMPILATE AND DOWNLOAD. You get the bootstrap mesh you need. Rename it, for example, to bootstrap1600.css and use it for your site. Everything!

noname1, 2016-01-21

Hold on!

@media (min-width: 1300px) {
.container {
    width: 1240px;
@media (min-width: 1400px) {
.container {
    width: 1340px;
@media (min-width: 1500px) {
.container {
    width: 1440px;
@media (min-width: 1720px) {
.container {
    width: 1600px;

gassmonkey, 2016-01-09

Wrap the .container with a wrapper with an image background. What is the problem?
In general, I advise you to abandon the bootstrap for the time being, if you cannot implement such elementary things without it.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question