The justify-content-between property is failing to align two divs in a row

I have two divs that I want to align, with one on the left and the other on the right (similar to this). I've experimented with self-align-start and self-align-end in each column, but haven't achieved the desired outcome. I also added the class row-cols-1 (not shown in the screenshot).

What am I overlooking? Here is a snippet of my code:

.about-me {
  max-width: 300px;
}

.current-work {
  max-width: 300px;
}
<body>
  <section id="about" class="container-fluid">
    <div class="row row-cols-1 justify-content-between">
      <div class="about-me col-6">
        <h2> About Me </h2>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          <p>
      </div>

      <div class="current-work col-6">
        <h2> What I'm Doing </h2>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          <p>
      </div>
  </section>
</body>

To see the outcome, click here

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Consider using offset-3 in the second div class attribute.

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

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="35575a5a41464147544575001b051b07">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-9">
                <div class="item">
                    <h1>ABOUT ME</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident. Soluta magni quo incidunt ducimus tempora nisi?t amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident. Soluta magni quo incidunt ducimus tempora nisi?</p>
                </div>
            </div>
             <div class="col-9 offset-3 text-end">
                <div class="item">
                    <h1>ABOUT ME</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident. Soluta magni quo incidunt ducimus tempora nisi?</p>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>

Answer №2

To align content, you can utilize .me-auto & .text-start for left alignment, and .ms-auto & .text-end for right alignment.

:root {
  --heavy-red-border: 1em solid red;
}

.red-border-start {
  border-left: var(--heavy-red-border);
}

