The numbering in the list does not align vertically with the corresponding content

I am attempting to create an ordered list with collapsible sections inside the li elements. The goal is to display basic information about a specific context, and when clicking on a link, additional details are shown. While the code is functional, I am facing an issue where the numbering (1.) is not properly aligned vertically with the content (Click to collapse). As someone who is not an expert in CSS, I am seeking guidance on how to address this alignment problem. Can anyone provide assistance?

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14767b7b60676066756454213a243a26">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="06646969727572746776463328362834">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<ol class="list-group list-group-numbered">
    <li class="list-group-item">
    <div class="d-flex justify-content-between align-items-start">
        <div class="ms-2 me-5">
            <div class="fw-bold">
                <a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse"
                   href="#collapseExample">Click to collpase</a>
            </div>
            some information
        </div>
        <div class="ms-2 ms-5 me-auto">
            some more information
        </div>
        <span class="badge bg-primary rounded-pill">42</span>
    </div>
    <div class="collapse" id="collapseExample">
        <table class="table">
            <thead>
            <tr>
                <th>#</th>
                <th>Foo, Bar</th>
                <th>Foobar</th>
                <th>FoobarBaz</th>
                <th>Baz</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    </li>
</ol>

csstwitter-bootstrapbootstrap-5

Answer №1

To create a grid layout for your list-group-item, you can use the classes .d-grid and .grid-template. You can define custom grid areas to place inner content in specific cells, as shown in the Code Snippet CSS section.

For shorter code in CSS, you can enclose the toggle-button within the .grid-template-toggle class and expand the collapse block class list by using .grid-template-collapse.

.grid-template {
  grid-template-areas: 'num toggle' 'collapse collapse';
  grid-template-columns: min-content 1fr;
}

.grid-template:before {
  grid-area: num;
}

.grid-template-toggle {
  grid-area: toggle;
}

