Hello to all, welcome again on therichpost.com. In this post, I will tell you, How to make business template with Bootstrap 4 and Angular 9?
Here are the complete commands and code snippet and please follow carefully:
1. Here are the basics commands to set angular 9 your system:
npm install -g @angular/cli ng new angularbootstrap //Create new Angular Project $ cd angularbootstrap // Go inside the Angular Project Folder ng serve --open // Run and Open the Angular Project http://localhost:4200/ // Working Angular Project Url
2. Here is the command to install bootstrap 4 and jquery into your angular 9 application:
npm install --save bootstrap npm i jquery@3.4.1 npm install --save @types/jquery npm install popper.js --save
3. Here are the commands to create header and footer components:
ng g c header ng g c footer
4. Here are the bootstrap 4 css and js path, you need to include into your angular.json file:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/popper.js/dist/umd/popper.min.js"]
5. Here is the html code, you need to add into your src\app\header\header.component.html file:
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Therichpost</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Header -->
<header class="bg-primary py-5 mb-5">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-lg-12">
<h1 class="display-4 text-white mt-5 mb-2">Business Name or Tagline</h1>
<p class="lead mb-5 text-white-50">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non possimus ab labore provident mollitia. Id assumenda voluptate earum corporis facere quibusdam quisquam iste ipsa cumque unde nisi, totam quas ipsam.</p>
</div>
</div>
</div>
</header>
6. Here is the html code, you need to add into your src\app\footer\footer.component.html file:
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Your Website 2020</p>
</div>
<!-- /.container -->
</footer>
7. Here is the html code, you need to add into your src\app\app.component.html file:
<app-header></app-header>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-8 mb-5">
<h2>What We Do</h2>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deserunt neque tempore recusandae animi soluta quasi? Asperiores rem dolore eaque vel, porro, soluta unde debitis aliquam laboriosam. Repellat explicabo, maiores!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis optio neque consectetur consequatur magni in nisi, natus beatae quidem quam odit commodi ducimus totam eum, alias, adipisci nesciunt voluptate. Voluptatum.</p>
<a class="btn btn-primary btn-lg" href="#">Call to Action »</a>
</div>
<div class="col-md-4 mb-5">
<h2>Contact Us</h2>
<hr>
<address>
<strong>Start Bootstrap</strong>
<br>3481 Melrose Place
<br>Beverly Hills, CA 90210
<br>
</address>
<address>
<abbr title="Phone">P:</abbr>
(123) 456-7890
<br>
<abbr title="Email">E:</abbr>
<a href="mailto:#">name@example.com</a>
</address>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-md-4 mb-5">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/300x200" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque sequi doloribus.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/300x200" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque sequi doloribus totam ut praesentium aut.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/300x200" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Find Out More!</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<app-footer></app-footer>
This is it and please run ng serve command and check the output. If you have any kind of query then please do comment below.
Jassa
Thank you
Recent Comments