Aligning the headers of Bootstrap accordion panels

I'm currently working on creating a customized right-aligned accordion using Bootstrap CSS and JS library. Bootstrap accordions consist of two main components: headers (which include a button) and bodies. Here is the code snippet I have implemented so far:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BootStrap</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbdb0b0abacabadbeaf9feaf1eff1eff2bdbaabbeed">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5d5a0bba5bba5b8f7f0e1f4a7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
...
        body{
        margin: 50px;
        }
        .accordion, .accordion-button, .accordion-header{
        text-align: right
        }
    </style>
</head>
<body>
<div class="accordion" id="accordionExample">
    ...

In order to align both the header and body parts to the right side, I added the following CSS code within the <style> tag:

<style>
    .accordion, .accordion-button, .accordion-header {
    text-align: right
    }
</style>

Although it successfully aligned the body section, the header remained unaffected: Any suggestions on how I can resolve this issue?

htmlcssbootstrap-4accordiontext-align

Answer №1

All you have to do is wrap the text with a div

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BootStrap</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a0805051e191e180b1a2a5f445a445a47080f1e0b58">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d0ddddc6c1c6c0d3c2f2879c829c829fd0d7c6d380">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab8b5b5aea9aea8bbaa9aeff4eaf4eaf7b8bfaebbe8">[email protected]</a>/distjs/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        body{
            margin: 50px;
        }
        .accordion-header-text{
            width: 100%;
            text-align: right
        }
        .accordion,.accordion-button,.accordion-header{
            text-align: right
        }
    </style>
</head>
<body>
<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" >
                <div class="accordion-header-text">Accordion Item #1</div>
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the first item's accordion body.</strong> It is hidden 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="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Accordion Item #2
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the second item's accordion body.</strong> It is hidden 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="headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                Accordion Item #3
            </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the third item's accordion body.</strong> It is hidden 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>
</body>

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

Creating a function that uses setInterval to continuously update the input with a specific value

I am looking to use the setInterval function to continuously update the value of #test1. Additionally, I want the value of #test1 to be cleared and reset to 1 second after the user clicks a button. Example output can be found here: http://jsfiddle.net/eK ...

javascriptjqueryajaxhtml

Using PHP to fill input field with text output

