Bootstrap-like container in Quasar?

Question

The Quasar website states:

When using Quasar, you won’t need additional heavy libraries like [...] Bootstrap. It’s got those needs covered internally, and all with a small footprint!

However, I can't find out how to achieve a Bootstrap-container-like behavior in Quasar. I came across the example here which apparently uses rows and columns like bootstrap, but doesn't have any auto-resizing container element around it.

Does the container not exist in Quasar? Is it not recommended? Or am I just not looking at the right place?

user_12397250 · Answer

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


    Boo!

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

user_2977175 · Answer

Here is the version using quasar breakpoint variables

// Uncomment to override the default breakpoints
//$breakpoint-xs: 599px
//$breakpoint-sm: 1023px
//$breakpoint-md: 1439px
//$breakpoint-lg: 1919px

@import '~quasar/src/css/variables';

$container-padding: 20px;

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: $breakpoint-sm-min) {
    .container,
    .container-sm {
        max-width: $breakpoint-xs - $container-padding;
    }
}

@media (min-width: $breakpoint-md-min) {
    .container,
    .container-sm,
    .container-md {
        max-width: $breakpoint-sm - $container-padding;
    }
}

@media (min-width: $breakpoint-lg-min) {
    .container,
    .container-sm,
    .container-md,
    .container-lg {
        max-width: $breakpoint-md - $container-padding;
    }
}

@media (min-width: $breakpoint-xl-min) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: $breakpoint-lg - $container-padding;
    }
}

Bootstrap-like container in Quasar?

2 Answers