I am looking to stack images from various divs in my Bootstrap 4 Accordion Card so that they line up perfectly

I am struggling to align the arrow images in each heading of my Bootstrap 4 Accordion Card. My objective is to have them neatly lined up above each other on the right edge, but still within the card's border. Despite trying various methods like justify-content, align-content, and align-items, I haven't been successful so far. Any suggestions on how to achieve this would be greatly appreciated. You can see the current layout below. https://i.sstatic.net/aQpVY.png

<div class="card">
      <h3> FAQ </h3>
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
         How many team members can I invite? <img src="images/icon-arrow-down.svg" class="arrow"> 
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
         You can invite up to 2 additional users on the Free plan. There is no limit on 
  team members for the Premium plan.
      </div>
    </div>
  </div>

#accordion{
      
      width:30%;
      float: right;
      position:relative;
      top: 300px;
      right: 900px;
      align-content: center;
      font-family: 'Kumbh Sans', sans-serif;
      
      
  }

  .card-header{
      
      background-color: white;
      clear: both;
    
      
  }
  
  .arrow{
      
      
  }
  
  button{
      position:relative;
      left:-32px;
  
  }
cssbootstrap-4accordionvertical-alignment

Answer №1

To achieve this layout, you can convert your <h5> element into a flex row and apply the justify-content property with space-between.

For example:

HTML:

<div class="card">
    <h3> FAQ </h3>
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
         How many team members can I invite?
        </button>
        v
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        You can invite up to 2 additional users on the Free plan. There is no limit on 
        team members for the Premium plan.
      </div>
    </div>
</div>

CSS:

#accordion {      
    width:30%;
    float: right;
    position:relative;
    top: 300px;
    right: 900px;
    align-content: center;
    font-family: 'Kumbh Sans', sans-serif;
}

.card-header {
    background-color: white;
    clear: both;
}

.card-header h5 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
  
button{
    position:relative;
    left:-32px;
}

The effect of using V instead of an image in the snippet remains the same.

Snippet:

#accordion {      
    width:30%;
    float: right;
    position:relative;
    top: 300px;
    right: 900px;
    align-content: center;
    font-family: 'Kumbh Sans', sans-serif;
}

.card-header {
    background-color: white;
    clear: both;
}

.card-header h5 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
  
button{
    position:relative;
    left:-32px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
    <h3> FAQ </h3>
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
         How many team members can I invite?
        </button>
        v
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        You can invite up to 2 additional users on the Free plan. There is no limit on 
        team members for the Premium plan.
      </div>
    </div>
</div>

Check out the Codepen example here.

For more information on Flexbox, consider reading this beginner-friendly guide.

Answer №2

I created a test scenario to mimic the behavior of Bootstrap 4, and I made some changes by moving the arrow image inside the <h5> tag. By adding the float:right attribute, the element is now aligned to the right.

.xl {
  width:100%; 
  border: solid 1px #333;
}

#accordion{
  margin-left:30px;
  width:60%;          
}
  
.arrow{
  width:36px;
  height: auto;
  float:right;
}
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='xl'>
<h3>Some Header</h3>
<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1 
        </button>
        <img src='https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png' class='arrow'>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Lorem Ipsum.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2 
        </button>
        <img src='https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png' class='arrow'>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Lorem Ipsum.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3 
        </button>
        <img src='https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png' class='arrow'>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Lorem Ipsum.
      </div>
    </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

Explore a Variety of Albums with our Bootstrap LightBox Gallery

I'd like to incorporate this code into my gallery website, but I'm encountering a couple of issues. Firstly, when one album's slides finish, I want it to loop back to the first image. Additionally, there seems to be an intermittent problem w ...

javascripthtmltwitter-bootstrapbootstrap-4

Using jQuery to control mouseenter and mouseleave events to block child elements and magnify images

My objective is to create a hover effect for images within specific div elements. The images should enlarge when the user hovers their mouse over the respective div element. I plan to achieve this by adding a child element inside each div element. When the ...

javascripthtmljquerycss

What is the best way to retrieve image value from Django form?

<div class="card-text"> <img id="image_upload_preview" {% if adminform.form.photo.? %}src="{{ adminform.form.photo.? }}"{% endif %} /> <input type='file' id="inputFile" name="photo" class="img-choose" /> </div> ...

django-formsbootstrap-4

Structure of Divs with Bootstrap

Looking to create a layout with two divs side by side like the image below: Example However, when the screen width increases, the layout changes to this: Current Here is the code: Is there anyone skilled in this area who can guide me through it? Your a ...

htmlcssbootstrap-4

Spacious Bootstrap layout - 3 columns with the center column taking up the most space

I am in the process of designing a layout with 3 columns aligned in the same row: The first column should adjust to its content, such as a picture or avatar The third column should also adjust to its content, like a date or time. Meanwhile, the second col ...