I've been searching for an answer to this question, but so far I haven't found one. In my database, I input two pieces of data and receive a success or failure outcome. What I want is to have a "Submit" button that triggers my PHP query (which ...

phpjavascripthtmlajaxdom

Secret button concealed within a div, revealing only a helpful hint

On my website, there is a list of items where each item is represented by either a picture or a name enclosed in an <article> tag. Here is an example of how it looks: <article class="client-card"> <p><img width="211" height="106" ...

htmlcssstylesheet

What are some additional options for sourcing images in the img HTML tag?

I am facing an issue where I have two alternative images, with one image set as the default if the first two are not found. <img src='image1.png' onError="this.onerror=null;this.src='image2.png';" onError=" ...

javascripthtml

Comparing Meteor's unsetting property versus setting it to null

In my application, there are fields including a timestamp and userId that may or may not be present in a Collection based on a Checkbox input. When the user selects the checkbox, the properties are saved with their respective Date and Time values. Howeve ...

htmlnode.jsmongodbmeteorsimple-schema

What methods can be used to retrieve text data from a website built with Angular technology?

Exploring new territories with Angular and Selenium, I find myself facing a challenge in extracting specific text fields from a website. The precise value seems elusive within the intricate web of HTML code. Seeking guidance or tips from experienced indivi ...

pythonhtmlangularjsseleniumweb-scraping

How can a single item be selected from a multi-select drop-down menu using Python Selenium?

In the web page, there is a button labeled [Add Field] which, when clicked, reveals a drop-down menu. The xpath for this drop-down menu is: '//*[@id="adv_options[3][]' The second array item is empty as shown here: '[]'. I have manag ...

pythonhtmlformsseleniumxpath

Guide on incorporating a JS file in a React application

I recently obtained a template for my website that includes the following JS file which is being called from my React component. !(function($) { "use strict"; // Hero typed if ($('.typed').length) { var typed_strings = $(&quo ...

javascriptcssreactjsreact-nativenodes

When the JS function 'postMessage()' is invoked on an HTML object tag, what specific action does it perform?

Not too long ago, I found myself on a quest to figure out how to trigger the print function on a PDF that I was displaying in Adobe AIR. With a bit of guidance from a helpful individual and by utilizing postMessage, I successfully tackled this issue: // H ...

javascripthtmlactionscript-3pdfobject-tag

Separate the label and content sections in an Angular Material vertical stepper

https://i.sstatic.net/S1gIH.jpg After applying the following CSS: mat-step-header{ display: flex ; justify-content: flex-end ; } I am attempting to make this stepper function properly. I have implemented Angular Material design for a vertical stepp ...

cssangularangular-material

jquery target descendants with specific names

In the provided HTML code snippet, there is a main div with the class name of cxfeeditem feeditem, and it contains multiple child elements with similar class names and structure. My query pertains to extracting values from specific children within all the ...

javascriptjqueryhtmljquery-uijquery-selectors

Selecting one, multiple, or all checkboxes and attempting to proceed by activating the button will not function as intended

The functionality of the "check all" / "uncheck all" button allows me to easily select or deselect all checkboxes within my form. The "proceed..." button should become active once one, multiple, or all checkboxes are checked. While this feature works smoo ...

jqueryhtmlcheckbox

ngIf works by organizing elements based on the initial letter they start with

I have a list of names that I need to sort by their first letter. To achieve this, I created buttons representing each letter of the alphabet. When a letter is clicked, only the names starting with that letter should be displayed using ngIf. <button *n ...

htmlangularionic3

Application with menu design, similar to the layout of google.com on mobile devices

Have you seen the Android smartphone with Chrome from GOOGLE.COM? Did you notice the pop-up MENU that looks similar to an application? This menu has a "SPRING" effect, and I'm curious how Google achieved this result. I tried using the property "-web ...

javascriptandroidjqueryhtmlcss

Developing a Highchart Graph using JavaScript

I am trying to develop a high chart graph. Check out my code on FIDDLE LINK. I have two values, a and b, for the x-axis and y-axis. The issue arises when the difference between a and b is minimal, such as when both are equal (-9). In such cases, the grap ...

javascriptjqueryhtmlcss

After several interactions, the CSS files fail to load

I'm currently utilizing jQuery Mobile with 3 pages, and I've noticed that after navigating between the pages, the CSS is not being rendered properly. LoadCss.js $(document).on("pageinit",function(event) { $("#categoriesPage").on('pages ...

javascriptcssangularjsjquery-mobile

I am looking to insert a link into each column, but unfortunately, the styling is becoming disrupted whenever I attempt to do so due to the constraints

Is there a way to add links to each column without disrupting the current styling? Apologies for the messy code, I am still new to this field. <div class="row justify-content-end"> <a href="#"><div class=&qu ...

htmlcssgridbootstrap-5styling

Can a placeholder pseudo-element possess pseudo-classes?

I am looking to create an animation for the appearance and disappearance of the placeholder pseudo-element in an input[type=text]. My initial approach was to apply styles, including transitions, to pseudo-classes like :active in order to achieve this effec ...

csscss-selectorspseudo-elementpseudo-class

Creating a sleek CSS animation for a slot machine effect: Ensuring it stops smoothly and at a specific time limit

I'm working on creating a CSS animation that mimics a slot machine, but I'm struggling to achieve a smooth transition. .scrollable { height: 150px; width: 150px; margin: 0 auto; padding: 0; background: #000; ...

csscss-animationskeyframe

Trigger elements in the navigation bar as the user navigates through different sections of my single-page website

I've been trying to implement this particular example on my website, but I seem to be struggling with it. Here are the lines that I added: <script src="jQuery/jquery-2.1.1.min.js" type="text/javascript"> </script> <script src="jQuery/ ...

jquerycssscrolluinavigationbar