Fastest Trick to convert Bootstrap 5.2.2 html template in angular 14

Hello friends, welcome back to my blog. Today this blog post I will tell you, Fastest Trick to convert Bootstrap 5.2.2 html template in angular 14.

In this post, guys we will cover below things:

• Bootstrap 5 Angular 14 Free Template Creation.
• Angular 14 Bootstrap 5 Responsive Toggle Navbar.

Angular14 came and Bootstrap5 also and if you are new then you must check below two links:

1. Angular14 Basic Tutorials
2. Bootstrap 5

Friends now I proceed onwards and here is the working code snippet for Fastest Trick to convert Bootstrap 5.2.2 html template in angular 14 and please use carefully this to avoid the mistakes:

1. Firstly friends we need fresh angular 14 setup and for this we need to run below commands but if you already have angular 14 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

npm install -g @angular/cli 

ng new angulardemo //Create new Angular Project

cd angulardemo // Go inside the Angular Project Folder

npm i bootstrap@5.2.2

ng g c header

ng g c footer

ng g c home 

2. Now guy’s we need to add below code inside our project/angular.json file:

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

3. Now guy’s we need to add below code inside our project/src/app/header/header.component.html file:

<div class="p-5 bg-primary text-white text-center">
    <h1>My First Angular 14 Bootstrap 5 Page</h1>
    <p>Resize this responsive page to see the effect!</p> 
  </div>
  
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class="container-fluid">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>

4. Now guy’s we need to add below code inside our project/src/app/footer/footer.component.html file:

<div class="mt-5 p-4 bg-dark text-white text-center">
    <p>Footer</p>
  </div>

5. Now guy’s we need to add below code inside our project/src/app/home/home.component.html file:

<div class="container mt-5">
    <div class="row">
      <div class="col-sm-4">
        <h2>About Me</h2>
        <h5>Photo of me:</h5>
        <div class="fakeimg">Fake Image</div>
        <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
        <h3 class="mt-4">Some Links</h3>
        <p>Lorem ipsum dolor sit ame.</p>
        <ul class="nav nav-pills flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <hr class="d-sm-none">
      </div>
      <div class="col-sm-8">
        <h2>TITLE HEADING</h2>
        <h5>Title description, Dec 7, 2022</h5>
        <div class="fakeimg">Fake Image</div>
        <p>Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  
        <h2 class="mt-5">TITLE HEADING</h2>
        <h5>Title description, Sep 2, 2022</h5>
        <div class="fakeimg">Fake Image</div>
        <p>Some text..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      </div>
    </div>
  </div>

6. Now guy’s we need to add below inside project/src/app/app.component.html file:

<app-header></app-header>
<app-home></app-home>
<app-footer></app-footer>

Friends in the end must run ng serve command into your terminal to run the angular 14 project (localhost:4200).

Guys click here to check the Angular 14 Bootstrap 5 Free Templates.

Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.

Jassa

Thanks