Open In App

Angular MDBootstrap Figures Content

Improve
Improve
Like Article
Like
Save
Share
Report

MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make good-looking webpages with its seamless and easy-to-use component. It is free for both personal & commercial use.

In this article, we will know how to use Figures Content in Angular MDBootstap. Figures Content is used to add figures in an element.

MDBootstrap figures are used for displaying images with the caption. A caption can be left-aligned or right-aligned by default is left-aligned. Make sure you have added the ‘img-fluid’ class to your <img> tag to make your image responsive.

Syntax:

<figure class="figure">
    <img src="link">
        <figcaption class="figure-caption">
            GeeksforGeeks
        </figcaption>
</figure>

Approach:

npm install
or 
npm install -y

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

cd appname

Start the server 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 Figures Content.

app.component.html




<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Figures Content</h4>
    <br />
    <figure class="figure">
        <img src=
            class="figure-img img-fluid z-depth-1" 
            style="width: 400px">
        <figcaption class="figure-caption">
            GeeksforGeeks
        </figcaption>
    </figure>
</div>


app.component.ts




import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    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:

Reference: https://mdbootstrap.com/docs/angular/content/figures/



Last Updated : 26 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads