Angular - Components with Styling - Adding Bootstrap to an Angular Project

[akash-coded]

Create an Angular app called login-app-with-bootstrap.

Create the login page with a login form and a navbar. The navbar link texts should come from the component class and the structure should be defined in the component template.

Use Bootstrap navbar and form styling.

[uzma23]

app.component.html

<h1 class="top small-top">Header</h1>
<app-navbar> </app-navbar>
<app-main> </app-main>
<app-footer> </app-footer>

navbar.component.html

<nav>
  <ul style="color: white">
    <li><a href="#home">Home</a></li>
    <li><a href="#team">Our Team</a></li>
    <li><a href="#project">Project</a></li>
    <li><a href="#contact">Contact</a></li>
    <li style="float: right">
      <input type="text" placeholder="Search Query" class="search-box" />
      <input type="button" value="Go!" class="go-btn" />
    </li>
  </ul>
</nav>

footer.component.html

<footer class="footer small-footer">
  &#169; Copyright 2050 by nobody.All rights reserved.
</footer>

main.component.html

<div class="cont123">
  <app-article></app-article>
  <app-aside></app-aside>
</div>

article.component.html

<div class="content">
  <h1
    style="
      text-align: center;
      font-family: Brush Script MT, Brush Script Std, cursive;
    "
  >
    Article Heading
  </h1>
  <section>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Soluta, eum
      aperiam velit accusantium libero dicta? Minima odio laborum minus
      cupiditate sed quo nesciunt iusto possimus blanditiis facilis consequatur,
      aliquid iste nobis iure facere beatae ex natus laudantium quasi dolorem at
      perferendis? Dolorem, saepe expedita? Itaque fuga sunt beatae tempore
      voluptates.
    </p>
  </section>

  <section>
    <h2 style="font-family: Brush Script MT, Brush Script Std, cursive">
      Sub section
    </h2>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id consectetur
      accusamus necessitatibus quibusdam accusantium? Quibusdam, maiores alias?
      Dolor, ex accusamus!
    </p>
  </section>

  <section>
    <h2 style="font-family: Brush Script MT, Brush Script Std, cursive">
      Another Sub section
    </h2>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id consectetur
      accusamus necessitatibus quibusdam accusantium? Quibusdam, maiores alias?
      Dolor, ex accusamus!
    </p>
  </section>
</div>

aside.component.html

<div class="sidebar">
  <h1
    class="head"
    style="font-family: Brush Script MT, Brush Script Std, cursive"
  >
    Related
  </h1>
  <nav>
    <ul class="small-list list-big">
      <li><a href="#">Oh I do like to be beside the sea.</a></li>
      <li><a href="#">Although i the north of England</a></li>
      <li><a href="#">Its never stop rainning</a></li>
      <br />
      <li><a href="#">Oh well...</a></li>
    </ul>
  </nav>
</div>

styles.css

