my coding journey 2024: How to add styles under html code itself?

Solution 1: Use the Correct Bootstrap CDN (Recommended)

The template depends on Bootstrap's CSS and JavaScript. You must include the Bootstrap stylesheet before using Bootstrap classes.

✅ Fixed Code with Correct Bootstrap Styles:

html
<!doctype html>
<html lang="en" data-bs-theme="auto">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sign In</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    /* Custom Styles */
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: #f8f9fa; /* Light Gray Background */
    }
    .form-signin {
      max-width: 330px;
      padding: 1rem;
      background: white;
      border-radius: 10px;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }
    .form-signin .form-floating:focus-within {
      z-index: 2;
    }
    .form-signin input[type="email"],
    .form-signin input[type="password"] {
      margin-bottom: -1px;
      border-radius: 0;
    }
    .form-signin input[type="password"] {
      margin-bottom: 10px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  </style>
</head>
<body>
  
  <main class="form-signin text-center">
    <form>
      <img class="mb-4" src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="72" height="57">
      <h1 class="h3 mb-3 fw-normal">Please sign in</h1>

      <div class="form-floating">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">Email address</label>
      </div>
      <div class="form-floating">
        <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
        <label for="floatingPassword">Password</label>
      </div>

      <div class="checkbox mb-3">
        <label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
      </div>
      <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
      <p class="mt-5 mb-3 text-muted">© 2024</p>
    </form>
  </main>

</body>
</html>

Why This Works?

✅ Fixed Issues:

Bootstrap CSS added → `https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css`

Bootstrap JavaScript added → `https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js`

Centered the form properly using `display: flex` in CSS.

Added a white background + shadow to make the form stand out.

Ensured input fields align properly inside the form.

Now, just copy-paste this into your HTML file, and it will work perfectly! 🎉

Let me know if you need any more tweaks! 🚀

my coding journey 2024

Pages

Thursday, March 20, 2025

How to add styles under html code itself?

Solution 1: Use the Correct Bootstrap CDN (Recommended)

Why This Works?

No comments:

Post a Comment

Stack using Linked List – Partial (University Exam Topic)

Report Abuse

Labels