Part-6 How to add css , bootstrap styles to your Angular 4
learn about making your angular 4 app beautiful with css , bootstrap styles
What we've learned so far
This tutorial on adding styles to an Angular 4 app is in continuation of our
Angular 4 Tutorial Series
and if you have not read the previous parts of the tutorial , it is recommended that you go through them first.
Modern webapps have their soul in design. And no modern apps can exist without a solid combination of UI and UX , here in this part of our Angular 4 tutorial series , we'll learn about how we can enhance the UI aspect of our app using styles. Angular
supports adding css , sass , bootstrap etc.
How to add bootstrap to Angular 4 app
Bootstrap is a CSS framework which helps with the styling of webapps. It has got a pre-defined set of css selectors which are ready to be utilized in webapps. Following is how we add bootstrap to our angular app.
In your terminal , execute the following commands in order to install ngx-bootstrap and bootstrap.
OK great! we've successfully added Bootstrap to our angular 4 project. Now just serve your app with ng serve and see how the look and feel of our InventionsHub app has been enhanced by Bootstrap.
Adding custom styles in Angular 4
In the above section , we added bootstrap to our angular 4 project InventionsHub and in this section , we'll learn how to add custom styles to individual components. You might have observed that with each
component there's always a file called component-nane.component.css . This is the style file for the component and this is where we define custom styles for our components. In our InventionsHub app , we have following 2 comopnents ::
Let's edit our inventions.component.css to give it an awesome look and feel. Just open up inventions.component.css in your editor and add the following css code to it.