Shift the plus-minus icon on the bootstrap accordion all the way to the right side

I'm struggling to adjust the position of the plus-minus icon on a Bootstrap accordion to the far right, but my current code isn't producing the desired result.

Here's the CSS snippet:

.mb-0 > a:before {
        float: right !important;
        font-family: FontAwesome;
        content:"\f068";
        padding-right: 5px;
    }
    .mb-0 > a.collapsed:before {
        float: right !important;
        content:"\f067";
    }
    .mb-0 > a:hover, 
    .mb-0 > a:active, 
    .mb-0 > a:focus  {
        text-decoration:none;
    }

And here is the corresponding HTML section:

<div class="accordion" id="accordionExample" style="margin-top: 3%;">
        <div class="card">
            <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                <a class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                    1. Human Growth and development
                </a>
            </h2>
            </div>

            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body">
                <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions.</p>
            </div>
            </div>
        </div>

I am aiming for a design similar to this example: JSfiddle

Answer №1

Update the padding-right property to be 3px in the panel-heading class.

.panel-heading{
  padding-right:3px;
}

Visit this link for reference.

Answer №2

When opting for ::after instead of ::before to position the icon after the text, you can utilize a blend of display: flex and justify-content: space-between for accurate alignment:

.mb-0>a:after {
  float: right !important;
  font-family: FontAwesome;
  content: "\f068";
  padding-right: 5px;
}

.mb-0>a.collapsed:after {
  float: right !important;
  content: "\f067";
}

.mb-0>a:hover,
.mb-0>a:active,
.mb-0>a:focus {
  text-decoration: none;
}

