How to align text to the left and right within a Bootstrap accordion

I am currently working on a Bootstrap accordion, and I have a specific layout in mind. I want to display text on both the left and right sides of the accordion header, right next to the arrow that expands and collapses the content:

https://i.sstatic.net/dnqXK.png

Here is the current structure of my accordion:

<div class="accordion accordion-flush" id="accordion-tracks">
 <div class="accordion-item">
  <h2 class="accordion-header" id="heading-1">

   <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
     <div class="d-flex justify-content-between w-100">
        <div>1. The Eater Of Dreams</div>
        <div style="padding-right: 10px;">0:52</div>
     </div>
   </button>

 </h2>
....

I'm unsure if using a button for this purpose is best practice. I've also experimented with using span and playing around with float-start and float-end, but it doesn't seem to achieve the desired result.

Any advice or suggestions would be greatly appreciated. Thank you!

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

When utilizing the example provided in the Bootstrap documentation, you only need to execute two simple steps:

  1. Insert container tags within the button tag to establish two columns.
  2. Assign a class to the button and format it as a grid.

By following these instructions, you will achieve a layout with three columns inside the grid: one for the title, one for the time, and one for an arrow (represented by a pseudo element).

button.acc-btn {
  /* creating a grid */
  display: grid;
  /* defining column sizes. '1fr' utilizes available space */
  grid-template-columns: 1fr max-content max-content;
  align-items: center;
  grid-gap: 10px;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98c97899788">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3f3232292e292f3c2d1d68736d736c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="acc-btn accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <span class="title">
                    1. The Eater Of Dreams
                </span>
                <span class="time">
                    0:52
                </span>
            </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and
        hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="acc-btn accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                <span class="title">
                    1. The Eater Of Dreams
                </span>
                <span class="time">
                    0:52
                </span>
            </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and
        hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </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

Having difficulty achieving the hover transition effect

I've been working on a navbar design and I'm having trouble getting the hover effect to work on the links. Specifically, I am trying to add a transform property to the after element of the links but it doesn't seem to be taking effect. #navb ...

htmlcsshover

Is there a way to render an image onto a canvas using an input tag?

Looking to create an image preview using canvas? Upload the image with the input tag and watch it display on canvas. I've experimented with various methods such as using img tags, setting img src for canvas using img tags, and trying onclick function ...

javascripthtmlhtml5-canvas

Effortlessly Display or Conceal Numerous Table Columns Using jQuery

I have a small table where I want to hide certain details with a basic button... for instance, table { border-collapse: collapse; } th, td { border: 1px solid gray; padding: 5px 10px; } <button>Show/Hide Details</button> <table> ...

javascriptjqueryhtml

Troubleshooting issues with AngularJS's minDate functionality

I have been trying to set the minDate for the datepicker to today, following the example on the angularJS bootstrap site. However, it seems like something is not working correctly. There are no console errors showing up, but it appears that the minDate is ...

javascriptangularjstwitter-bootstrap

Using HTML5 History API to navigate backwards without allowing the user to move forward (can popState?)

My webpage showcases user information with the help of AJAX for seamless data modification without altering the page layout. The process is straightforward: - Users can view their data when they access their profile. - By clicking the Edit button, a form ...

ajaxhtmlbackforwardhtml5-history

"Unraveling the Mystery: Leveraging jQuery to Unleash the

I'm working on a script that looks like this: $(document).on("click", ".passingID", function () { var ids = $(this).attr('data-id'); $("#idkl").val( ids ); $.ajax({ method: "POST", url: ...

phpjqueryhtmljsonajax

Tips for increasing the size of Material-ui Rating icons

I am currently utilizing npm to develop a widget. I aim to utilize the material-ui Rating component and have successfully integrated it. However, when I embed the widget on a webpage, the html font-size is set at 62.5%, causing the component to appear too ...

javascriptcssnode.jsmaterial-ui

Any tips or hacks for successfully implementing vw resizing on the :before pseudo-element in webkit browsers?

When using vw sizes on webkit browsers, a well-known bug can occur where they do not update when the window is resized. The typical workaround for this issue has been to employ javascript to force a redraw of the element by reassigning the z-index upon res ...

javascriptjqueryhtmlcsswebkit

Leveraging Font Awesome icons within a WordPress theme

After installing the flat-responsive theme, I noticed that it includes Font Awesome CSS. Additionally, there is a reference to this in the functions.php file: wp_enqueue_style( 'flat_responsive_font-awesome', get_template_directory_uri() . &apos ...

phpcsswordpressfont-awesome

Approach to decoupling design elements from DOM interactions

Seeking recommendations or guidelines for effectively segregating classes utilized for browser styling and DOM manipulation. Specifically, we are developing a single-page app using backbone.js and heavily relying on jQuery for dynamically updating page el ...

cssjquerydom-manipulation

What is the purpose of including a viewport meta tag on my website if I already have CSS media queries in place?

As someone who is just starting out with building websites, I have been delving into the world of meta tags. However, even after conducting thorough research, I am still unsure about the necessity of a meta viewport tag when I am already utilizing CSS me ...

htmlcssviewport

Troubleshooting: CSS Selectors Hover Functionality Not Functioning as

I am having an issue where the styling does not change the display to block when hovering. Any insights or feedback would be greatly appreciated. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="t ...

htmlcss

Does the margin fall within the element's boundaries?

Consider this code: <html> <head> <title>Understanding CSS Box Model</title> </head> <body> <section> <h1>An example of h1 inside a section</h1> </section> </body> </html& ...

htmlcss

Triggering a jQuery click event to showcase the hidden content

I am attempting to replicate the functionality seen on the website. The issue I am facing is related to the event_content class. I want to display only a limited amount of content initially, and then hide the excess content. Upon clicking the plus class, ...

javascriptjqueryhtmlcss

Limit text to two lines inside a cell in a table

Apologies for not providing any evidence of my own efforts. I'm looking to wrap text in a table cell, but limit it to just 2 lines. Expanding the width is not possible. Any suggestions on how to achieve this? ...

jqueryhtmlcss

Images are not visible when scrolling horizontally

Hello everyone, this is my first time reaching out with a question here! I've been working on setting up a horizontal scroll feature and I'm almost there, but I'm encountering an issue where the scroll bar is appearing at the bottom of the ...

htmlcsshorizontal-scrolling

Execute a function upon pressing the enter key

Currently, I am working on coding a webpage with a form that includes one field where users input a set of numbers. After typing in the numbers, they should then press a button labeled 'Run' to execute the code. However, the issue arises when use ...

javascripthtml

Obtaining the Author's ID on Blogger

Is there a way to extract the author's ID on Google's blogger.com platform? I'm familiar with how to obtain the post ID using data:post.id, but what about the author's ID? ...

htmlcsswordpressblogsblogger

What is the best method for users to add a div element and its contents?

As someone new to the world of web development, I am currently learning and working on a project. I have encountered an issue with creating a custom div that includes a link and user-defined text. I want the div to be generated automatically when the use ...

javascriptjqueryhtmlcss

The location layer on my Google Maps is not appearing

For a school project, I am working on developing a mobile-first website prototype that includes Google Maps integration. I have successfully added a ground overlay using this image, but I am facing issues with enabling the "my location layer". When I tried ...

javascripthtmlgoogle-mapslocationmaps