Introduction
This is the 6th article as part of my 'Let's develop an Angular application' article series. So far, we have created an angular application and a few components, created a model class for our Bike entity, and created an array of hardcoded Bike details. Then, we displayed the bike details in the hardcoded array using ngFor.
Please go through the previous articles to get an overall idea of what we are trying to achieve.
In this article, we will see how to use bootstrap styles in an Angular application.
At the present, our application UI looks like the below screenshot.
We can use the bootstrap library to add some style properties to our app.
To do this, first, we need to install the bootstrap library into our application.
It's a very simple 2 step process:
Step 1
Install bootstrap using the below command:
npm install bootstrap – save
Here, I am installing bootstrap version 3 for our application.
Step 2
Add the bootstrap CSS file path in Angular.json file
The bootstrap folder will appear under node_modules folder
Copy the file path of the bootstrap.min.css file and paste it in style property array in the Angular.json file.
Note
If our application is already running, please stop it and re-run using the ng serve command to make the bootstrap styles applicable in your application.
We can test the bootstrap library working in our application by adding a test button style using the bootstrap class.
Let’s add a button in the bike-deatils.component.html file.
<button type="button" class="btn btn-success"> Book Test Drive</button>
Please refer to the screenshot below:
Here, we are using the btn-success class for our button. There are some other bootstrap classes for buttons such as btn-primary, btn-danger, etc.
For more, visit here >> https://www.w3schools.com/bootstrap/bootstrap_buttons.asp
Save the application and check the browser for the result. We will get the below screen.
A button will be added for each item.
So, the bootstrap classes are working.
Let’s play with simple bootstrap classes to improve the application aesthetics.
First, we can present each bike element in a box tile
For this, we are going to use 3 bootstrap classes to create box tile.
- list-group-item
- list-group-item-header
- list-group-item-description
In addition to this, we will use 3 more bootstrap classes to place the content in the correct position.
This classes can be used to make the table structure –row and column
We modified the bike-list-box.component.html file as below.
Actually we have created 2 div element and added class ‘row’ for one and ‘col-md-5’ for others (for child div)
Then, we moved the old content of the HTML file inside the child div and added bootstrap classes list-group-item, list-group-item-header, list-group-item-description.
The old and new implementation is showing in the below screenshot.
Save the file and check the browser to see the result.
You probably see a screen like in the below screenshot:
Awesome! Now the each bike details are showing inside a box or tile. It's ok, but we need some modification to make it look good. Right? Let’s do that.
We need to make some changes in our app.component.html file. Don’t worry. We are just adding some div elements and classes like row , col-md-7 and col-md-5
The old and new implementation are shown in the below screenshot:
Save the file and check the result in the browser.
We will see a screen like the below screenshot:
This is better than before. But something is wrong! – The size of each tile is not as expected.
Just comment on the row div and column div from the bike-list-box.component.html file (because we already applied this in the app component HTML). Please refer to the screenshot below.
Save the screen and check the result in the browser.
We will get a screen like in the below screenshot.
We have moved the position of the bike-details component to the right side of the bike-list component.
Success!
We have applied some bootstrap style classes for our application components to improve the UI.
Conclusion
In this article, I explained the steps to install and apply bootstrap styles in an Angular application and used a few bootstrap style classes in our bike portal application to display the bike details as tiles.
Happy Learning!