Is there a way to switch the alignment of my text to the left side and move the form over to the right side?

How can I change the layout in Bootstrap 5 so that my text appears on the left hand side of my login page and the login form on the right? I have tried but failed, is there anyone who can help please?

Here is my text:

 <div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h6 class="display-5 fw-bold text-primary">
                Borinati is the place to gain and share knowledge.<br />
                <span class="text-primary">It's a website to ask questions based on categories and connect with Professional people
                    around the world.
                </span>
            </h6>
        </div>
    </div>
</div>

And here is the login form:

  <div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <form method="POST">
                {% csrf_token %}
                <div class="form-group">
                    <label style="font-family: Arial, Helvetica, sans-serif; color: dodgerblue;">Enter Username</label>
                    <input type="text" class="form-control" name="username">
                </div>
                <br>
                <div class="form-group">
                    <label style="font-family: Arial, Helvetica, sans-serif; color: dodgerblue;">Enter Password</label>
                    <input type="password" class="form-control" 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" class="btn btn-primary">Login</button>
            </form>
        </div>
    </div>
</div>

Answer №1

If you want to achieve the desired result, consolidate all the code into a single container and row instead of using separate containers and rows for each section. In Bootstrap, we have 12 columns, so you should consider changing col-md-8 to col-md-6 or a value less than 6.

<div class="container">
<div class="row ">
    <div class="col-md-6">
        <h6 class="display-5 fw-bold text-primary">
            Borinati offers a platform to acquire and exchange knowledge.<br />
            <span class="text-primary">It serves as a site where questions can be posed based on categories and connections can be made with professionals globally.
            </span>
        </h6>
    </div>

    <div class="col-md-6">
        <form method="POST">
          
            <div class="form-group">
                <label style="font-family: Arial, Helvetica, sans-serif; color: dodgerblue;">Enter Username</label>
                <input type="text" class="form-control" name="username">
            </div>
            <br>
            <div class="form-group">
                <label style="font-family: Arial, Helvetica, sans-serif; color: dodgerblue;">Enter Password</label>
                <input type="password" class="form-control" 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" class="btn btn-primary">Login</button>
        </form>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can CSS3 be utilized to craft this specific shape?

Can CSS3 be used to create the shape I need? I came across this website http://css-tricks.com/examples/ShapesOfCSS/, but I am unsure if any of the shapes on that page can be customized to match the specific shape I have in mind. Thank you! ...

Create an alert box that covers the content

I have been struggling to get the alert boxes to overlap on my content without pushing it down. I have tried changing the position to absolute, relative, and fixed, but nothing seems to work. There was one time when it worked, but as soon as I saved, it ...

Tips for implementing page-break-after:always within a bootstrap row?

I have a bootstrap row with a set of divs inside like this: @media print { p { page-break-after : always } } <div class = "row"> <div> data1 </div> <p> break page here </p> <div> data2 </div> <div> ...

Link not functioning correctly on mobile-responsive CSS

Having some trouble with hyperlinks over a background image. The hyperlinks work fine normally, but in mobile view, nothing happens when clicking on them. Below is the code for the hyperlinks. You can also visit the site and see that the "Post a Project" ...

Issue with displaying ChartJS on Django HTML page

I am attempting to create a horizontal bar chart in HTML, but unfortunately, it is not displaying correctly. I have sent 2 variables from views.py, which are {{top5StockCode}} and {{top5TotalSales}}. The values of {{top5StockCode}} that were sent from vi ...

Identify the CSS class for the ionic component on the webpage

Currently, I am in the process of developing an application using ionic 2 and angular 2. Within this app, I am utilizing the ionic 2 component known as ModalController. Unfortunately, I have encountered a challenge when attempting to adjust the size of th ...

The element is not displaying the correct width percentage value

When I try to style an element in HTML using Sass, setting the width using percentages doesn't seem to work. I wonder if this issue is related to me using "content-max" to set the parent element's width and height? Here is a simplified version ...

Using ion-icon inside a clickable ion-card while applying float: right does not render properly

I am facing an issue with a list of ion-cards that have clickable icons appearing when you hover over them. The problem is that due to the floating nature of the icons, they are not positioned correctly (as shown in the image below) and end up getting cove ...

Ways to find the image source using JavaScript/Jquery upon page loading?

I've scoured countless forums, yet a viable solution still eludes me. My objective is simple - upon page load, I want to gather all elements with the ".home" class and store them in an array called arr. Subsequently, the script should iterate through ...

How can you ensure that text inside a tag is styled as italic using font-style: italic and the !important keyword in HTML and CSS?

I've created an HTML site using chordpro.php generator, and the specific aspect related to this query is as follows: <div class="song"> <table border=0 cellpadding=0 cellspacing=0 class="songline"> <tr class="songlyricchord"><td& ...

Refreshing the page in Next.js causes issues with the CSS classNames

I am currently in the process of migrating a React SPA to Next.js, and I am relatively new to this framework. The issue I am encountering is that when I initially load the Home page, everything appears as expected. However, if I refresh the page, incorrect ...

Utilizing various CSS classes based on screen resolutions

In my UL, there is a span class called user-name. Depending on the screen resolution, I want to either remove or apply a different class. <link href="media-queries.css" rel="stylesheet"> <span class="user-name">Shane</span> When I try t ...

Using regular expressions in PHP to identify HTML elements containing '<p>' that appear after the initial '<H1>' tag

Can you provide guidance on creating a Regular Expression in PHP to identify HTML <p> elements that come after the initial <H1> tag? Here's an example that checks for inequality with the expression: if(!preg_match_all('#<p(.*?)&l ...

The functionality of JQuery's .hover() is disabled once an HTML onClick() event is activated

I am currently working on a webpage and attempting to incorporate JQuery into it for the first time. However, I seem to be encountering some issues that I believe might have simple solutions. Background Information My JQuery code only contains one event l ...

Tips for adjusting the position of overflowing text on a website using CSS in real-time

I'm currently working on an Angular application and I'd like to customize the styling so that any text exceeding 128 characters is not displayed. Ideally, if the text exceeds 128 characters, it should move to the left; otherwise, it should remain ...

Guide on adding animation to an image in Bootstrap when hovering with the mouse

Is there a way to add animation to an image on my website when hovering over it without using CSS? Are there any specific bootstrap classes that allow for direct animations on elements? ...

How to customize the colors of imported images in next.js

In my next.js app, I designed a unique icon and uploaded it as an SVG file. Now, I am looking to add a feature that allows users to personalize the color of this icon by choosing from options like red, yellow, black, etc. However, since the image is static ...

Tips for effectively implementing grids within bootstrap modal dialogs?

Exploring the functionality of the bootstrap-5 grid system within a modal popup has raised a puzzling issue. To investigate further, I began by incorporating the grid example into the main modal template sourced from https://getbootstrap.com/docs/5.0/compo ...

An unusual 1px variance appears in the background-image on Internet Explorer

Having trouble with a sprite of two images showing a 1px difference in ALL versions of Internet Explorer, yet working perfectly in Firefox. Check out the demonstration here: http://jsfiddle.net/bHUs3/6/ I'm feeling frustrated. What could be causing ...

Is there a unique shape element, such as a true circle, available in HTML5?

There doesn't seem to be any documentation on this, suggesting they may not exist. However, it's always worth investigating. I am in search of a perfectly circular (or any polygon shape other than a rectangle) element. I can create a circle in c ...