Can't style my login form to be at the center with a beautiful card-CodePudding

I'm trying to make a login form like This one using Bootstrap5, but i can't, is anybody who can help me to make a login form like the one i mentioned here ? Actually I'm begineer in bootstrap and css.

my template:

<div >
    <div >
    {% for message in messages %}
    <h5>{{ message }}</h5>
    {% endfor %}
    <br>
    </div>
</div>

<div >
    <div >
        <div >
            <div >
            <form method="POST" action="{% url 'login' %}">
                {% csrf_token %}
                <div >
                    <label >Enter Username</label>
                    <input type="text"  name="username">
                </div>
                
                <br>
                <div >
                    <label >Enter Password</label>
                    <input type="password"  name="password">
                </div>
                <br>
                <button type="submit" >Login</button>
            </form>
        </div>
        </div>
    </div>
</div>

CodePudding user response：

A few additional classes from their library and it looks like so. There is a class referenced called font-weight-bold that wasn't working, so I added that as CSS. I guess it depends on which version bootstrap you are using.

.container {
  background: #1D8FF9;
  padding: 10rem 0;
}
.font-weight-bold {
  font-weight: 600;
}
.btn-block {
  display: block!important;
  width: 100%;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<!--<div >
    <div >
    {% for message in messages %}
    <h5>{{ message }}</h5>
    {% endfor %}
    <br>
    </div>
</div>-->

<div >
    <div >
      <div >
          <div >
              <div >
              <h2 >Sign In</h2>
              <br>
              <form method="POST" action="{% url 'login' %}">
                  <!--{% csrf_token %}-->
                  <div >
                      <label >Enter Username</label>
                      <input type="text"  name="username" placeholder="Enter Email">
                  </div>

                  <br>
                  <div >
                      <label >Enter Password</label>
                      <input type="password"  name="password" placeholder="Enter Password">
                  </div>
                                    <br>
                  <div >
    <input type="checkbox"  id="exampleCheck1">
    <label  for="exampleCheck1">Remember Me</label>
  </div>
                  <br>
                  <button type="submit" >Submit</button>
              </form>
          </div>
          </div>
      </div>
   </div>
</div>

CodePudding user response：

I've tried to get as close to the example you have shown, but I would recommend you to recreate this purely using CSS first, especially get a good working knowledge of CSS Grid and Flexbox, later when you jump into Bootstrap you will understand it much faster.

body {
  background: #f5f6f9;
}

.card {
  border-radius: 10px;
  border: 0;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <div >
    <div >
      <div >
        <h3 >Sign In</h1>
          <div >
            <form action="" method="post">
              <div >
                <div >
                  <label for="exampleFormControlInput1" >Email address</label>
                  <input type="email"  id="exampleFormControlInput1" placeholder="Enter email">
                </div>
                <div >
                  <label for="exampleFormControlInput1" >Password</label>
                  <input type="email"  id="exampleFormControlInput1" placeholder="Enter password">
                </div>
                <div >
                  <input  type="checkbox" value="" id="flexCheckDefault">
                  <label  for="flexCheckDefault">Remember me</label>
                </div>
                <div >
                  <button >Submit</button>
                </div>
                <div >
                  <a href="#">Forgot password?</a>
                </div>
              </div>
          </div>
          </form>
      </div>
    </div>
  </div>
</div>
</div>

Hope this helps :)