Search code examples
cssbootstrap-4accordionvertical-alignment

I want to align images from different divs within in my Bootstrap 4 Accordion Card above each other

I have an arrow image in each heading of my Bootstrap 4 Accordion Card. My goal is to have them all line up above each other on the right edge(but still within) the card's border. Everything i've tried so far either pushes the arrows out of the card or makes them go below the rest of the header.

I've tried justify-content, align-content, and align-items but none of them have worked yet. Any tips on how to achieve this would be appreciated. Below is how it looks currently. enter image description here

<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;
  
  }
Solution

  • You could do it by making your <h5> element into a flex row and utilize the justify-content property with space-between.

    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;
}

    I'm using V instead of your image to visualize the effect, but the result is 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>

    Codepen example here.

    I would also suggest checking out this very simple guide on Flexbox.