How to add bootstrap and relevant CSS for a particular page in a project?


#1

Friends,
I have a unique requirement to add bootstrap and relevant CSS files on 2 pages in ionic 3 project. But when I add it globally it affect some menus. So please advise how it can add.

one of my page html is

<!--
  Generated template for the SettingsPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
        <ion-toolbar color="primary">
            <button ion-button menuToggle>
                <ion-icon > <img class="title-image" src="assets/img/sa.png" /> </ion-icon>
            </button>  
            <ion-title>
                Search Localbody
            </ion-title>
        </ion-toolbar>
</ion-header>


<ion-content padding>
  <head>
    <meta charset="UTF-8">
    <title>Local Self Government Department : Government of Kerala</title>

	<!-- For prod -->
 <!--<link href="../../assets/html/css/bootstrap.min.css" rel="stylesheet"/>
 <link href="../../assets/html/css/AdminLTE.css" rel="stylesheet" type="text/css" />
 <link href="../../assets/html/css/homecss.css" rel="stylesheet" type="text/css" /> -->

	<! -- For Normal -->
 <!--<link href="assets/html/css/bootstrap.min.css" rel="stylesheet"/>
 <link href="assets/html/css/AdminLTE.css" rel="stylesheet" type="text/css" />
 <link href="assets/html/css/homecss.css" rel="stylesheet" type="text/css" /> -->

</head>
<div class="wrapper row-offcanvas row-offcanvas-left">
     
<!-- Right side column. Contains the navbar and content of the page -->
            <aside class="right-side">
                <!-- Content Header (Page header) -->
                <!--<section class="content-header">                	
                        Thiruvananthapuram Corporation 
                </section> -->

                <!-- Main content -->
                <section class="content">
                <script>

</script>
<div class="col-md-6">
     <h4 style="color:#F00" *ngIf="!connectivityFlag">You are offline, please be online to pay tax </h4>
            <form [formGroup]="formgroup" > 
                            <div class="box box-primary">
                                <div class="box-header">
                                    <h4 class="box-title">പഞ്ചായത്ത് / നഗരസഭ /കോര്‍പ്പറേഷന്‍</h4>
                                    
                                </div>
                              
                                <div class="hidden">
                                </div><div class="box-body">
                                        <div class="form-group">
                                           
                              <label> District</label>
                              <ion-item>
                                <ion-label>District</ion-label>
                                <ion-select formControlName="singleSelect" [(ngModel)]="data.singleSelect" [disabled]="!connectivityFlag">
                                    <ion-option *ngFor="let dis of district" value= {{dis.intDistrictId}} class="color">
                                        {{dis.chvNameEng}}
                                      </ion-option>
                                </ion-select>
                            </ion-item>
                            <label> Local Body Type </label>
                            <ion-item>
                                <ion-label>Local Body Type</ion-label>
                                <ion-select formControlName="lbTypeSelect" [(ngModel)]="data.lbTypeSelect" [disabled]="!connectivityFlag">
                                    
                                      <ion-option *ngFor="let lbt of localbodytype" value= {{lbt.intLBTypeID}} class="color">
                                        {{lbt.chvEngLBType}}
                                      </ion-option>
                                </ion-select>       
                            </ion-item>
                        
                                                                                                    
                                        </div>     
                                    </div>
                                    <div class="box-footer">
                                        <!--<button type="button" name="btn_selectinstitution" class="btn btn-primary" onclick="getLBList()">Search</button>-->
                                        <button ion-button block [disabled]="!singleSelect.valid||!lbTypeSelect.valid" (click)="getLBList(data.singleSelect,data.lbTypeSelect)" name="btn_selectinstitution" class="btn btn-primary">Search</button>
                                    </div>


                                        
                    </div>
                    </form>
                    
                            
                              <div *ngIf="searchFlag" class="box box-primary" id="divLBsearchresult"><div class="box">
                                <div class="box-header">
                                    <h3 class="box-title">Search result</h3>
                                </div>
                                <div class="box-body no-padding">
                                        <div *ngIf="searchFlag && result?.length==null">
                                                
                                              No search results , please try
                                        </div>


                                    <table *ngIf="result?.length > 0" class="table table-striped-list">
                                     <tbody>
                                        <tr>
                                            <th style="width: 10px">#</th>
                                            <th>Local Government Institution</th>
                                            <th style="width: 40px"></th>
                                        </tr>
                                 
                                        <tr *ngFor="let searchdata of result; let i = index">
                                            <td>{{i + 1}}</td>
                                            <td>{{searchdata.Column1}}</td>
                                            <td><a href="#" (click)="setLB(searchdata.intLBID,searchdata.Column1,searchdata.tnyLBCategory,data.singleSelect,data.lbTypeSelect)"><span class="badge bg-red">Select</span></a></td>
                                        </tr>
                                        </tbody></table> 
                                  
                                    
                                    </div> </div>
                            </div>
                            
</div>                 					</section><!-- /.content -->
            </aside><!-- /.right-side -->
</div>
       
       
            <ion-list>
                <ion-item *ngFor="let lb of localbody">
                  <ion-row>
                    <ion-col width-33>
                      <p>{{lb.lbid}}</p>
                    </ion-col>
                    <ion-col width-33>
                      <p>{{lb.lbname}}</p>
                    </ion-col>
                    <ion-col width-33>
                        <p>{{lb.lbname}}</p>
                    </ion-col>
                  </ion-row>
                </ion-item>
              </ion-list>

</ion-content>


Please advise

Thanks

Anes


#2

Got the solution… Thanks to @atif

Solution as

page-PropertyTaxSettings {
@import "../../assets/scss/tools/bootstrap.min";
html,
body {
overflow-x: hidden!important;
font-family: 'Source Sans Pro', sans-serif;
-webkit-font-smoothing: antialiased;
min-height: 100%;
background: #f9f9f9
;
}
}
// related CSS file rules

Thanks

Anes