'Bootstrap-like container in Quasar?

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?



Solution 1:[1]

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;
    }
}

Solution 2:[2]

When you display a microsite in an iframe or HTML5 web component (or native app web view) IMO the best way would be to add a authorization HTTP request header with the JWT access token? e.g.

 Authorization: bearer [JWT]

Adding HTTP headers to iframe is discussed here. Looks like it's possible, but also might be some limitations... if you do run into problems you could always add the JWT as a querystring param and convert this to HTTP header in API gw that sits in front of your back-end API... note: if you do the querystring approach you should ensure there's no PII in your access tokens (which there probably shouldn't be regardless) as this would not be encrypted in transit.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tofandel
Solution 2 Ryan.Bartsch