body{
    background-color: gray;
    border: 12px solid gray;
    margin: 10px;
    padding: 10px;
  }

  nav {
      background-color: rgb(212, 76, 187);
    }

    nav > ul {
        list-style-type: none;
        margin: 0;
        padding: 20px;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
    }

    nav > ul > li {
        margin: auto;
    }

    li a:hover {
      background-color: rgb(219, 203, 203);
    }

    .content{
        grid-area: main;
        background-color:rgba(240, 248, 255, 0.952);;
        padding: 10px  ;
        margin: 10px 10px 10px  0px;
        
    }

  @media only screen and (max-width: 599px){
    h1.small-top{
    text-align: center;
    color: aliceblue;
    font-family: Brush Script MT, Brush Script Std, cursive;
    font-size: 25px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    }
    nav {
      background-color: rgb(189, 159, 26);
    }
    nav > ul {
        flex-direction: column;
    }

    .small-sidebar{
        grid-area: rsideBar;
        background-color: rgb(226, 43, 211);
        margin: 10px 0px 10px 10px; 
    }

    .small-sidebar > li {
      display:block ;
    }

    .small-content{
        grid-area: main;
        background-color:rgba(247, 248, 249, 0.952);;
        padding: 10px  ;
        margin: 10px 10px 10px  0px;     
    }
    
    .small-list  {
      flex-direction: column;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    .small-footer{
      background-color: aliceblue;
      margin-top: 25px;
    }
  }
  
  @media only screen and (min-width: 600px) {
    h1.top{
    text-align: center;
    color: aliceblue;
    font-family: Brush Script MT, Brush Script Std, cursive;
    font-size: 50px;
    padding-bottom: 0px;
    margin-bottom: 0px;
  }

    .sidebar{
        float: right;
        grid-area: rsideBar;
        background-color: rgb(226, 43, 211);
        margin: 10px 0px 10px 10px;
    }
    
    
    .cont123{
        display: flex;
    }
    
    li {
        float: left;
    }
    
    li a.list-big {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    li a:hover {
        background-color: rgb(219, 203, 203);
    }
    footer{
        background-color: aliceblue;
        margin-top: 25px;
    }
}

[Kuntapaliwal]

app.component.html

<app-login-navigation-bar></app-login-navigation-bar>
<app-login-body></app-login-body>
<app-login-footer></app-login-footer>

Login page body

<main class="col-md-5 mx-auto mt-4">
    <header class="text-center">
        <h1 class="display-4 text-primary text-uppercase">LOGIN</h1>
        <h6 class="text-secondary">Enter your credentials</h6>
    </header>
    <hr />

    <section>
        <form action="register-backend" method="GET" class="font-weight-bold">
            <!-- Email -->
            <div id="emailField" name="emailField" class="form-group">
                <label for="email">Email</label><br />
                <input type="email" id="email" name="email" class="form-control" placeholder="abc@xyz.com" autofocus
                    required />
            </div>

            <!-- Password -->
            <div id="passwordField" name="passwordField" class="form-group">
                <label for="password">Password</label><br />
                <input type="password" id="password" name="password" class="form-control" required />
            </div>

            <!-- Captcha -->
            <div id="captcha" name="captcha" class="row form-group">
                <div id="captchaCodeField" name="captchaCodeField" class="col-lg-6">
                    <label for="captchaCode">Captcha Code</label><br />
                    <input type="text" id="captchaCode" name="captchaCode"
                        class="form-control font-weight-bold font-italic text-primary bg-warning" value="Q23f42"
                        readonly />
                </div>

                <div id="captchaInputField" name="captchaInputField" class="col-lg-6">
                    <label for="captchaInput">Enter Captcha</label><br />
                    <input type="text" id="captchaInput" name="captchaInput" class="form-control" autocomplete="off"
                        autofocus required />
                </div>
            </div>

            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="keepMeSignedInCheck" />
                <label class="form-check-label font-weight-normal" for="keepMeSignedInCheck">
                    Keep me signed in
                </label>
            </div>

            <!-- Submit Button -->
            <div id="loginButton" class="my-4">
                <input type="login" value="Login" class="btn btn-block btn-primary" />
            </div>
        </form>
    </section>
</main>

login page navBar

<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
    </button>

    <a class="navbar-brand" href="#0">
        Sporty
        <img src="../../../Assets/Images/images (1).png" alt="" width="85px">Shoes
    </a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">


        <ul class="navbar-nav offset-8">
            <li class="nav-item">
                <a href="#" class="nav-link ">
                    <strong>Contacts</strong>
                </a>
            </li>

            <li class="nav-item">
                <a href="#" class="nav-link active">
                    <strong>LogIn</strong>
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">
                    <strong>SignUp</strong>
                </a>
            </li>
        </ul>


    </div>
</nav>

login page footer

<footer class="page-footer font-small indigo my-2">

    <!-- Footer Links -->
    <div class="container text-center text-md-left" style="color: white">

        <!-- Grid row -->
        <div class="row">

            <!-- Grid column -->
            <div class="col-md-3 mx-auto">

                <!-- Links -->
                <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

                <ul class="list-unstyled">
                    <li>
                        <a href="#!">Very long link 1</a>
                    </li>
                    <li>
                        <a href="#!">Very long link 2</a>
                    </li>
                    <li>
                        <a href="#!">Very long link 3</a>
                    </li>
                    <li>
                        <a href="#!">Very long link 4</a>
                    </li>
                </ul>

            </div>
            <!-- Grid column -->

            <hr class="clearfix w-100 d-md-none">

            <!-- Grid column -->
            <div class="col-md-3 mx-auto">

                <!-- Links -->
                <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

                <ul class="list-unstyled">
                    <li>
                        <a href="#!">Link 1</a>
                    </li>
                    <li>
                        <a href="#!">Link 2</a>
                    </li>
                    <li>
                        <a href="#!">Link 3</a>
                    </li>
                    <li>
                        <a href="#!">Link 4</a>
                    </li>
                </ul>

            </div>
            <!-- Grid column -->

            <hr class="clearfix w-100 d-md-none">

            <!-- Grid column -->
            <div class="col-md-3 mx-auto">

                <!-- Links -->
                <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

                <ul class="list-unstyled">
                    <li>
                        <a href="#!">Link 1</a>
                    </li>
                    <li>
                        <a href="#!">Link 2</a>
                    </li>
                    <li>
                        <a href="#!">Link 3</a>
                    </li>
                    <li>
                        <a href="#!">Link 4</a>
                    </li>
                </ul>

            </div>
            <!-- Grid column -->

            <hr class="clearfix w-100 d-md-none">

            <!-- Grid column -->
            <div class="col-md-3 mx-auto">

                <!-- Links -->
                <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>

                <ul class="list-unstyled">
                    <li>
                        <a href="#!">Link 1</a>
                    </li>
                    <li>
                        <a href="#!">Link 2</a>
                    </li>
                    <li>
                        <a href="#!">Link 3</a>
                    </li>
                    <li>
                        <a href="#!">Link 4</a>
                    </li>
                </ul>

            </div>
            <!-- Grid column -->

        </div>
        <!-- Grid row -->

    </div>
    <!-- Footer Links -->

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3" style="color: white">© 2020 Copyright:
        <a href="/" style="color: white"> SportyShoes.com</a>
    </div>
    <!-- Copyright -->

</footer>

style.css

/* You can add global styles to this file, and also import other style files */
/* You can add global styles to this file, and also import other style files */
body {
    background-color: rgb(180, 214, 245);
}

ul>li>a {
    color: white;
}

nav,
footer {
    background-color: rgb(89, 145, 234);
}

angular.json

"styles": ["../BootStrapLoginPagwWithAngular/node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
"scripts": ["../BootStrapLoginPagwWithAngular/node_modules/bootstrap/dist/js/bootstrap.js"]
},

[ghost]

app.component.html

<div class="com123">
    <app-header></app-header>
    <app-main></app-main>
    <app-footer></app-footer> 
</div>

header.component.html

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#">Sign up</a></li>
</ul>

header.component.css

ul {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  overflow: hidden;
  background-color: rgb(21, 21, 66);
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
 font-size:20px;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
}
.active{
background-color:rgb(21, 21, 66);
color: white;
}
li a:hover {
  background-color: orange;
  color: white;
}

main.component.html

<section class="vh-5" style="background-color: #d4dbda;">
  <div class="container py-5 h-50">
    <div class="row d-flex justify-content-center align-items-center h-100">
      <div class="col-12 col-md-8 col-lg-6 col-xl-5">
        <div class="card shadow-2-strong" style="border-radius: 1rem;">
          <div class="card-body p-5 text-center">
            <h4 class="mb-5">Sign in</h4>
            <div class="form-outline mb-2">
              <input type="email" id="typeEmailX-2" class="form-control form-control-lg" />
              <label class="form-label" for="typeEmailX-2">Email</label>
            </div>
            <div class="form-outline mb-2">
              <input type="password" id="typePasswordX-2" class="form-control form-control-lg" />
              <label class="form-label" for="typePasswordX-2">Password</label>
            </div>
            <div class="form-check d-flex justify-content-start mb-4">
              <input class="form-check-input" type="checkbox" value="" id="form1Example3" />
              <label class="form-check-label" for="form1Example3"> Remember password </label>
            </div>
            <button class="btn btn-lg btn-block btn btn-outline-dark" type="submit" style="background-color:rgb(212, 162, 25)">Login</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

footer.component.html

<footer class="page-footer font-small text-white" style="background-color: rgb(21, 21, 66)">
    <div class="footer-copyright text-center py-3">© 1996-2022, Amazon.com, Inc. or its affiliates</div>
</footer>   

screenshot

[gayatribabar]

angular.json

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

app.component.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Login Page</title>
  </head>
  <body>
    <nav
      class="navbar navbar-expand-lg navbar-fixed-top navbar-dark bg-primary"
    >
      <a class="navbar-brand" href="#0">
        <img src="logo.jpg" alt="navbar-brand" width="30" height="30" />
        E-Com
      </a>

      <ul class="navbar-nav" style="margin-left: auto">
        <li class="nav-item">
          <a
            href="http://127.0.0.1:3000/registration.html"
            class="nav-link active"
            ><strong>Signup</strong></a
          >
        </li>
      </ul>
    </nav>

    <section class="vh-100 gradient-custom">
      <div class="container py-5 h-70">
        <div class="row d-flex justify-content-center align-items-center h-100">
          <div class="col-12 col-md-8 col-lg-6 col-xl-5">
            <div
              class="card text-black"
              style="border-radius: 1rem; background-color: rgb(100, 152, 243)"
            >
              <div class="card-body p-5 text-center">
                <div class="mb-md-5 mt-md-4 pb-5">
                  <h2 class="fw-bold mb-2 text-uppercase">Login</h2>
                  <p class="text-white-50 mb-5">
                    Please enter your login and password!
                  </p>

                  <div class="form-outline form-white mb-4">
                    <input
                      type="email"
                      id="typeEmailX"
                      class="form-control form-control-lg"
                    />
                    <label class="form-label" for="typeEmailX">Email</label>
                  </div>

                  <div class="form-outline form-white mb-4">
                    <input
                      type="password"
                      id="typePasswordX"
                      class="form-control form-control-lg"
                    />
                    <label class="form-label" for="typePasswordX"
                      >Password</label
                    >
                  </div>

                  <div class="row mb-4">
                    <div class="col-md-6 d-flex justify-content-center">
                      <div class="form-check mb-3 mb-md-0">
                        <input
                          class="form-check-input"
                          type="checkbox"
                          value=""
                          id="loginCheck"
                          checked
                        />
                        <label class="form-check-label" for="loginCheck"
                          >Keep me signed in</label
                        >
                      </div>
                    </div>
                  </div>

                  <a href="http://127.0.0.1:3000/Home_page.html"
                    ><button
                      class="btn btn-outline-light btn-lg px-5"
                      type="submit"
                    >
                      Login
                    </button>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        class="d-flex flex-column flex-md-row text-center text-md-start justify-content-between py-4 px-4 px-xl-5 bg-primary"
      >
        <!-- Copyright -->
        <div class="text-white mb-3 mb-md-0">
          Copyright © 2020. All rights reserved.
        </div>
      </div>
    </section>
  </body>
</html>

[ghost]

navbar.component.html

<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-dark bg-primary">
  <button
    class="navbar-toggler"
    type="button"
    data-toggle="collapse"
    data-target="#navbarSupportedContent"
  >
    <span class="navbar-toggler-icon"></span>
  </button>

  <a class="navbar-brand" href="#0">
    <img
      src="data:image/png;base64,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"
      alt="navbar-brand"
      width="30"
      height="30"
    />
    home <span class="text-warning">essentials</span>
  </a>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav offset-9">
      <li class="nav-item">
        <a href="#" class="nav-link">
          <strong>Contacts</strong>
        </a>
      </li>

      <li class="nav-item">
        <a href="#" class="nav-link active">
          <strong>LogIn</strong>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <strong>SignUp</strong>
        </a>
      </li>
    </ul>
  </div>
</nav>
<h1 class="text-center">Login Page</h1>
<br />
<div class="login">
  <form id="login" method="get" action="login.php">
    <label>User Name </label>
    <input type="text" name="Uname" id="Uname" placeholder="Username" />
    <br /><br />
    <label><b>Password </b> </label>
    <input type="Password" name="Pass" id="Pass" placeholder="Password" />
    <br /><br />
    <input type="button" name="log" id="log" value="Log In" />
    <br /><br />
    <input type="checkbox" id="check" />
    <span>Remember me</span>

    <a href="" class="tex-warning">Forgot Password</a>
  </form>
</div>

navbar.component.css

.login {
      width: 500px;
      overflow: hidden;
      margin: auto;
      margin: 20 0 0 450px;
      padding: 80px;
      background: #23463f;
      border-radius: 15px;

  }

  h2 {
      text-align: center;
      color: red;
      padding: 20px;
  }

  label {
      color: #08ffd1;
      font-size: 17px;
  }

  #Uname {
      width: 300px;
      height: 30px;
      border: none;
      border-radius: 3px;
      padding-left: 8px;
  }

  #Pass {
      width: 300px;
      height: 30px;
      border: none;
      border-radius: 3px;
      padding-left: 8px;

  }

  #log {
      width: 300px;
      height: 30px;
      border: none;
      border-radius: 17px;
      padding-left: 7px;
      color: blue;


  }

  span {
      color: white;
      font-size: 17px;
  }

  a {
      float: right;
      background-color: grey;
  }

