Why Does Bootstrap 3 Force the Container Width to Certain Sizes

Why does Bootstrap 3 force the container width to certain sizes?

The official answer from the Bootstrap folks:

What it boils down to is that designing for specific breakpoints is
easier (in my mind) than designing for unlimited, unknown sizes. The
alternative you mention isn't wrong or bad, just different. I'd rather
us maintain the tiers with very specific ranges

Why is bootstrap's 'container' class not full-width?

Is this a question regarding why, by design, container doesn't fill out the entre screen?

While I can't claim I know for sure, I can imagine this is a decision based upon the fact that you rarely would want your content to start right at the edge of a screen. I can also imagine many people are more comfortable doing a couple of static layouts rather than a completely liquid design, not to mention some layouts can be very challenging to design with a percentage based width.

You could obivously go liquid and use max-width: 100% and apply padding to the container instead. Personally this is my preferred approach.

There's no best practice here, the better approach is largely based on the layout in question.

Bootstrap 3 - Set Container Width to 940px Maximum for Desktops?

In the first place consider the Small grid, see: http://getbootstrap.com/css/#grid-options. A max container width of 750 px will maybe to small for you (also read: Why does Bootstrap 3 force the container width to certain sizes?)

When using the Small grid use media queries to set the max-container width:

@media (min-width: 768px) {
.container {
max-width: 750px;
}
}

Second also read this question: Bootstrap 3 - 940px width grid?, possible duplicate?

12 x 60 = 720px for the columns and 11 x 20 = 220px

there will also a gutter of 20px on both sides of the grid so 220 + 720 + 40 makes 980px

there is 'no' @ColumnWidth

You colums width will be calculated dynamically based on your settings in variables.less.
you could set @grid-columns and @grid-gutter-width. The width of a column will be set as a percentage via grid.less in mixins.less:

.calc-grid(@index, @class, @type) when (@type = width) {
  .col-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
}

update
Set @grid-gutter-width to 20px;, @container-desktop: 940px;, @container-large-desktop: @container-desktop and recompile bootstrap.

Bootstrap: how do I change the width of the container?

Go to the Customize section on Bootstrap site and choose the size you prefer. You'll have to set @gridColumnWidth and @gridGutterWidth variables.

For example: @gridColumnWidth = 65px and @gridGutterWidth = 20px results on a 1000px layout.

Then download it.

Set the page width to max 970px within Bootstrap 3

Bootstrap actually have a less feature on their website. Here you can pick and choose what components of bootstrap you want to use. All of bootstrap is made to be responsive so you can change the size to be whatever you want and everything will inherit from that.

So if you want to define .container as max-width: 970px that might serve your purposes. Or maybe just change the media query breakpoints.

Edit: Just took a look and you can define the size of your grid system for each screen size in the customize section. @container-sm, @container-md, @container-lg

Second Edit: I forgot about this resource I had bookmarked from a while back. You will probably find it useful

Bootstrap 3 - align area to a column inside .container, size to edge of view port

Another approach to solve this issue can be using CSS Grid Layout. In order to do this, you can change a markup of the section of your page: get rid of the Bootstrap's .container wrapper and replace the .row element with your own grid container, like the following HTML:

<div class="section left-content side-map">
  <div class="grid-row">
    <div class="content col">
      Content - remain unchanged
    </div>
    <div class="map-col">
      <!-- the map goes here -->
    </div>
  </div>
</div>

and CSS:

@media (min-width: 768px) {
  .grid-row {
    display: grid;
    /* create 14 columns: 12 build up the actual grid,
       two more columns emulate left/right "margins" */
    grid-template-columns: 1fr repeat(12, 60px) 1fr;
  }

   .content {
    grid-column: 3 / span 7; /* span 7 columns starting from #2 (technically, the 3rd) */
  }

  .map-col {
    grid-column: 10 / span 5; /* span 5 last columns, including the right "margin" */
  }

}

@media (min-width: 992px) {
  .grid-row {
    grid-template-columns: 1fr repeat(12, 80px) 1fr;
  }
}

@media (min-width: 1200px) {
  .grid-row {
    grid-template-columns: 1fr repeat(12, 95px) 1fr;
  }
}

The key part of this solution is that "margins" that absorb the extra horizontal space outside the main 12 grid columns are also grid columns (with automatic width), and you can make your blocks span these extra columns just like any other, so the browser will do all the sizing math for you automatically.

You can see this approach in action in this fork of the Ilya Myasin's CodePen: https://codepen.io/SelenIT/pen/mjoomN?editors=1100. I also added the -ms-prefixed equivalents to CSS Grid properties there to make the demo work in IE10+ as well.

---

Related Topics