Divs de même hauteur avec bootstrap

Question

J'ai une structure de 8 divs alignés horizontalement, et je veux qu'ils aient la même hauteur. Actuellement, elles ont des hauteurs différentes en fonction du contenu du texte à l'intérieur. Quelqu'un peut-il m'aider ? J'ai essayé de nombreuses solutions de contournement, mais cela ne fonctionne toujours pas. J'utilise bootstrap 3 donc flex n'est pas la solution :(

<div class="container" style="width:100%">
<div class="col-xs-6">
    <div class="row ">
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending DTO</div>
                </div>   
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending Offer</div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending Budget Approval</div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending Technical Analysis</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-xs-6" style="height:100%">
    <div class="row ">
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending Information</div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending Provisioning</div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Pending in progress</div>
                </div>
            </div>
        </div>
        <div class="col-xs-3 clickable">
            <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align: center">Provisioned</div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

Chaque ligne doit avoir 12 colonnes, dans votre cas vous ne devez pas mettre les lignes l'une dans l'autre :

<div class="container" style="width:100%">
  <div class="row">

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>

    <div class="col-xs-3 clickable">
      <div style="color: #555555; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;">
        <div class="panel panel-default">
          <div class="panel-heading" style="text-align: center">Text example Text example Text example</div>
        </div>
      </div>
    </div>
  </div>

https://jsfiddle.net/he6na89r/

Answer 2

J'ai utilisé bootstrap 3 uniquement. Cette solution va m'aider !

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.equal, .equal > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}
</style>
</head>
<body>

<div class="container-fluid">
  <div class="row equal">
    <!--begin panel 1 -->
    <div class="col-md-4">
      <div style="text-align:center" class="panel panel-primary">
        <div class="panel-heading">
          <h1 class="panel-title text-center">Pending DTO</h1>
        </div>
        <!-- end panel-heading -->
        <div class="panel-body">

          <p class="text-left lead2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

        </div>
        <!-- end panel-body -->
      </div>
      <!-- end panel-primary -->
    </div>
    <!--end col-md-4 -->
    <!-- begin panel 2 -->
    <div class="col-md-4">
      <div style="text-align:center" class="panel panel-primary">
        <div class="panel-heading">
          <h1 class="panel-title">Gestíon de Redes Socials</h1>
        </div>
        <!-- end panel-heading -->
        <div class="panel-body">

          <p class="text-left lead2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

        </div>
        <!-- end panel-body -->
      </div>
      <!-- end panel-primary -->
    </div>
    <!-- end col-md-4 -->
    <!--begin panel 3 -->
    <div class="col-md-4">
      <div style="text-align:center" class="panel panel-primary">
        <div class="panel-heading">
          <h1 class="panel-title">Test</h1>
        </div>
        <!-- end panel-heading -->
        <div class="panel-body">
          <p> test

          </p>

        </div>
        <!-- end panel-body -->
      </div>
      <!-- end  panel-primary -->
    </div>
    <!-- end col-md-4 -->
  </div>
  <!-- end row -->
</div>

</body>
</html>