htmlcssbootstrap-5

Create a JavaScript timer on a PHP file that sets the input and textarea styles back to their default

When I use a timer in a JavaScript file after submitting a form to insert data into a MySQL database via PHP, the style of the textarea and input elements changes back to default. This issue only occurs when the timer is active. I tested submitting the fo ...

javascriptphphtmlcssmysql

Stop using Flexbox in Material UI on small screens

How can I prevent Flexbox from functioning on small screens using Material UI? I am looking for something similar to the d-md-flex class in Bootstrap but for Material UI. In Bootstrap (works as expected) <div class="d-md-flex align-items-md-center ...

cssreactjsflexboxmaterial-ui

Adjusting Column Order in Bootstrap 4 for Mobile Screens

I have a unique challenge regarding changing the order of columns in Bootstrap for mobile devices. While I have come across many Stack Overflow questions on this topic, none seem to address changing the order of columns that are on different rows. <d ...

csstwitter-bootstrapmobilebootstrap-4responsive-design

Incapable of utilizing CSS Custom Properties (also known as CSS Variables) in conjunction with SASS @if Conditional Statements

I'm attempting to transfer CSS Custom Properties to a SASS Mixin. I can successfully use the variables directly in the desired styling. However, there seems to be a problem when utilizing a variable within an If statement. Here's an example of t ...

csssasscss-variablesscss-mixins

What causes the element with position: fixed and width 100% to exceed the viewport boundaries on iOS 8?

I'm facing an issue with an element that is fixed to the top of the page and scrolls horizontally along with the page. The CSS code for this element is quite straightforward: .thing { position: fixed; top: 0; width: 100%; height: 30px; back ...

htmlioscssios8

Guide on making an SVG tooltip using the Menucool JS extension

I am trying to add a simple tooltip to an SVG "map" when the mouse hovers over a rectangle. To create the tooltip, I would like to utilize this specific plugin. Here is how I have connected the SVG to HTML: <object data="map.svg" type="image/svg+xml" ...

javascriptjqueryhtmlcsssvg

Is it possible to modify the background color of a select option menu when hovering over it?

It turns out that the default background color of the select option menu changes to blue when it is hovered over. However, I would like to personalize and adjust it to my preference using Bootstrap 5 and CSS. Any assistance with this customization would ...

cssbootstrap-5

How can I incorporate calc() with fit-content or a similar function?

Is there a way to set the height of a div to "fit-content minus 15px" without using JavaScript? I attempted to use calc(), but it did not yield the desired result. My objective is to dynamically adjust the height of an element containing multiple p tags, ...

htmlcsssass

Creating a box that is connected by lines using JSON data requires several steps. You

I am attempting to dynamically draw a line using the provided JSON data. I have heard that this can be easily achieved with flexbox. Important: I would greatly appreciate a solution involving flexbox This is what I hope to achieve: https://i.stack.imgu ...

javascriptjqueryhtmlcss

What could be causing my file input to appear misaligned?

Can anyone assist me with a strange issue I am facing? Despite using inspect element on my file input and it appearing in the correct place, it does not function as expected. To see for yourself, visit oceankarma.co and click on 'Post' at the top ...

htmlcssfileinput

How to insert an image into a div element in HTML5

I have a basic div element shown below: <div class="avatar"> <img src="http://quickshare.my3gb.com/download/testpic.jpg" /> </div> (The original image size is 216 * 216 pixels) and the CSS I am using is as follows: .avatar { float: r ...

c#jqueryhtmlcssasp.net-mvc-4

The button in Bootstrap 4 that triggers the modal stays in a highlighted or clicked state even after the modal has been

I am currently utilizing the button below to trigger the opening of a modal window However, upon closing the modal, it seems to maintain a highlighted or clicked appearance with a shadow effect. Initially, I assumed I could address this issue by implement ...

jqueryhtmlcssbootstrap-4bootstrap-modal

What is causing the failure of these "span" elements within an "a" tag in IE7?

Here is a code snippet that I am working with: HTML (version 4.0) <div class="temperatura"> <a href="/link/" class="temperatura_localita"> <span style="padding-left:12px;"> T ...

htmlcss

What is the CSS property that aligns content to the center of a button in HTML?

Here's an intriguing and somewhat trivial inquiry: if I were to create a button tag in HTML, then input some text such as "click me" or something <button> Click Me! </button> and proceed to use CSS to assign it width and height, like ...

htmlcssbuttonattributescenter

I'm having trouble customizing the CSS for the 'table table-bordered' Bootstrap table class. Can anyone offer me some guidance on how to get it to work properly

I'm a beginner in web design and need some assistance. Currently, I am working with Bootstrap 3.0 and have a table with the following data... <table class="table table-bordered" width="100%"> <thead> <tr> <th>Colu ...

htmlcsstwitter-bootstrap