Angular MDBootstrap Sizing Utilities

Last Updated : 12 Apr, 2025

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:

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:

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

Angular MDBootstrap Clearfix Utilities

taran910

Improve

Article Tags :

Angular MDBootstrap Sizing Utilities

Similar Reads

Thank You!

What kind of Experience do you want to share?