How to create your first website in Angular 10 -Part 2?

Hello to all, welcome to therichpost.com. In this post, I will tell you, How to create your first website in Angular 10 -Part 2?

Here is the part 1 of this post: How to create your first website in Angular 10 -Part 1?

Angular 10 came. If you are new in angular 10 then please check below links:

Learn Angular

Angular Basic Tutorial

In Part 1 , you have seen Angular install and run on your machine. In this Part 2, I will tell you, how to add bootstrap and create your first html page.

Here is complete code and please follow carefully:

1. After understanding the part 1, you need to run below commands to set bootstrap environment into your angular 10 application:

npm install --save bootstrap

2. Now you need to add below code into your angular.json file:

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

3. Now you need to add below code into src/app/app.component.html file:

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page In Angular 10</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

In the end, don’t forgot to run ng serve command. If you have any query then do comment below. In Part 3, I will tell you, how to create new pages(components) and make it working with angular routing.

Jassa

Thank you.