Angular MDBootstrap Figures Content

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:

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

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.

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Figures Content</h4>
    <br />
    <figure class="figure">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
            class="figure-img img-fluid z-depth-1" 
            style="width: 400px">
        <figcaption class="figure-caption">
            GeeksforGeeks
        </figcaption>
    </figure>
</div>

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

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

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:

taran910

Follow

Improve

Article Tags :

• Web Technologies
• AngularJS
• MDBootstrap
• Angular-MDBootstrap
• Angular-MDBootstrap-Content

+1 More