0

I need a container, such that it would take 100% aavilable width until breakpoint (max-width). After reading official docs, responsive fluid container seemed like a perfect choice.

Responsive containers are new in Bootstrap v4.4. They allow you to specify a container that is 100% wide (fluid) until particular breakpoint is reached at which point a max-width is applied.

Breakpoints table from official docs which says that md breakpoint is maxed to 720px. But that behaviour is different in reality. During testing I discovered, that container-md max-width is set to 960px if viewport is more that 992px.

screenshot of active css rule on container-md

<b-container fluid="md">reproduced Codepen

Do I not understand docs correctly? Is there components with above described functionality?

Mihail S
  • 1
  • 2
  • containers have a padding of 15px on the left and right. You can remove this padding with class `px-0` or remove it only on md screend and up with class `px-md-0` – Troy Morehouse Apr 13 '20 at 11:39
  • @TroyMorehouse that does not change the behaviour described in the post – Mihail S Apr 13 '20 at 11:45
  • Here is hte link to the official Bootstrap v4.4.1 docs: https://getbootstrap.com/docs/4.4/layout/overview/#responsive BootstrapVue uses Bootstrap V4.4.1 SCSS (which would normally be default breakpoints, unless you have customized SCSS/CSS) https://github.com/twbs/bootstrap/blob/v4-dev/scss/_grid.scss – Troy Morehouse Apr 13 '20 at 13:27
  • @TroyMorehouse Once again, I don't see how it answers my question. The only thing that comes to my mind is that boostrap `container-{}` and vue-boostrap `fluid={}` behave the same way (which is also justified by inspecting css rules, see screenshot in initial post), but vue-boostrap docs wording is misleading. In contrast, bootstrap not only explicitly say "For example, .container-sm is 100% wide to start until the sm breakpoint is reached, **where it will scale up with md, lg, and xl.**". But also provides a table, where such behaviour is represented, unlike vue-bootstrap table. – Mihail S Apr 13 '20 at 15:28
  • See https://bootstrap-vue.js.org/docs/components/layout#grid-options Note I have posted comments and not answers. If I were fully answering I would have posted an answer below. ;) – Troy Morehouse Apr 13 '20 at 16:03
  • I have since added, as an answer, a link to the docs section that outlines the container maximum widths for the various breakpoints. – Troy Morehouse Apr 13 '20 at 16:56

2 Answers2

0

The container max-widths for the various breakpoints (assuming default SCSS vars) are listed in the layout docs at https://bootstrap-vue.js.org/docs/components/layout#grid-options

Troy Morehouse
  • 5,320
  • 1
  • 27
  • 38
0

make sure you have @import "~bootstrap/scss/bootstrap"; added in your custom.scss https://bootstrap-vue.org/docs#using-custom-bootstrap-scss

This work for me.

 <b-container :fluid="'md'">
</b-container>

in inspect element it should be class="container-md"

enter image description here

anson
  • 1,436
  • 14
  • 16