footer.component.html

<footer
  class="page-footer font-small text-white"
  style="background-color: rgb(21, 21, 66)"
>
  <div class="footer-copyright text-center py-3">©homessentials.com</div>
</footer>

app.component.html

<app-navbar></app-navbar>
<app-footer></app-footer>

Screenshot

[meghvi-raj]

APP.COMPONENT.HTML

<app-navbar></app-navbar>
<app-loginform></app-loginform>
<app-footer></app-footer>

NAVBAR.COMPONENT.HTML

<nav
  class="row navbar navbar-expand-lg navbar-fixed-top navbar-dark bg-primary"
>
  <button
    class="navbar-toggler"
    type="button"
    data-toggle="collapse"
    data-target="#navbarSupportedContent"
  >
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#0">
    <img
      src="data:image/png;base64,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"
      alt="navbar-brand"
      width="30"
      height="30"
    />
    Shopping Mart</a
  >
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <form class="form-inline mr-auto my-2 my-lg-0 mr-2">
      <input
        type="search"
        class="form-control mr-sm-2"
        name="searchBar"
        id="searchBar"
      />
      <button class="btn btn-outline-light my-2 my-sm-0">Search</button>
    </form>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link active">
          <strong>Home</strong>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <strong>Categories</strong>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <strong>Contact</strong>
        </a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a
          href="#"
          class="nav-link dropdown-toggle"
          role="button"
          data-toggle="dropdown"
        >
          <strong>Account</strong>
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <a href="#" class="dropdown-item"> <strong>Track Order</strong> </a
          ><a href="#" class="dropdown-item"><strong>FAQs</strong></a>
          <a href="#" class="dropdown-item">
            <div class="dropdown-divider"></div>
            <strong>Logout</strong>
          </a>
        </div>
      </li>
    </ul>
  </div>
