I have a text that I like it to appear on the Left hand of my Login page and my Login form to be on the Right hand. Please How can I change that in bootstrap 5 ? I have try but fails, is there anybody who can help please:
my texts:
<div >
<div >
<div >
<h6 >
Borinati is the place to gain and share knowledge.<br />
<span >It's a website to ask questions based on categories and connect with Professional people
around the world.
</span>
</h6>
</div>
</div>
</div>
the login form:
<div >
<div >
<div >
<form method="POST">
{% csrf_token %}
<div >
<label style="font-family: Arial, Helvetica, sans-serif; color: dodgerblue;">Enter Username</label>
<input type="text" name="username">
</div>
<br>
<div >
<label style="font-family: Arial, Helvetica, sans-serif; color: dodgerblue;">Enter Password</label>
<input type="password" name="password">
</div>
<br>
<a href="{% url 'register' %}" style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; color: dodgerblue;">
Create An Account
</a>
<br>
<button type="submit" >Login</button>
</form>
</div>
</div>
</div>
CodePudding user response:
To reach the desired outcome you have to put all the code into one container and one row instead of using 2 different container and row for each section. we have 12 cols in bootstrap so you have to change the col-md-8 to col-md-6 or less than 6.
<div >
<div >
<div >
<h6 >
Borinati is the place to gain and share knowledge.<br />
<span >It's a website to ask questions based on categories and connect with Professional people
around the world.
</span>
</h6>
</div>
<div >
<form method="POST">
<div >
<label style="font-family: Arial, Helvetica, sans-serif; color: dodgerblue;">Enter Username</label>
<input type="text" name="username">
</div>
<br>
<div >
<label style="font-family: Arial, Helvetica, sans-serif; color: dodgerblue;">Enter Password</label>
<input type="password" name="password">
</div>
<br>
<a href="{% url 'register' %}" style="text-decoration: none; font-family: Arial, Helvetica, sans-serif; color: dodgerblue;">
Create An Account
</a>
<br>
<button type="submit" >Login</button>
</form>
</div>
</div>