.red-border-end {
  border-right: var(--heavy-red-border);
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b1914140f080f091a0b3b4e554b5549">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-9 me-auto text-start red-border-start">
        <div class="item">
          <h1>ABOUT ME</h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident.</p>
        </div>
      </div>
      <div class="col-9 ms-auto text-end red-border-end">
        <div class="item">
          <h1>ABOUT ME</h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident.
            Soluta magni quo incidunt ducimus tempora nisi?</p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

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

Incorporating .json files into an HTML template with the help of an HTML form designed for selecting a particular

I am faced with a collection of various .json files that I wish to specify by name on an HTML page (local) form, enabling me to load this data onto a table. This is how my HTML form appears: <form> File: <input type="text" Id="file_name"&g ...

javascriptphpjqueryhtmljson

Begin with a Bootstrap non-fluid container and follow with a fluid container

I am currently facing a challenge where I want the lower section of my webpage to be full width within a container-fluid div, while keeping the top part in a traditional container with a set width. Despite my efforts, the following HTML snippet is not ach ...

htmltwitter-bootstrapbootstrap-4

Dim the entire website

I am attempting to apply a grey overlay across my entire site when a file is dragged in for upload. The drag event and activation of the grey overlay are functioning correctly, but there are specific areas where it does not work as intended. There seems t ...

htmlcss

Lists within lists and the use of percentages

There is a common belief that separating design and functionality is beneficial. Let's focus on the separation between HTML and CSS, specifically when organizing a menu hierarchy. The issue with nested <ol>, <ul>, and <li> elements ...

htmlcsscss-position

The fade in and fade out effects using JQuery are not functioning as expected despite adding a delay

I am attempting to achieve a text effect where the text fades in, stays visible for a moment, and then fades out. While I understand this can be done with CSS Keyframes, I am unsure of how to implement it with multiple animations. As a result, I am experi ...

jqueryhtml

Filtering options in a dropdown box with jQuery

I have implemented a feature where the content of one select box is filtered based on the option selected in another select box. Below is the code snippet that achieves this functionality: // Filter content based on the selected option in a region select ...

javascriptjqueryhtml

Centered Layout using HTML and CSS

Exploring the world of Ruby on Rails and HTML has been quite an adventure. Today's question veers away from RoR and focuses on HTML and CSS. As I attempt to center my body, a peculiar issue arises: Help me solve this problem here How can I align the ...

htmlcssformattingcentering

Pan motion gesture above HTML components

Is it possible to create a hovering effect over elements in a container using a pan gesture? https://i.sstatic.net/E6G56.gif Here's the HTML code: <div class="container"> <div class="item"></div> <div class="item"></div ...

javascripthtmlgesturehammer.jspan

Is there a way to choose a div in Jsoup that lacks an id or any attributes?

I am facing a challenge where I have to choose a specific div using Jsoup. Traditionally, divs can be selected based on their id or class attributes using getElementById() for IDs and getElementsByClass() for classes. However, the div that I need to select ...

javaandroidhtmlcssjsoup

Navigate to the specified text in the dropdown menu based on the ul li selection

Is it possible to achieve a functionality similar to that of a select box, where typing a keyword that matches an option in the select box will automatically move the pointer to that option? I am looking to implement a similar feature in my HTML code: < ...

javascriptjqueryhtmlcss

What is the proper method to deactivate a hyperlink in Angular 2?

I'm currently developing a web application using Angular2, and I find myself in need of displaying, but making it non-clickable, an <a> element within my HTML. Can anyone guide me on the correct approach to achieve this? Update: Please take no ...

htmldomtypescriptangularangular2-template

Limit the precision of decimal number output to a specific value

I need assistance with achieving the output 999999.35 in angular or javascript combined with html. I am looking to restrict the number of 9's to a maximum of 6 digits before the decimal point, and after 6 digits it should not accept any more digits. A ...

javascriptjqueryangularjshtml

My wish is for the animation to activate when hovering over an "a" element on the progress bar

Below is the HTML and CSS code: .collection-by-brand { position: relative; display: flex; width: 100%; height: auto; justify-content: space-around; flex-wrap: wrap; background: linear-gradient(to bottom, #ffffff, whitesmoke); margin-bo ...

javascripthtmlcssbootstrap-4

Retrieve isolated scope of directive from transcluded content

I am not certain if it is possible, but I am essentially looking for a reverse version of the '&' isolate scope in AngularJS. You can check out this Plunkr to see an example. In essence, I have created a custom directive that provides some r ...

javascripthtmlangularjsangularjs-directiveangularjs-scope

Utilizing AJAX to dynamically populate an HTML list from a database and then saving the user's newly selected value back to the database

I'm working on dynamically populating a list from a database using AJAX and then updating the selected value back to the database with a servlet. What's the best approach for achieving this? Typically, I use the following code for dynamic update ...

htmlajaxjspservletsgson

What is the best way to trigger a URL and process all HTML requests on the server?

In the process of developing a test application, I am faced with the task of taking a URL as input and loading the page on the backend (server side) to track all requests made on the page as a typical browser would. This is necessary in order to inspect sp ...

c#html

Retrieving information from a server within several sections of a Flask application

Currently working on a project with Python using Flask and Jinja2, I am exploring ways to integrate a sidebar. Within the HTML pages, there is this snippet: {% include "sidebar.html" %} My objective for the sidebar file is to showcase a section highlight ...

pythonhtmlflaskjinja2sidebar

Enable lightbox functionality prior to all images being fully loaded

I have a large number of images (thumbnails) on my website and I am using the Featherlite lightbox plugin. However, when I click on one of the loaded images while they are still loading, the lightbox does not work as expected. Instead of opening in a modal ...

javascriptjqueryhtml

Deciphering HTML entities and decoding URLs within a continuous flow

Is it possible to find functions that accept streams and output streams for decoding operations, rather than loading the entire encoded document into memory like the HttpUtility.UrlDecode and HttpUtility.HtmlDecode methods do when taking strings as input ...

c#html.net.net-4.5

Locating Elements with Python 3 and Selenium: Unraveling the xpath Mystery

https://www.facebook.com/friends/requests/?fcref=jwl&outgoing=1 I am looking to click on the "See more request" option within the "friend request sent" section. <div id="outgoing_reqs_pager_57b87e5793eb04682598549" class="clearfix mtm uiMorePager ...

pythonhtmlseleniumxpath