</nav>

LOGINFORM.COMPONENT.HTML

<main class="col-md-5 mx-auto mt-4">
  <header class="text-center">
    <h1 class="display-4 text-primary text-uppercase">LOGIN</h1>
    <h6 class="text-secondary">Enter your credentials</h6>
  </header>
  <hr />

  <section>
    <form action="register-backend" method="GET" class="font-weight-bold">
      <!-- Email -->
      <div id="emailField" name="emailField" class="form-group">
        <label for="email">Email</label><br />
        <input
          type="email"
          id="email"
          name="email"
          class="form-control"
          placeholder="abc@xyz.com"
          autofocus
          required
        />
      </div>

      <!-- Password -->
      <div id="passwordField" name="passwordField" class="form-group">
        <label for="password">Password</label><br />
        <input
          type="password"
          id="password"
          name="password"
          class="form-control"
          required
        />
      </div>

      <!-- Captcha -->
      <div id="captcha" name="captcha" class="row form-group">
        <div id="captchaCodeField" name="captchaCodeField" class="col-lg-6">
          <label for="captchaCode">Captcha Code</label><br />
          <input
            type="text"
            id="captchaCode"
            name="captchaCode"
            class="form-control font-weight-bold font-italic text-primary bg-warning"
            value="Q23f42"
            readonly
          />
        </div>

        <div id="captchaInputField" name="captchaInputField" class="col-lg-6">
          <label for="captchaInput">Enter Captcha</label><br />
          <input
            type="text"
            id="captchaInput"
            name="captchaInput"
            class="form-control"
            autocomplete="off"
            autofocus
            required
          />
        </div>
      </div>

      <div class="form-check">
        <input
          type="checkbox"
          class="form-check-input"
          id="keepMeSignedInCheck"
        />
        <label
          class="form-check-label font-weight-normal"
          for="keepMeSignedInCheck"
        >
          Keep me signed in
        </label>
      </div>

      <!-- Submit Button -->
      <div id="loginButton" class="my-4">
        <input type="login" value="Login" class="btn btn-block btn-primary" />
      </div>
    </form>
  </section>
