Home > Mobile >  How can i change my Text to be on left hand and form to be on right hand
How can i change my Text to be on left hand and form to be on right hand

Time:06-14

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>
  • Related