When a div is added, the alignment of Bootstrap 4 elements becomes skewed

Question

When a div is added, the alignment of Bootstrap 4 elements becomes skewed

Desired Appearance:

https://i.sstatic.net/jYCiq.png

Undesired Appearance:

https://i.sstatic.net/m3emV.png

I recently encountered an issue with my registration form where it started to look different from my login form even though I only added extra fields. I wanted both forms to have a consistent design, so I tried troubleshooting with online resources but couldn't find a solution. As I'm currently learning Django, I took extra care to make sure the forms looked visually appealing and cohesive. However, I faced confusion when my additional fields caused unexpected layout changes. I aim to understand and rectify this issue, as striving for consistency and clarity in design is essential to me.

Below is the HTML code for my index page and login form:

<!-- HTML code for index page and login form -->

Furthermore, I included the registration form code using the same CSS and bootstrap method:

<!-- HTML code for registration form -->

Lastly, here is the CSS code I utilized for styling the forms:

<!-- CSS code for styling forms -->

html css django twitter-bootstrap

Answer 1

Answer №1

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: rgb(211, 218, 218);
}
.row {
  background: white;
  border-radius: 30px;
  box-shadow: 12px 12px 22px;
}
img {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}
.btn1 {
  border: none;
  outline: none;
  height: 50px;
  width: 100%;
  background-color: black;
  color: white;
  border-radius: 4px;
  font-weight: bold;
}
.btn1:hover {
  border: none;
  outline: none;
  height: 50px;
  width: 100%;
  background-color: rgb(51, 105, 38);
  color: white;
  border-radius: 4px;
  font-weight: bold;
}

<!DOCTYPE html>
<html lang="en>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/ [email protected] /dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous">

    {% load static %}
    <link rel="stylesheet" href="{% static 'styles.css' %}" />

    <title>Albert's Page</title>
  </head>
  <body>
    <section class="Form my-4 mx-5">
      <div class="container">
        <div class="row no-gutters">
          <div class="col-lg-5">
            <img
              src="https://images.unsplash.com/photo-1602900004353-2e786ce8f35c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=658&q=80"
              alt=""
              class="img-fluid">
          </div>
          <div class="col-lg-7 px-5 pt-5">
            <h1 class="font-weight-bold py3">Registration Form</h1>
            <h4>Sign up for an account</h4>
            <form action="" method="post">
              <div class="form-row">
                <div class="col-lg-7">
                  <h4>Your Full Name</h4>
                  <input
                    type="fullName"
                    name="fullName"
                    class="form-control my-3 p-4">
                </div>
              <!-- I added below </div> tag here. only one change and it works. -->
              </div>
              <!-- Change Ended. -->                    
                <div class="form-row">
                <div class="col-lg-7">
                  <h4>User Name</h4>
                  <input
                    type="userName"
                    name="userName"
                    class="form-control my-3 p-4">
                </div>
              </div>
              <div class="form-row">
                <div class="col-lg-7">
                  <h4>Password</h4>
                  <input
                    type="password"
                    name="pw"
                    class="form-control my-3 p-4">
                </div>
              </div>
              <div class="form-row">
                <div class="col-lg-7">
                  <h4>Confirm Password</h4>
                  <input
                    type="password"
                    name="cpw"
                    class="form-control my-3 p-4">
                </div>
              </div>
              <div class="form-row">
                <div class="col-lg-7">
                  <button class="btn1 mt-3 mb-5" type="submit">Register</button>
                </div>
              </div>

              <p>Have an account then <a href="/">Sign In</a></p>
            </form>
          </div>
        </div>
      </div>
    </section>

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/ [email protected] /dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"></script>
  </body>
</html>

Answer 2

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: rgb(211, 218, 218);
}
.row {
  background: white;
  border-radius: 30px;
  box-shadow: 12px 12px 22px;
}
img {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}
.btn1 {
  border: none;
  outline: none;
  height: 50px;
  width: 100%;
  background-color: black;
  color: white;
  border-radius: 4px;
  font-weight: bold;
}
.btn1:hover {
  border: none;
  outline: none;
  height: 50px;
  width: 100%;
  background-color: rgb(51, 105, 38);
  color: white;
  border-radius: 4px;
  font-weight: bold;
}

