Angular MDBootstrap Sizing Utilities

MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make attractive webpages with its seamless and easy-to-use component. In this article, we will know how to use Sizing utilities in Angular MDBootstrap.

The Sizing Utilities are used to set the size of the element, relative to its parent element, by specifying the width and height utilities.

Syntax:

<div class='w-25 p-2'> Content </div>

Approach:

• Download Angular MDBootstrap from the official site.
• Extract the files to the current working directory.
• Install npm in the current project using the following command:

npm install

• After creating your project folder i.e. appname, move to it using the following command:

cd appname

• serve the project using the following command.

ng serve

Project Structure: After complete installation, it will look like the following:

Project Structure

Example 1: This is the basic example that illustrates how to use the Sizing utilities in Angular MDBootstrap.

app.component.html

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Sizing Utilities</h4>
    <br />
    <div class="w-25 p-2"
         style="background-color: rgb(226, 230, 26);">25%
    </div>
    <br>
    <div class="w-50 p-2"
         style="background-color: rgb(170, 26, 158);">50%
    </div>
    <br>
    <div class="w-75 p-2"
         style="background-color: rgb(46, 223, 247);">75%
    </div>
    <br>
    <div class="w-100 p-2"
         style="background-color: rgb(221, 20, 20);">100%
    </div>
    <br>
    <div class="w-auto p-2"
         style="background-color: rgb(72, 185, 91);">auto
    </div>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

Output:

Angular MDBootstrap Sizing Utility

Example 2: This example illustrates the rearranging of the height utilities in Angular MDBootstrap.

app.component.html

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Sizing Utilities</h4>
    <br />
    <div style="height: 100px;
                background-color: rgba(18, 20, 1, 0.1);">
        <div class="h-25 d-inline-block"
             style="width: 120px;
                    background-color: rgb(226, 230, 26);">25%
        </div>
        <div class="h-50 d-inline-block"
             style="width: 120px;
                    background-color: rgb(170, 26, 158);">50%
        </div>
        <div class="h-75 d-inline-block"
             style="width: 120px;
                    background-color: rgb(46, 223, 247);">75%
        </div>
        <div class="h-100 d-inline-block"
             style="width: 120px;
                    background-color: rgb(221, 20, 20);">100%
        </div>
        <div class="h-auto d-inline-block"
             style="width: 120px;
                    background-color: rgb(72, 185, 91);">auto
        </div>
    </div>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

Output:

Rearranging the height utility in Angular MDBootstrap

Reference: https://mdbootstrap.com/docs/angular/utilities/sizing/