Angular material component with bootstrap alignment issue.

See more:

bootstrap

I am creating new application in angular 4. I was confused in bootstrap and Angular material, at last i have decide to go with including both. When i am using ,, inside div with bootstrap grid mobile first approach alignment is not coming correct means controls are moving up and down on select. please find the sanp.

Question 1) Attached code -Please tell me this approach is correct or not? Question 2) controlled are overlapping on screen adjust. Question 3) how to add bootstrap sidenav in this which will hide on click of toggle button and screen adjust. Question 4) on mobile view in portray mode it should come as grid view but it is not coming . Question 5) On screen resize material component is filling the entire div and coming as blank space.

Please find the below code and snap.

What I have tried:

<div class="container-fluid">
    <div class="page-header">
        <h1>Maintain Equipment </h1>
    </div>
    <form class="example-form">
        <div class="panel panel-primary">
            <div class="panel-heading">Add Equipment</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Manufacture" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Model" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Type" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Brand" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-select placeholder="Frequency start">
                            <md-option *ngFor="let FrequencyStartEndRange of FrequencyStartEndRanges" [value]="FrequencyStartEndRange.value">
                                {{ FrequencyStartEndRange.viewValue }}
                            </md-option>
                        </md-select>
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-select placeholder="Frequency End">
                            <md-option *ngFor="let FrequencyStartEndRange of FrequencyStartEndRanges" [value]="FrequencyStartEndRange.value">
                                {{ FrequencyStartEndRange.viewValue }}
                            </md-option>
                        </md-select>
                    </div>
                     <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Unid ID" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                     <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Serial" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                     <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Asset Tag" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                     <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Description" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                </div>
            </div>
        </div>
<hr>
<md-card>
                <div class="row">
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Manufacture" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Model" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Type" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-input-container>
                            <input mdInput placeholder="Brand" [mdAutocomplete]="auto" [formControl]="stateCtrl">
                        </md-input-container>

                        <md-autocomplete #auto="mdAutocomplete">
                            <md-option *ngFor="let state of filteredStates | async" [value]="state">
                                {{ state }}
                            </md-option>
                        </md-autocomplete>
                    </div>

                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-select placeholder="Frequency start">
                            <md-option *ngFor="let FrequencyStartEndRange of FrequencyStartEndRanges" [value]="FrequencyStartEndRange.value">
                                {{ FrequencyStartEndRange.viewValue }}
                            </md-option>
                        </md-select>
                    </div>
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <md-select placeholder="Frequency End">
                            <md-option *ngFor="let FrequencyStartEndRange of FrequencyStartEndRanges" [value]="FrequencyStartEndRange.value">
                                {{ FrequencyStartEndRange.viewValue }}
                            </md-option>
                        </md-select>
                    </div>
                </div>
       </md-card>
    </form>
    <hr>
    <div class="row">
        <div class="col-sm-12">
            <footer>
                <p>© Copyright 2013 Tutorial Republic</p>
            </footer>
        </div>
    </div>
</div>