Warning: session_start(): open(/var/lib/php/fpm/session/sess_1nntg4u8m5829kmq2503v236h3, O_RDWR) failed: No such file or directory (2) in /var/www/acc01/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Warning: session_start(): Failed to read session data: files (path: /var/lib/php/fpm/session) in /var/www/acc01/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Notice: Undefined index: HTTP_REFERER in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Angular Mobile Footer - Bootstrap 4 & Material Design. - Material Design for Bootstrap

Angular Mobile Footer

Angular Mobile Footer - Bootstrap 4 & Material Design

Footer similar to action bar, allows you to show some general information about your application to the user.


Basic example

Basic example of the footer component - MDBFooter wrapped with StackLayout

Android
Android footer
iOS
iOS switch

        <StackLayout>
          <MDBFooter footerColor="primary">

            <FlexboxLayout flexDirection="column" class="text-center mdb-footer-content">
              <StackLayout class="m-b-10">
                <Label style="font-size: 16; font-weight: bold" text="Footer Content"></Label>
                <Label text="Here you can use rows and columns here to organize your footer content." textWrap="true"></Label>
              </StackLayout>

              <StackLayout class="m-b-10">
                <Label style="font-size: 16; font-weight: bold" text="Links"></Label>
                <Label text="Link 1"></Label>
                <Label text="Link 2"></Label>
                <Label text="Link 3"></Label>
                <Label text="Link 4"></Label>
              </StackLayout>

              <StackLayout>
                <Label style="font-size: 16; font-weight: bold" text="Links"></Label>
                <Label text="Link 1"></Label>
                <Label text="Link 2"></Label>
                <Label text="Link 3"></Label>
                <Label text="Link 4"></Label>
              </StackLayout>
            </FlexboxLayout>

            <StackLayout class="mdb-footer-copyright">
              <Label text="@ 2020 Copyright: MDBootstrap.com" class="text-center"></Label>
            </StackLayout>
          </MDBFooter>
        </StackLayout>
      

Minimalistic footer

Footer may be minimalistic, with only copyright information

Android
Android footer
iOS
iOS switch

        <StackLayout>
          <MDBFooter footerColor="primary">
            <StackLayout class="mdb-footer-copyright">
              <Label text="@ 2020 Copyright: MDBootstrap.com" class="text-center"></Label>
            </StackLayout>
          </MDBFooter>
        </StackLayout>
      

With icons

Footer may be minimalistic or advanced. It may also has icons, or whatever you want

Android
Android footer
iOS
iOS switch

        <ScrollView>
          <StackLayout>
            <MDBFooter footerColor="secondary">
              <StackLayout class="mdb-footer-header text-center" style="background-color: rgba(0, 0, 0, .2)">
                <Label text="Some dummy text from footer header"></Label>
                <FlexboxLayout class="m-t-5" style="width: 50%;" justifyContent="space-between">
                  <MDBIcon name="facebook" class="fa mr-5"></MDBIcon>
                  <MDBIcon name="twitter" class="fa m-r-5"></MDBIcon>
                  <MDBIcon name="google-plus-g" class="fa m-r-5"></MDBIcon>
                  <MDBIcon name="linkedin" class="fa m-r-5"></MDBIcon>
                  <MDBIcon name="instagram" class="fa m-r-5"></MDBIcon>
                </FlexboxLayout>
              </StackLayout>
              <FlexboxLayout flexDirection="column" class="text-center mdb-footer-content">

                <StackLayout class="m-b-10">
                  <Label style="font-size: 16; font-weight: bold" text="Company name"></Label>
                  <Label text="Here you can use rows and columns here to organize your footer content." textWrap="true"></Label>
                </StackLayout>

                <StackLayout class="m-b-10">
                  <Label style="font-size: 16; font-weight: bold" text="Produts"></Label>
                  <Label text="MDBootstrap"></Label>
                  <Label text="MDWordPress"></Label>
                  <Label text="BrandFlow"></Label>
                  <Label text="MDB Mobile"></Label>
                </StackLayout>

                <StackLayout class="m-b-10">
                  <Label style="font-size: 16; font-weight: bold" text="Useful links"></Label>
                  <Label text="Your account"></Label>
                  <Label text="Become an Affiliate"></Label>
                  <Label text="Shipping Rates"></Label>
                  <Label text="Help"></Label>
                </StackLayout>

                <StackLayout>
                  <Label style="font-size: 16; font-weight: bold" text="Contact"></Label>
                  <FlexboxLayout justifyContent="center" alignItems="center">
                    <MDBIcon name="home" class="fa m-r-5"></MDBIcon>
                    <Label text="New York, NY, 10012, US"></Label>
                  </FlexboxLayout>

                  <FlexboxLayout justifyContent="center" alignItems="center">
                    <MDBIcon name="envelope" class="fa m-r-5"></MDBIcon>
                    <Label text="contact@mdbootstrap.com"></Label>
                  </FlexboxLayout>

                  <FlexboxLayout justifyContent="center" alignItems="center">
                    <MDBIcon name="mobile" class="fa m-r-5"></MDBIcon>
                    <Label text="+01 234 567 88"></Label>
                  </FlexboxLayout>

                  <FlexboxLayout justifyContent="center" alignItems="center">
                    <MDBIcon name="phone" class="fa m-r-5"></MDBIcon>
                    <Label text="+01 234 567 88"></Label>
                  </FlexboxLayout>
                </StackLayout>
              </FlexboxLayout>

              <StackLayout class="mdb-footer-copyright">
                <Label text="@ 2020 Copyright: MDBootstrap.com" class="text-center"></Label>
              </StackLayout>
            </MDBFooter>
          </StackLayout>
        </ScrollView>
      

Angular Mobile Footer - API

In this section you will find informations about footer and its required modules and available inputs, outputs, methods and events.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular Mobile library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.


    // MDB Angular Mobile Free
    import { MdbFooterModule } from 'mdb-angular-mobile'
  

Components

MdbFooter

Selector: MDBFooter

Type: MdbFooterComponent


Inputs

MdbFooterComponent
Name Type Default Description Example
footerColor string ' ' Allow to set the footer background & text color. Choose one from seven primary colors - primary, secondary, default, danger, success, info, warning. footerColor="danger"