.mb-0>a {
  display: flex;
  justify-content: space-between;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="accordion" id="accordionExample" style="margin-top: 3%;">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <a class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          1. Human Growth and development
        </a>
      </h2>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions.</p>
      </div>
    </div>
  </div>

If sticking with :before, employing order can help in placing the icon after the text node:

.mb-0>a:before {
  float: right !important;
  font-family: FontAwesome;
  content: "\f068";
  padding-right: 5px;
  
  order: 2;
}

.mb-0>a.collapsed:before {
  float: right !important;
  content: "\f067";
}

.mb-0>a:hover,
.mb-0>a:active,
.mb-0>a:focus {
  text-decoration: none;
}

.mb-0>a {
  display: flex;
  justify-content: space-between;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="accordion" id="accordionExample" style="margin-top: 3%;">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <a class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          1. Human Growth and development
        </a>
      </h2>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions.</p>
      </div>
    </div>
  </div>

Answer №3

I utilized the display flex property to arrange the positioning of the two elements in the design. To achieve the desired effect of collapsing only when the plus button is clicked, I included the necessary classes. It appears that this solution effectively addresses your issue.

 CSS: 

  #collapse-btn {
     display: flex;
     justify-content: space-between;
     align-items: center;
  }

 HTML: 

  <h2 class="mb-0">
     <a class="btn btn-link collapsed" id="collapse-btn">
        1. Human Growth and development
        <i class="fas fa-plus" data-toggle="collapse" data-target="#collapseOne"></i>
     </a>
  </h2>

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

Discovering the best way to organize and sort information retrieved from the backend within an Angular

How can I restrict a user to only search for data that has been provided from the backend and prevent them from creating new data? In my backend, there are two words: "Chart" and "Map". I am looking for a way to limit the user's search to only these ...

Reorganize divisions using Bootstrap

I am exploring different ways to manage responsiveness through the reordering of divs. While I am aiming for a solution that is highly flexible, any suggestion would be appreciated. Desktop View: https://i.stack.imgur.com/boSOa.png Mobile View: https:// ...

I have a simple inquiry regarding the customization of table designs

I struggle with html/css, so I could really use some assistance. Here's a fiddle of a table link to fiddle. The td rows are currently the same width, but I want to set specific widths for each column - 200px for the left column and 50px for the right ...

Strategies for avoiding the opening of a new tab when clicking on a link in ReactJs

RenderByTenantFunc({ wp: () => ( <Tooltip id="tooltip-fab" title="Home"> <Button className="home-button"> <a href={ ...

Leveraging an array of Elasticsearch documents using AngularJS

The query results are given below... { "took": 6, "timed_out": false, "_shards": { "total": 5, "successful": 5, "failed": 0 }, "hits": { "total": 45, "max_score": 0, "hits": [] }, "aggregations": { ...

Tips for Embedding External JavaScript and URLs in Joomla Protostar Template

I'm interested in incorporating a hamburger menu into my Joomla protostar template, similar to the one featured on this URL: ['https://codepen.io/PaulVanO/pen/GgGeyE'] This will provide me with a fullscreen hamburger menu for both desktop ...

Warning: An error occurred with undeclared variables... missing variable declaration

Hey everyone, I recently made a post but it seems like my explanation was not clear enough. So here's the issue - I have a products page with a URL structure like http:.......rest_id=3/area='Enfield'. I've been using a similar query on ...

Unable to calculate height properly when using the formula height: 70% + 0px

My attempt to set the height of a div element to 70% using CSS3's calc() function has been unsuccessful. While specifying viewport height (70vh) works, I specifically need the height to be 70%. .scroll-inner-container { height: -moz-calc(70vh + 0 ...

Order of tabs, dialog, and forms customization using Jquery UI

I'm currently working on a jquery dialog that contains a form split into multiple tabs. In order to enhance keyboard navigation, I am looking for a way to make the tab key move from the last element of one tab to the first element of the next tab. Cur ...

Steps for dynamically adjusting form fields depending on radio button selection

I am looking to create a dynamic form that changes based on the selection of radio buttons. The form includes textfields Field A, Field B, ..., Field G, along with radio buttons Radio 1 and Radio 2. I need to update the form dynamically depending on which ...

Troubleshooting the Div Ordering Problem in Bootstrap 4

Currently, I am using Bootstrap 4 and facing an issue with the layout order. Despite searching for a solution extensively, I have not been able to get it right or find one in the archives. Here is what I need... For desktop view, the layout should appear ...

CSS: Set the left position to 250px with the added feature of hiding any overflow

I am currently working on a sidebar that can be shown or hidden using JavaScript with CSS animations. To achieve this effect, I need to position the content div (#main) using left: 250px;. #main { left: 250px; position: relative; overflow: hidden; } ...

Is there a way to invert the orientation of an object within a canvas?

As I was experimenting with Javascript, I attempted to implement a feature where my 'Player' character would fall down after reaching a jumpDistance of 50. The idea was to simulate a small jump-like motion for the player. While the code may not ...

Triggering a specific outcome with every user interaction involving the selection of an element

How can I trigger this effect each time the user clicks on the element using jQuery? I have added a "ripple" class upon clicking, but when I click on the element for the second time, the effect does not execute because the class has already been added. Ho ...

Utilize Bootstrap button dropdown to automatically assign a selected value to a list item

I have a form with a select box that transforms into a bootstrap button after the page loads. However, I am unable to set the selected value for the converted bootstrap button drop-down li. <button type="button" class="btn dropdown-toggle btn-default" ...

How can I avoid C3.js legends from overlapping when hiding or showing a div?

Every time I visit a specific page, a simple chart is automatically generated: function displayOptions() { $("#div1").show(); chartRef.flush(); } function displayChoices() { $("#div1").show(); } $("#div1").hid ...

Challenges arise in CSS layout when incorporating PHP code

I have encountered an issue with the navigation bar on my webpage. When I insert the HTML directly into the page, there is no space above it. However, when I include an external HTML file using PHP's include function, a margin appears above the naviga ...

javax.el.MethodNotFoundException: JSP method cannot be located

While compiling the JSP template, I encountered the following exception: The method getFriendImage() is not recognized I attempted to rebuild the class without success. The src attribute contains a valid link to an image that is functioning properly. ...

How to ensure HTML elements are styled to occupy the full width of their parent container while respecting the minimum width requirement

Is there a way to make HTML elements have a width ranging from 150px to 200px while filling up 100% of their parent's width? Check out Image 1: https://i.sstatic.net/nYNGp.jpg And here is Image 2 (after resizing the window): https://i.sstatic.net/ ...

Simple HTML and CSS tutorial: Creating a vertical menu with a left-popping submenu

Recently, I designed a vertical menu bar using a Dreamweaver template with CSS styling. Subsequently, I added a submenu feature that I intended to have pop out from the left side of the main menu links they are associated with. Despite numerous attempts an ...