Angular MDBootstrap Clearfix 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 Clearfix Utilities in Angular MDBootstrap. 

The Clearfix Utilities is used to automatically clear or fix its elements so that it does not need to add additional markup. The floated content can be cleared by specifying the clearfix utility ( .clearfix) to the parent element. It can also be used as the mixin.

Syntax:

<div class="clearfix">
    <button mdbBtn class="float-left">Content1</button>
    <button mdbBtn class="float-right">Content2</button>
</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

• Start the server using the following command:

ng serve

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

Project Structure

Example: This is the basic example that illustrates how to use the Clearfix Utilities in Angular MDBootstrap.

app.component.html

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap clearfix Utilities</h4>
    <br />
    <div class="bg-warning clearfix">
        <button mdbBtn color="info"
                class="float-left">GeeksforGeeks
        </button>
        <button mdbBtn color="danger"
                class="float-right">GeeksforGeeks
        </button>
    </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 Clearfix Utility

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