<!DOCTYPE html>
<html lang="en>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/ [email protected] /dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous">

    {% load static %}
    <link rel="stylesheet" href="{% static 'styles.css' %}" />

    <title>Albert's Page</title>
  </head>
  <body>
    <section class="Form my-4 mx-5">
      <div class="container">
        <div class="row no-gutters">
          <div class="col-lg-5">
            <img
              src="https://images.unsplash.com/photo-1602900004353-2e786ce8f35c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=658&q=80"
              alt=""
              class="img-fluid">
          </div>
          <div class="col-lg-7 px-5 pt-5">
            <h1 class="font-weight-bold py3">Registration Form</h1>
            <h4>Sign up for an account</h4>
            <form action="" method="post">
              <div class="form-row">
                <div class="col-lg-7">
                  <h4>Your Full Name</h4>
                  <input
                    type="fullName"
                    name="fullName"
                    class="form-control my-3 p-4">
                </div>
              <!-- I added below </div> tag here. only one change and it works. -->
              </div>
              <!-- Change Ended. -->                    
                <div class="form-row">
                <div class="col-lg-7">
                  <h4>User Name</h4>
                  <input
                    type="userName"
                    name="userName"
                    class="form-control my-3 p-4">
                </div>
              </div>
              <div class="form-row">
                <div class="col-lg-7">
                  <h4>Password</h4>
                  <input
                    type="password"
                    name="pw"
                    class="form-control my-3 p-4">
                </div>
              </div>
              <div class="form-row">
                <div class="col-lg-7">
                  <h4>Confirm Password</h4>
                  <input
                    type="password"
                    name="cpw"
                    class="form-control my-3 p-4">
                </div>
              </div>
              <div class="form-row">
                <div class="col-lg-7">
                  <button class="btn1 mt-3 mb-5" type="submit">Register</button>
                </div>
              </div>

              <p>Have an account then <a href="/">Sign In</a></p>
            </form>
          </div>
        </div>
      </div>
    </section>

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/ [email protected] /dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
      crossorigin="anonymous"></script>
  </body>
</html>

Answer 3

Answer №2

To address your query, you can utilize the following solution. Begin by incorporating the crispy form tag at the beginning of the index page. Prior to using crispy form tags, ensure that you have installed them by executing the following command:

pip install django-crispy-forms

After installation, include the following code at the top of the index page, any page where the form is located, or in the base.html page:

{% load crispy_forms_tags %}

Generate your forms in a separate file named forms.py, where you can define your forms using Python classes. Then, import these forms into the views.py file and transfer them to HTML pages as variables.

In your HTML pages, structure your form using the following format:

<form action="some_url">
{{ form | crispy }} <!-- The 'form' variable represents the class that was used to create the form in forms.py -->
</form>

Answer 4

To address your query, you can utilize the following solution. Begin by incorporating the crispy form tag at the beginning of the index page. Prior to using crispy form tags, ensure that you have installed them by executing the following command:

pip install django-crispy-forms

After installation, include the following code at the top of the index page, any page where the form is located, or in the base.html page:

{% load crispy_forms_tags %}

Generate your forms in a separate file named forms.py, where you can define your forms using Python classes. Then, import these forms into the views.py file and transfer them to HTML pages as variables.

In your HTML pages, structure your form using the following format:

<form action="some_url">
{{ form | crispy }} <!-- The 'form' variable represents the class that was used to create the form in forms.py -->
</form>

When a div is added, the alignment of Bootstrap 4 elements becomes skewed

Answer №1

Answer №2

Similar questions

Setting the class attribute dynamically using code behind

Command 'python manage.py syncdb' fails to generate tables

Unleash the Power of Your Webpage: Instantly Engage Full

Display the div element only when the mouse is hovering over the button

Struggle with the background div menu

Personalize the color scheme for your timeline paper

Building dynamic web applications using React.js and Django without the need for webpack

MUI Datepicker options for selecting dates

Is it acceptable to include a checkbox and a hidden input within a label element?

How can I fix the alignment issue with my centered div?

What steps should I take to design a mobile-friendly navigation bar?

Tips for configuring Django logs on Heroku to write to an external log file

Tips on creating adaptable images for mobile viewing

Stop Ajax requests when there are blank spaces in Typeahead.js

What is the best way to convert JSON data to HTML format?

How to position an absolute div in the center of an image both vertically and horizontally

The Stylish Choice: Materialize CSS Dropdown Selector

Ways to set a default image for an <img> tag

Issue with iOS 10: Changes to class not reflected in CSS/styles

CSS fails to display image within PHP script