How to add css , bootstrap styles to your Angular 8

This tutorial on adding styles to an Angular 8 is in continuation of our Angular 8 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 8 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.

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.

1. In your terminal , execute the following commands in order to install ngx-bootstrap and bootstrap as shown below:
   

   									
   npm install ngx-bootstrap --save 
   npm install bootstrap --save   
   									
   								

   
   
2. The above command adds the dependencies to our angular 8 project , now let's tell our project to use bootstrap styles.
3. Just open your angular-cli.json file [in the root directory of the project] and add the following line in the styles section
   

   									
   . . . 
   
   "styles": [
   	"styles.css",
   	"../node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],
   
   . . .  
   									
   								

   
   

OK great! we've successfully added Bootstrap to our angular 8 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.

							
ng serve                                                                     
							
						

In the above section , we added bootstrap to our Angular 8 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 components:

1. inventions.component
2. app.component

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.

                                
.invention {
	padding: 20px;
	background: #343434;
	color: #e4e4e4;
	border-radius: 10px;
	margin-bottom: 5px;
}

.invention-creator {
	background: #ededed;
	padding: 10px;
	margin: 5px;
}
                                
                            

Now open up inventions.component.html and make it look like the following:

                                
<li *ngFor="let i of inventions">
<div class="invention">
	<span> <b> Name: </b>  {{ i.name }}  || </span>
	<span>  <b> Inventor: </b>  {{ i.inventor }}  || </span>
	<span>  <b> Year: </b> {{ i.year }}  </span>
</div>
</li>





<!--  add new inventions -->

<hr>


<!-- Let the user enter information and display the same side by side -->

<!-- <label> {{ nameModel }} </label> -->
<div class="invention-creator">
<div>
	<input [(ngModel)]="nameModel" placeholder="enter name" class="form-control">
</div>
<hr>
<!-- <label> {{ inventorModel }} </label> -->
<div>
	<input type="text" [(ngModel)]="inventorModel" placeholder="enter inventor " class="form-control">
</div>
<hr>
<!-- <label> {{ yearModel }} </label> -->
<div>
	<input [(ngModel)]="yearModel" placeholder="year" class="form-control">
</div>

<br>

<!-- call the createInvention() function from component on click of button -->
<!-- note the use of parenthesis for the click event -->
<button class="btn btn-primary" (click)="createInvention()"> create invention </button>

</div>								
                                
                            

Note that apart from using our custom classes , we're also making use of classes from bootsrap. After we're done with the above steps , our app should look like the following upon serving.

In this part of the tutorial , we learned the following

1. How to add bootstrap framework to an angular project
2. How to add custom styling to our components

Hope you enjoying learning about the angular 8, in the next part we'll come back with more exciting Angular 8 stuff.