</main>

FOOTER.COMPONENT.HTML

<footer class="footer small-footer">
  &#169; Copyright 2050.All rights reserved.
</footer>

[ApoorvaSinha]

navbar.componet.html

<nav
    class="navbar navbar-expand-lg navbar-fixed-top navbar-dark"
    style="background-color: rgb(145, 77, 32)"
  >
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarSupportedContent"
    >
      <span class="navbar-toggler-icon"></span>
    </button>

    <a class="navbar-brand" href="#0">
      <img
        src="../Frontend/Images/running-shoes-3.png"
        alt="navbar-brand"
        width="50"
        height="50"
      />
     Sporty Shoes
    </a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <form class="form-inline mr-auto my-2 my-lg-0 mr-2">
        <input
          type="search"
          class="form-control mr-sm-2"
          name="searchBar"
          id="searchBar"
        />
        <button class="btn btn-outline-light my-2 my-sm-0">Search</button>
      </form>

      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="nav-link active">
            <strong>Home</strong>
          </a>
        </li>

        <li class="nav-item">
          <a href="#" class="nav-link">
            <strong>Products</strong>
          </a>
        </li>

        <li class="nav-item">
          <a href="#" class="nav-link">
            <strong>Contacts</strong>
          </a>
        </li>
        

          <li class="nav-item">
           
        <button class="btn btn-outline-light my-2 mr-2 my-sm-0">Login</button>
          </li>
          <li class="nav-item">
           
            <button class="btn btn-outline-light my-2  my-sm-0">Register</button>
              </li>
           

      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a
            href="#"
            class="nav-link dropdown-toggle"
            role="button"
            data-toggle="dropdown"
          >
            <strong>Account</strong>
            <!-- person icon SVG image -->
            <img
              src="../Frontend/Images/png-transparent-user-profile-computer-icons-login-user-avatars.png"
              alt="navbar-brand"
              width="30"
              height="30"
          /></a>
          <div class="dropdown-menu dropdown-menu-right">
            <a href="#" class="dropdown-item">
              <strong>Profile</strong> </a
            ><a href="#" class="dropdown-item"
              ><strong>Support</strong></a
            >
            <a href="#" class="dropdown-item">
              <div class="dropdown-divider"></div>
              <strong>Logout</strong>
            </a>
          </div>
        </li>
      </ul>
    </div>
  </nav>

