CODEWITHSUNDEEP
cssangularsassionic3
nff
nff

Reputation: 151

How to add custom css in Ionic 3

I have a html page written in Ionic. I want to add border bottom to every row in the grid. How can I do that.

<ion-grid *ngFor="let item of items">
    <ion-row>
      <ion-col>
        <img src='../assets/imgs/doctor.png'>
      </ion-col>
      <ion-col col-10>
        {{item}}
      </ion-col>
    </ion-row>
  </ion-grid>

Upvotes: 0

Views: 3628

Answers (3)

Prashant
Prashant

Reputation: 1385

You can add your custom css as global or to specific component only

Here is the difference

  • app.scss(Global) is the main .scss file. It is used to declare any styles that will be used globally throughout the application. Although it is the “main” .scss file, you won’t likely use it often – most of the styling will happen in the component specific .scss files.

  • You will also have one .scss for each component you create. When we create a Page, we have a class definition in the .ts file, the template in the .html file and any styles for the component in the .scss file. Although it’s not strictly required, you should always create the .scss file for any components that have styling. And style in .scss is used for specific component only.

Now its you choice where you want to use following lines of css code

ion-row {
    border-bottom: 5px solid red;
}

Upvotes: 1

Rida Am
Rida Am

Reputation: 379

If your component is "example"

example.scss:

page-example {
  ion-row {
    border-bottom: 1px solid black;
  }
}

Upvotes: 0

Yuvraj Patil
Yuvraj Patil

Reputation: 8726

Add following code in you app.scss:

ion-row {
    border-bottom: 5px solid red;
}

It will add border bottom to every row.

Upvotes: 1

Related Questions