Tips for aligning two columns of listed items vertically with Bootstrap 5 or CSS

Having difficulty aligning two columns containing text - specifically, two lists.

The goal is to have both columns on the same row with centered lists and their respective items aligned as normal bullet points.

Any advice would be greatly appreciated.

Code snippet below:

<div class="container d-none d-md-block text-center">
    <div class="row">
        <div class="col">
            <div class="row">
                <h4 style="color:#2CA851;"><strong>Premium</strong></h4>
            </div>
            <div class="row">
                <h4 style="color:#2CA851;">Academic Advantage</h4>
            </div>
            <ul class="row list-group list-unstyled ">
                <li class="row p-1 list-group-item border-0">
                    <span><i class="h5 fa fa-check-circle px-1" style="color:#2CA851;"></i>Unlimited A+ Exam Focused Revision Notes.</span>
                </li>
                <li class="row p-1 list-group-item border-0">
                    <span><i class="h5 fa fa-check-circle  px-1" style="color:#2CA851;"></i>Past Examinations and Questions by Topic.</span>
                </li>
                <li class="row p-1 list-group-item border-0">
                    <span><i class="h5 fa fa-check-circle  px-1" style="color:#2CA851;"></i>A+ Sample Essays, Quizzes, and Math Content.</span>
                </li>
            </ul>
        </div>
        <div class="col">
            <div class="row">
                <h4 style="color:#EF6F5E;"><strong>Limited Access</strong></h4>
            </div>
            <div class="row">
                <h4 style="color:#EF6F5E;">Ordinary Outcome</h4>
            </div>
            <ul class=" row list-group list-unstyled">
                <li class="row p-1 list-group-item border-0" style="color: #001847;">
                    <span><i class="h5 fa fa-times-circle px-1" style="color:#EF6F5E;"></i>Restricted Access. Limited Features.</span>
                </li>
                <li class="row p-1 list-group-item border-0">
                    <span><i class="h5 fa fa-times-circle  px-1" style="color:#EF6F5E;"></i>Less than 10% of Premium Material.</span>
                </li>
                <li class="row p-1 list-group-item border-0">
                    <span><i class="h5 fa fa-times-circle  px-1" style="color:#EF6F5E;"></i>Older Content & Legacy Features.</span>
                </li>
            </ul>
        </div>
    </div>
</div>

Attempted using col-6

Using col-6 for each column doesn't center properly. Centering the text hasn't aligned the icons correctly either.

Aligned using text-center However, this alignment issue persists with the icons misaligned.

EDITS: Utilizing justify-content-center as suggested by @surya-prima-siregar and @harvir This gets closer to a solution, but the lists should be centered based on the buttons below rather than appearing before them.

Credit to @alexandra-batrak for providing a solution Refer to @alexandra-batrak's answer

htmlcssalignmentbootstrap-5

Answer №1

Utilize the MX-Auto Class within Bootstrap, or consider using the justify-content-center class within the .row class as an alternative method for centering content. For additional information, you can check out this link

Answer №2

I have eliminated unnecessary row classes and their corresponding div containers.

`

<div class="container d-none d-md-block" style="height: 400px;">
    <div class="col">
        <h4 style="color:#2CA851;"><strong>Premium</strong></h4> 
        <h4 style="color:#2CA851;">Academic Advantage</h4>
        <ul class="list-group list-unstyled ">
            <li class="p-1 list-group-item border-0">
                <span><i class="h5 fa fa-check-circle px-1" style="color:#2CA851;"></i>Unlimited A+ Exam Focused Revision Notes.</span>
            </li>
            <li class="p-1 list-group-item border-0">
                <span><i class="h5 fa fa-check-circle  px-1" style="color:#2CA851;"></i>Past Examinations and Questions by Topic.</span>
            </li>
            <li class="p-1 list-group-item border-0">
                <span><i class="h5 fa fa-check-circle  px-1" style="color:#2CA851;"></i>A+ Sample Essays, Quizzes, and Math Content.</span>
            </li>
        </ul>
    </div>
    <div class="col">
        <h4 style="color:#EF6F5E;"><strong>Limited Access</strong</h4>      
        <h4 style="color:#EF6F5E;">Ordinary Outcome</h4>
        <ul class=" list-group list-unstyled">
            <li class=" p-1 list-group-item border-0" style="color: #001847;">
                <span><i class="h5 fa fa-times-circle px-1" style="color:#EF6F5E;"></i>Restricted Access. Limited Features.</span>

            </li>
            <li class="p-1 list-group-item border-0">
                <span><i class="h5 fa fa-times-circle  px-1" style="color:#EF6F5E;"></i>Less than 10% of Premium Material.</span>

            </li>
            <li class="p-1 list-group-item border-0">
                <span><i class="h5 fa fa-times-circle  px-1" style="color:#EF6F5E;"></i>Older Content &amp; Legacy Features.</span>

            </li>
        </ul>
    </div>

`

.row {   
    display: flex;      // it should already be in bootstrap
    justify-content: space-around;   
    margin: auto;       // helps to get them a bit closer by removing bootstrap margin
}

.col {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    align-items: center;
}

