bootstrap collapse - text being displayed in wrong place

user_8318946 0
Viewed 168

I am using Bootstrap 4 collapse to show the text once is clicked. However, I am struggling with the place where content is displayed. When clicking on the button the text is being displayed on right and I'd like to have it below the button.

Could you please let me know how can I change it?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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>

<div class="row mt-4 mb-4 product-card-element text-left">
  <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#description" aria-expanded="false" aria-controls="description">
                            Test1
                        </button>
  <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#requirements" aria-expanded="false" aria-controls="requirements">
                            Test 2
                        </button>
  <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#output" aria-expanded="false" aria-controls="output">
                            Test 3
                        </button>
  <div class="collapse" id="description">
    test test description
  </div>
  <div class="collapse" id="requirements">
    <ol class="list-group-numbered">
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ol>
  </div>
  <div class="collapse" id="output">
    test test
  </div>
</div>

bootstrap-4 css html
2 Answers

To have the collapse div show under the button, one option is to wrap each button-div pair inside a parent div, like for example:

<div class="col-4">
    <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#output" aria-expanded="false" aria-controls="output">
        Test 3
    </button>
      
    <div class="collapse" id="output">
        test test
    </div>
</div>

Demo:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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>

<div class="row mt-4 mb-4 product-card-element text-left">
  <div class="col-4">
    <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#description" aria-expanded="false" aria-controls="description">
                            Test1
    </button>
                        
    <div class="collapse" id="description">
    test test description
    </div>
  </div>
  
  <div class="col-4">
    <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#requirements" aria-expanded="false" aria-controls="requirements">
                            Test 2
    </button>
    <div class="collapse" id="requirements">
      <ol class="list-group-numbered">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
      </ol>
    </div>
  </div>
  
  <div class="col-4">
    <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#output" aria-expanded="false" aria-controls="output">
                            Test 3
    </button>
  
  
    <div class="collapse" id="output">
      test test
    </div>
  </div>
</div>

user_76928590

Add row and column that should do the trick you can add more column depending where you would like output to be displayed and add CSS.

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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>
<style>

</style>
</head>
<body>

 <div class="row">
  <div class="column">

<div class="row mt-4 mb-4 product-card-element >
  <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#description" aria-expanded="false" aria-controls="description">
                            Test1
                        </button>
  <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#requirements" aria-expanded="false" aria-controls="requirements">
                            Test 2
                        </button>
  <button class="col m-2 p-2" type="button" data-toggle="collapse" data-target="#output" aria-expanded="false" aria-controls="output">
                            Test 3
                        </button>
                  </div>      
     <div class="column">                     
  <div class="collapse" id="description">
    test test description
  </div>
  
  <div class="collapse" id="requirements">
    <ol class="list-group-numbered">
    

      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
</div>
</div>
    </ol>
  </div>
  <div class="collapse" id="output">
    test test
  </div>
</div>

</body>
</html>

user_160245690
Related