Designing a component with Boot Strap Style...

1. Install bootstrap and bootstrap-icons library for project

        >npm install bootstrap --save
        >npm install bootstrap-icons --save

2. Link bootstrap css and icons css to index.js

   import  '../node_modules/bootstrap/dist/css/bootstrap.css';
   import  '../node_modules/bootstrap-icons/font/bootstrap-icons.css';

3. Add a new folder into "src" by name  "components"

4. Add a subfolder into components  "login"

5. Add following files into login

            login.component.css

form {
    width: 300px;
    border:2px solid gray;
    padding: 20px;
    border-radius: 20px;
}
#form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
}


            login.component.js

import './login.component.css';
export function LoginComponent()
{
    return(
        <div id="form-container" className="container-fluid">
            <form>
                <h2> <span className="bi bi-person-fill"></span> User Login</h2>
                <div className="mb-2">
                   <label className="form-label">User Name</label>
                   <div>
                    <input type="text" className="form-control" />
                   </div>
                </div>
                <div className="mb-2">
                    <label className="form-label">Password</label>
                    <div>
                        <input type="password" className="form-control" />
                    </div>
                </div>
                <div className="mb-2">
                    <button className="btn btn-primary w-100">Login</button>
                </div>
            </form>
        </div>
    )
}

6. Go to "index.js" in src

 import {LoginComponent} from './components/login/login.component';

 root.render(
  <React.StrictMode>
    <LoginComponent />
  </React.StrictMode>
); 

{Netflix.Zip file on our hosting pages....}

​

​