Bootstrap-like container in Quasar?

I was facing the same issue. I don't think Quasar have this feature, and I ended up having to create my custom CSS for the container.

This is the class that I made inspired by Bootstrap, put this on your app.scss (or app.css)

// breakpoint variable, from https://quasar.dev/style/breakpoints// Except the xs one because I think 600px is too small$xs-breakpoint: 718px;$sm-breakpoint: 1024px;$md-breakpoint: 1439px;$lg-breakpoint: 1920px;.container,.container-sm,.container-md,.container-lg,.container-xl {  width: 100%;  margin-right: auto;  margin-left: auto;}@media (min-width: $xs-breakpoint) {  .container,  .container-sm {    max-width: 540px;  }}@media (min-width: $sm-breakpoint) {  .container,  .container-sm,  .container-md {    max-width: 920px;  }}@media (min-width: $md-breakpoint) {  .container,  .container-sm,  .container-md,  .container-lg {    max-width: 1140px;  }}@media (min-width: $lg-breakpoint) {  .container,  .container-sm,  .container-md,  .container-lg,  .container-xl {    max-width: 1440px;  }}

If you are using .css, just delete the variable and put the breakpoint value on the @media min-width directly

And then use the class

<q-page class="container">    Boo!</q-page>

I also made container classes for different break point. I found this useful when I have different page with different type of content. You can remove other container classes for specific breakpoint if you only need one type of container.

Of course, you can adjust the max-width on each breakpoint (or even the breakpoint value, but I won't recommend this) to your liking.

Check the css + html demo here