CODEWITHSUNDEEP
twitter-bootstrapangularbootstrap-4
AngularDebutant
AngularDebutant

Reputation: 1576

Add certain class depending on viewport width in Bootstrap

Is there any way to apply a specific class only on specific viewport width? (other than using media queries)

For example <div class="mb-1>Hello world</div> would apply a margin-bottom all the time.

but what if I wanted to apply it only when the view port is larger than sm?

I am using Angular, so the solution could use Angular helpers.

Upvotes: 1

Views: 1666

Answers (2)

Klooven
Klooven

Reputation: 3926

Most of the Bootstrap classes also have responsive classes.

In your case it would be mb-sm-1.

You can find out the responsive classes for all components in the Bootstrap docs.

Here's for example the responsive classes for the spacing utilities you asked about.

Upvotes: 1

prettyfly
prettyfly

Reputation: 3130

Not sure why you wouldn't want to use @media queries for this, I mean, that's what they're there for. But, if you must use an alternative method, you could detect viewport width with JS/TS and @HostListener to listen to the resize event, then use [ngClass] to apply the class.

Something like:

viewportWidth: number;

@HostListener('window:resize', ['$event'])
onResize(event) {
    this.viewportWidth = event.target.innerWidth;
}

viewportIsGreaterThan(viewportWidth: number): boolean {
    return this.viewportWidth > viewportWidth;
}

Then in your template:

<div [ngClass]="{ 'mb-1' : viewportIsGreaterThan(499) }">Hello world</div>

Upvotes: 1

Related Questions