`

If you prefer the lists to be aligned left, make sure to remove the text-centered class.

https://i.sstatic.net/2Lt47.png

Answer №3

Transform it into a flexbox and align the content to the center. Alternatively, you can use margin auto if all elements are enclosed within a single 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

Show specific hyperlinks in Django depending on the user group

{% extends 'base.html' %} {% block content %} <p>Welcome to the homepage.</p> <p>{% user.groups.all() %}</p> {% endblock %} Currently, I'm exploring ways to display all the user's groups on the page. Howeve ...

htmldjangotemplates

Troubleshooting problem with text overlaying images upon hovering in CSS

Several months ago, I successfully implemented a cool effect on a Shopify website that I had designed. However, recently the client decided to switch to a new theme without my knowledge, and now one of my CSS tricks is no longer working. If you look at t ...

htmlcsshovercentering

Unable to use document.write when extracting code from the internet

I am currently developing a game using emulatorjs and ruffle. The goal is to have it all contained in a single downloadable file that can be run locally. I attempted to create another file for auto-updating purposes, but encountered issues with some of the ...

javascripthtml

What is the method for inserting a vertical line between two div elements?

Can you show me how to add a vertical line between two div elements? .flex-container { display: -webkit-flex; margin: 0 auto; text-align: center; } .flex-container .column { width: 320px; text-align: center; } .vr { border-left: 2px dott ...

htmlcss

create a division in the organization of the identification numbers

Is there a way to always change pages when the id changes in a foreach loop to separate the printed pages? Take a look at this code snippet: var data = [ {Id: "552", valor: "50.00", Descricao: "Fraldas", }, {Id: "552", valor: "35.00", Descrica ...

javascripthtmlcss

The jQuery .hasClass() function does not work properly with SVG elements

I am working with a group of SVG elements that are assigned the classes node and link. My goal is to determine whether an element contains either the node or link class when hovering over any of the SVG components. However, I am encountering an issue where ...

javascriptjqueryhtmlcsssvg

:last-child is effective, but :first-child is inefficient

I'm having trouble using CSS to hide the first .sku element within an aside that contains two of these elements. Strangely, the :last-child selector works just fine. Can anyone explain why this might be happening? Here's a link to the JSFiddle fo ...

csshtmlcss-selectors

Avoid cascading of the 'display' property in JavaScript styling to prevent inheritance

Is there a way in Javascript to toggle the visibility of a larger portion of HTML without affecting inner display properties with display: <value>? Despite setting an outer display property using Javascript, the inner display properties are also alt ...

javascripthtmlcss

The subdirectory containing the Rails assets is causing loading issues in the production environment

My event CSS is currently located in app/assets/stylesheets/pages/events.scss. Surprisingly, everything looks perfect in development mode with all the assets loading properly. However, the real issue arises when I switch to production as it seems like thes ...

cssruby-on-railsproduction-environment

Unable to dynamically update properties in CSS and JavaScript without refreshing the page

I've tried applying active properties in my CSS and JavaScript, but it doesn't seem to be working as expected. I can click on each list item, but the active state is not being displayed correctly. Can someone please assist me with this issue? I w ...

javascripthtmlcss

Creating a dynamic collection of N triangles in a container using CSS

In my current project, I am developing an Electron+Vue application that features a grid-styled map. Each cell on the map represents a room, and I want to indicate walls within these cells. Specifically, for directions North, South, East, and West, I can us ...

cssvue.js

`On mouseup event, changing specific text`

I've been working on a real-time HTML highlighter that surrounds selected text with span elements containing a background property. Check out the fiddle here: https://jsfiddle.net/4hd2vrex/ The issue arises when users make multiple selections, leadi ...

javascriptjqueryhtmlcsswindow

Display custom modals in React that showcase content for a brief moment before the page refreshes

I recently developed a custom modal in React. When the Open button is clicked, showModal is set to true and the modal display changes to block. Conversely, clicking the Close button sets the display to none. However, I noticed a bug where upon refreshing ...

javascriptcssreactjsmodal-dialogreact-modal

Updating an element within a for loop using Angular TypeScript

I'm trying to figure out how to update the value of an HTML DOM element that is bound from a TypeScript file in each iteration of a for loop, rather than at the end of the loop. I want to see all values as the loop is running. For example, imagine I ...

htmlangulartypescript

Creating consistent indentation in HTML code can be achieved without the presence of any unnecessary

When I add indentation to my HTML code, it results in extra whitespace between elements on different lines. <div id="nbcntcnt"> <a href="notset.html" class="nbcntbutton" id="snbb">Overview</a> <a href="notset.html" class="nbcntb ...

htmlcssindentation

Is it possible to update an anchor tag using BeautifulSoup directly?

I am aiming to retrieve all anchor tags from an HTML document, regardless of their location or depth within the structure. Once these links have been gathered, I intend to manipulate them and create new links. My goal is to update the original HTML conten ...

pythonhtmlbeautifulsoup

Looping through multi-dimensional JSON objects with jQuery

Hello there, I'm currently facing some challenges in getting the screen below to work properly: Project progress screen I have generated the following JSON data from PHP and MYSQL. My goal is to display the project alongside user images and names whe ...

javascriptjqueryhtmlarraysjson

Errors in AMP Validator

I have recently started working with next/amp and I am encountering some issues with the amp validator in dev mode. The errors that I am struggling to understand are as follows: An error related to CSS syntax in the 'style amp-custom' tag - show ...

htmlreactjsreact-reduxnext.jsamp-html

"Customize your WordPress theme by moving the sidebar from left to right for

Currently, I am utilizing the flat theme sourced from . In an attempt to customize the appearance, I made modifications within style.css: #page:before, .sidebar-offcanvas, #secondary {float: right !important;} However, this adjustment only applies to a ...

htmlcsswordpress-theming

What is the best way to include CSS code in the output display?

I'm looking to customize the appearance of my table rows and cells. Specifically, I want the cell file name, size, etc., to be colored blue while each row should have a different color on hover. I've attempted to achieve this using CSS and variou ...

phphtmlcssdatabaseecho