loginbody.component.html

    <main class="col-md-5 mx-auto mt-4">
      <header class="text-center">
        <h1 class="display-4 text-dark text-uppercase">LOGIN</h1>
        <h6 class="text-secondary">Enter your credentials</h6>
      </header>
      <hr />

      <section>
        <form action="register-backend" method="GET" class="font-weight-bold">
          <!-- Email -->
          <div id="emailField" name="emailField" class="form-group">
            <label for="email">Email</label><br />
            <input
              type="email"
              id="email"
              name="email"
              class="form-control"
              placeholder="abc@xyz.com"
              autofocus
              required
            />
          </div>

          <!-- Password -->
          <div id="passwordField" name="passwordField" class="form-group">
            <label for="password">Password</label><br />
            <input
              type="password"
              id="password"
              name="password"
              class="form-control"
              required
            />
          </div>

          <!-- Captcha -->
          <div id="captcha" name="captcha" class="row form-group">
            <div id="captchaCodeField" name="captchaCodeField" class="col-lg-6">
              <label for="captchaCode">Captcha Code</label><br />
              <input
                type="text"
                id="captchaCode"
                name="captchaCode"
                class="form-control font-weight-bold font-italic text-primary "
                value="Q23f42"
                readonly
              />
            </div>

            <div
              id="captchaInputField"
              name="captchaInputField"
              class="col-lg-6"
            >
              <label for="captchaInput">Enter Captcha</label><br />
              <input
                type="text"
                id="captchaInput"
                name="captchaInput"
                class="form-control"
                autocomplete="off"
                autofocus
                required
              />
            </div>
          </div>

          <div class="form-check">
            <input
              type="checkbox"
              class="form-check-input"
              id="keepMeSignedInCheck"
            />
            <label
              class="form-check-label font-weight-normal"
              for="keepMeSignedInCheck"
            >
              Keep me signed in
            </label>
          </div>

          <!-- Submit Button -->
          <div id="loginButton" class="my-4">
            <input
              type="submit"
              value="Login"
              class="btn btn-block btn-outline-dark"
            />
          </div>
        </form>
      </section>
    </main>

loginfooter.component.html

<footer class="text-center text-lg-start bg-light text-muted">
  
      <section
        class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom"
      >
    
        <div class="me-5 d-none d-lg-block">
          <span>Get connected with us on social networks:</span>
        </div>
     
        <div>
          <a href="" class="me-4 text-reset">
            <i class="fab fa-facebook-f"></i>
          </a>
          <a href="" class="me-4 text-reset">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="" class="me-4 text-reset">
            <i class="fab fa-google"></i>
          </a>
          <a href="" class="me-4 text-reset">
            <i class="fab fa-instagram"></i>
          </a>
          <a href="" class="me-4 text-reset">
            <i class="fab fa-linkedin"></i>
          </a>
          <a href="" class="me-4 text-reset">
            <i class="fab fa-github"></i>
          </a>
        </div>
    
      </section>
     
      <section class="">
        <div class="container text-center text-md-start mt-5">
    
          <div class="row mt-3">
      
            <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
           
              <h6 class="text-uppercase fw-bold mb-4">
                <i class="fas fa-gem me-3"></i>Company name
              </h6>
              <p>
                Here you can use rows and columns to organize your footer content. Lorem ipsum
                dolor sit amet, consectetur adipisicing elit.
              </p>
            </div>
          
            <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
    
              <h6 class="text-uppercase fw-bold mb-4">
                Products
              </h6>
              <p>
                <a href="#!" class="text-reset">Angular</a>
              </p>
              <p>
                <a href="#!" class="text-reset">React</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Vue</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Laravel</a>
              </p>
            </div>
    
            <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
     
              <h6 class="text-uppercase fw-bold mb-4">
                Useful links
              </h6>
              <p>
                <a href="#!" class="text-reset">Pricing</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Settings</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Orders</a>
              </p>
              <p>
                <a href="#!" class="text-reset">Help</a>
              </p>
            </div>
           
            <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
              
              <h6 class="text-uppercase fw-bold mb-4">
                Contact
              </h6>
              <p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
              <p>
                <i class="fas fa-envelope me-3"></i>
                info@example.com
              </p>
              <p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
              <p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
            </div>
            
          </div>
          
        </div>
      </section>
      
    
      
    
      
    
            
          <i>©Copyright 2022 All rights concerned</i>
        </footer>