.grid-template-collapse {
  grid-area: collapse;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fede0e0fbfcfbfdeeffcfbaa1bfa1bd">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4c41415a5d5a5a55c4f5e6e1b001e001c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-grid grid-template">
    <div class="d-flex justify-content-between align-items-start grid-template-toggle">
      <div class="ms-2 me-5">
        <div class="fw-bold">
          <a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse" href="#collapseExample">Click to collpase</a>
        </div>
        some information
      </div>
      <div class="ms-2 ms-5 me-auto">
        some more information
      </div>
      <span class="badge bg-primary rounded-pill">42</span>
    </div>
    <div class="collapse grid-template-collapse" id="collapseExample">
      <table class="table">
       <thead>
         <tr>
           <th>#</th>
           <th>Foo, Bar</th>
           <th>Foobar</th>
           <th>FoobarBaz</th>
           <th>Baz</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>Some Text</td>
           <td>More text text text</td>
           <td>More text text text More text text text</td>
           <td>More text text text More text text text</td>
           <td>More text text text More text text text</td>
         </tr>
       </tbody>
     </table>
   </div>
 </li>
</ol>

Answer №2

.grid-template {
  grid-template-areas: 'num toggle' 'collapse collapse';
  grid-template-columns: min-content auto;
}

.grid-template:before {
  grid-area: num;
}

.grid-template-toggle {
  grid-area: toggle;
}

.grid-template-collapse {
  grid-area: collapse;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ff7fafaf1f6f1f7e4d5c0abbbbfb6b0">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04367b7b60677d6e6e69637c73696374446f717f63636f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<ol class="list-group list-group-numbered">
    <li class="list-group-item d-grid grid-template">
    <div class="d-flex justify-content-between align-items-start grid-template-toggle">
        <div class="ms-2 me-5">
            <div class="fw-bold">
                <a aria-expanded="false" aria-controls="collapseExample" data-bs-toggle="collapse"
                   href="#collapseExample">Click to collpase</a>
            </div>
            some information
        </div>
        <div class="ms-2 ms-5 me-auto">
            some more information
        </div>
        <span class="badge bg-primary rounded-pill">42</span>
    </div>
    <div class="collapse grid-template-collapse" id="collapseExample">
        <table class="table">
            <thead>
            <tr>
              <th>#</th>
              <th>Foo, Bar</th>
              <th>Foobar</th>
              <th>FoobarBaz</th>
              <th>Baz</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Some Text</td>
                    <td>More text text text</td>
                    <td>More text text text More text text text</td>
                    <td>More text text text More text text text</td>
                    <td>More text text text More text text text</td>
                </tr>
            </tbody>
        </table>
    </div>
    </li>
</ol>

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

Issues with dynamically adding or removing scroll in jQuery are not being resolved

I am trying to implement a dynamic scrolling feature in my post scenario. The goal is to automatically add a vertical scroll when the number of dynamic inputs reaches a certain threshold. Specifically, if there are more than 5 dynamic inputs created, a ver ...

javascriptjqueryhtmlcss

Issues with JQuery OnClick Function Detected

I am struggling with an issue related to the scripts in the <head> section of my website: <script src="scripts/jquery-1.11.0.min.js" type="text/javascript"></script> <script> $('#submit').click(function() { $('#submi ...

jquerycssbackground-image

Is there a more effective method for positioning items in a navigation bar other than using padding-left?

Hey there, I've been working on this navigation bar for quite some time now and finally found a way to center the menu items. However, I want to make sure I'm doing it the right way. Does anyone have suggestions on how to center all the "li" elem ...

htmlcss

Safari enables seamless text flow into the footer without triggering scrolling as long as the length is manageable

Encountering a unique issue solely in Safari 6.0.5 on OS X 10.8.4 within certain conditions, which doesn't exist when tested on Firefox or Chrome under various scenarios in OS X. The column layout with floats is the crux of the problem. When the text ...

htmlcsssticky-footersafari

Text font automatically adjusts size in Chrome on Android

It seems that when a paragraph of text reaches a certain length, Google Chrome on Android decides to resize the text and make it larger (which can cause some interesting results). I've noticed that on my website, about half of the p-tags stick to the ...

androidhtmlcssgoogle-chromefont-size

Issue with slide animation in carousel on Bootstrap version 4.5.2 not functioning as intended

Recently, I've been diving into learning Bootstrap (v4.5.2) and decided to implement a basic carousel on my website that slides automatically. Following the documentation on Bootstrap's website, I copied the example code for a simple carousel wit ...

htmlcssbootstrap-4carousel

jQuery: Set default option selected or reset value

I'm attempting to change the value of the nearest select option dynamically. $(document).ready(function () { $('.limitation_points').hide(); $('.field .limitSelected').each(function () { $(this).change(function ( ...

javascriptjqueryhtmltwitter-bootstrap

Customizing media queries, Overriding styles from parent elements

Currently tackling a responsive website design challenge where I'm dealing with conflicting styles in media queries and parent css. Here's the CSS from the parent style sheet: .sec1 p { text-align: left; width: 55%; margin-left: 8%; float:lef ...

htmlcssresponsive-designmedia-queriesstylesheet

Implementing a smooth transition for a never-ending CSS rotation animation upon clicking a different div with the help of jQuery

I am attempting to utilize jquery in order to bring a constantly rotating div (with CSS animation) to a gradual, smooth halt when another div is clicked. My current strategy involves changing the "animation-timing-function" property from "linear" to "ease ...

javascriptjquerycssanimationrotation

animation for closing the hamburger menu

Having trouble creating a hamburger menu animation. I've set up two divs - one for the basic horizontal lines and one for the X icon. Using jQuery, I can hide and show them (clicking on the lines hides them and shows the X). But now I want to animate ...

cssanimationmenu

How to create a scrolling fixed div that moves horizontally and repositions to the center when the page is maximized

I've been searching for a solution to my problem and have managed to figure out the first part, but there's still one issue that I could use some help with. While I have some knowledge of html, css, and basic php, I'm completely new to javas ...

jquerycss

What are the steps to designing a Vertical Curve UI?

Is there a way to replicate the unique vertical curve on the login page, as shown in the image below? I've come across horizontal SVGs that can achieve this effect, but I'm struggling to find resources on implementing it vertically. How is this ...

htmlcssuser-interfaceuser-experience

What is the best way to ensure my gif shows up in the top row and spans two columns in this grid?

I am attempting to create cards with a unique design where the first row consists of 2 columns, one being a GIF that shows the card fitting into a cell with a border. However, all I see is an empty cell without any display. Below is the code snippet I am ...

htmlcssimagecss-grid

Using jQuery to replace the content of a div with a delay?

I am attempting to utilize jQuery to create a fade effect on an element, replace its innerHTML content, and then fade it back in once the new content has been added. I have successfully managed to replace the element's content using the .html() method ...

javascriptjqueryhtmlcssinnerhtml

CSS: How to target a specific element using its ID with nth-child selector?

Here is the HTML code that I am working with: <dl id="id"> <dt>test</dt> <dd>whatever</dd> <dt>test1</dt> <dd>whatever2</dd> .... </dl> I am trying to select the third dd ele ...

csscss-selectors

The appropriate use of spacing after text in the context of HTML and

Why is it that when I add padding or margin, no extra space is created after the text? Here is the output: https://i.sstatic.net/1MwjE.png I have tried adding padding and margin after the Stay Tuned text, but it seems to be not working. Any insights on ...

javascripthtmlcssanimationcss-animations

What is the best way to create an overscroll bounce effect for a list with a fixed height, even when the list items have not surpassed the height of the container?

When using a fixed-height ul with overflow scroll, the list will not have an overscroll bounce effect until its items exceed the height of the list. However, on mobile, I want the list container to have an overscroll bounce effect even when its items hav ...

htmlcssuser-interfacemobilescroll

Utilizing the "::first-letter" pseudo element selector in conjunction with the MuiButton class in Material UI - What is the process?

Is it possible to change the text case of Button text inside Material UI Button to sentence case with CSS? https://mui.com/components/buttons/ The text inside the button - ADD FRIEND should be transformed to sentence case as Add friend. I attempted to o ...

javascriptcssreactjsmaterial-ui

Ways to implement material-ui button design on an HTML-native button

I am using pure-react-carousel which provides me an unstyled HTML button (ButtonBack). I would like to customize its style using material-ui. Trying to nest buttons within buttons is considered not allowed. An approach that works is manually assigning th ...

javascriptcssreactjstypescriptmaterial-ui

Steps to open and configure a Mobile-Angular modal from another controller

Is it possible to use a modal in Angular JS for mobile devices without compromising the layout? I'm having trouble setting up the controller for my modal inside my main controller and passing parameters. Should I consider using ui-bootstrap for this p ...

javascriptangularjstwitter-bootstrapangular-ui-bootstrapmobile-angular-ui