app.component.html

<app-login></app-login>

angular.json

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

cmd

npm install bootstrap

screenshot

[Coder-093]

app.component.html

<div>
  <app-navbar> </app-navbar>
  <app-main> </app-main>
  <app-footer> </app-footer>
</div>

navbar.component.html

<nav
  class="navbar navbar-expand-lg navbar-fixed-top navbar-dark"
  style="background-color: black"
>
  <button
    class="navbar-toggler"
    type="button"
    data-toggle="collapse"
    data-target="#navbarSupportedContent"
  >
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <form class="form-inline mr-auto my-2 my-lg-0 mr-2">
      <!-- <button class="btn btn-outline-light my-2 my-sm-0">Reg</button> -->
    </form>

    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="http://127.0.0.1:3000/contact-us.html" class="nav-link active">
          <strong>Contact</strong>
        </a>
      </li>
      <li>
        <form
          class="form-inline mr-auto my-2 my-lg-0 mr-2"
          action="http://127.0.0.1:3000/registration-page.html"
          method="get"
          target="_blank"
        >
          <button class="btn btn-outline-light my-2 my-sm-0">Register</button>
        </form>
      </li>
    </ul>
  </div>
</nav>

main.html

<main class="col-md-5 mx-auto mt-4">
  <header class="text-center">
    <h1 class="display-4 text-dark text-uppercase">LOGIN</h1>
    <h6 class="text-secondary">Enter your credentials</h6>
  </header>
  <hr />

  <section>
    <form action="register-backend" method="GET" class="font-weight-bold">
      <!-- Email -->
      <div id="emailField" name="emailField" class="form-group">
        <label for="email">Email</label><br />
        <input
          type="email"
          id="email"
          name="email"
          class="form-control"
          placeholder="abc@xyz.com"
          autofocus
          required
        />
      </div>

      <!-- Password -->
      <div id="passwordField" name="passwordField" class="form-group">
        <label for="password">Password</label><br />
        <input
          type="password"
          id="password"
          name="password"
          class="form-control"
          required
        />
      </div>

      <!-- Captcha -->
      <div id="captcha" name="captcha" class="row form-group">
        <div id="captchaCodeField" name="captchaCodeField" class="col-lg-6">
          <label for="captchaCode">Captcha Code</label><br />
          <input
            type="text"
            id="captchaCode"
            name="captchaCode"
            class="form-control font-weight-bold font-italic text-dark bg-secondary"
            value="Q23f42"
            readonly
          />
        </div>

        <div
          id="captchaInputField"
          name="captchaInputField"
          class="col-lg-6"
        >
          <label for="captchaInput">Enter Captcha</label><br />
          <input
            type="text"
            id="captchaInput"
            name="captchaInput"
            class="form-control"
            autocomplete="off"
            autofocus
            required
          />
        </div>
      </div>

      <div class="form-check">
        <input
          type="checkbox"
          class="form-check-input"
          id="keepMeSignedInCheck"
        />
        <label
          class="form-check-label font-weight-normal"
          for="keepMeSignedInCheck"
        >
          Keep me signed in
        </label>
      </div>

      <!-- Submit Button -->

      <div id="loginButton" class="my-4">
        <input
          type="login"
          value="Login"
          class="btn btn-block btn-warning"
        />
        <a href="http://127.0.0.1:3000/home-page.html"></a>
      </div>
    </form>
  </section>
</main>

footer.component.html

<footer class="container col-12 pt-2 mt-2 border bg-dark">
  <p
    style="
      font-size: small;
      color: white;
      text-align: center;
      font-family: 'Georgia', serif;
    "
  >
    &#169; Copyright 2050 by Surabhi. All rights reserved.
  </p>
</footer>

[vshvandana]

footer.html

<footer style="background-color: rgb(239, 103, 125);padding: 12px; margin-top: 70px; " class="container box  mb-2">
    <div class="row p-3">
        <div class="col-12">
            &copy; {{content}}
        </div>
    </div>
</footer>

footer.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
  content: string = "Copyright 2050 by nobody. All rights reserved."
  constructor() { }

  ngOnInit(): void {
  }
}

## login.html

```html
<main class="col-md-5 mx-auto mt-4">
    <header class="text-center">
        <h1 class="display ">{{title}}</h1>
    </header>
    <hr />

    <section>
        <form action="register-backend" method="GET" class="font-weight-bold ">

            <div id="emailField" name="emailField" class="form-group">
                <label for="email">{{email}}</label><br />
                <input type="email" id="email" name="email" class="form-control" style="background-color:pink"
                    placeholder="test@abc.com" autofocus required />
            </div>


            <div id="passwordField" name="passwordField" class="form-group">
                <label for="password">{{pwd}}</label><br />
                <input type="password" id="password" name="password" style="background-color:pink" class="form-control"
                    required />
                <a class="font-weight-normal" href=""><u>{{fpwd}}</u></a>
            </div>

            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="keepMeSignedInCheck" />
                <label class="form-check-label font-weight-normal" for="keepMeSignedInCheck">
                    {{signin}}
                </label>
            </div>


            <div id="loginButton" class="my-4">
                <input type="submit" value="Login" class="btn btn-block btn-danger" />
                <p class="font-weight-normal">{{confirmacc}}<a
                        href="http://127.0.0.1:3000/frontend/RegistrationPage.html"> <u> {{link}}</u></a></p>
            </div>

        </form>
    </section>
</main>

login.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login-bootstrap',
  templateUrl: './login-bootstrap.component.html',
  styleUrls: ['./login-bootstrap.component.css']
})
export class LoginBootstrapComponent implements OnInit {
  title: string = "Login"
  email: string = "Email"
  pwd: string = "Password"
  fpwd: string = "Forgot password"
  signin: string = "Keep me signed in"
  confirmacc: string = "Don't have the account ?"
  link: string = "Click here to create."
  constructor() { }

  ngOnInit(): void {
  }

}

navbar.html

<nav class=" row mb-2 navbar navbar-expand-lg navbar-fixed-top navbar-dark navbar-custom" style="color:pink;">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
    </button>

    <a class="navbar-brand" href="#0">
        <img src="https://play-lh.googleusercontent.com/GDz-jb59bT1pStsNQ_8w0jmu5gsKInnTPSWQT30_GVDFY6ODx4RdzbYhi0tB4pelxA"
            alt="NYKAA" width="30" height="30" />
        {{brandname}}
    </a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <form class="form-inline mr-auto my-2 my-lg-0 mr-2">
            <input type="search" class="form-control mr-sm-2" name="searchBar" id="searchBar"
                placeholder="Search on Nykaa" />
            <button class="btn btn-outline-light my-v2 my-sm-0">{{inputbox}}</button>
        </form>

        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="http://127.0.0.1:3000/frontend/homepge.html" class="nav-link active">
                    <strong>{{list[0]}}</strong>
                </a>
            </li>

            <li class="nav-item">
                <a href="http://127.0.0.1:3000/frontend/productdetails.html" class="nav-link">
                    <strong>{{list[1]}}</strong>
                </a>
            </li>

            <li class="nav-item">
                <a href="#" class="nav-link">
                    <strong>{{list[2]}}</strong>
                </a>
            </li>
        </ul>

        <ul class="navbar-nav">
            <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown">
                    <strong>Account</strong>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-person" viewBox="0 0 16 16">
                        <path
                            d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z" />
                    </svg></a>
                <div class="dropdown-menu dropdown-menu-right">
                    <a href="#" class="dropdown-item"> <strong>{{dlist[0]}}</strong> </a><a href="#"
                        class="dropdown-item"><strong>{{dlist[1]}}</strong></a>
                    <a href="#" class="dropdown-item">
                        <div class="dropdown-divider"></div>
                        <strong>{{dlist[2]}}</strong>
                    </a>
                </div>
            </li>
        </ul>
    </div>
</nav>

navbar.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  brandname: string = "Nykaa";
  inputbox: string = "Search";
  list: string[] = ["HOME", "PRODUCTS", "BRANDS"]
  dlist: string[] = ["Profile", "Support", "Logout"]
  constructor() { }

  ngOnInit(): void {
  }

}

screenshot