CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Julia
Julia

Reputation: 558

Divs with same height with bootstrap

I have this structure of 8 divs aligned horizontally, and I want them to have the same height. Currently they have different heights depending on the content of the text inside them. Can anyone help? I have tried many workarounds but it still doesn't work for me. I'm using bootstrap 3 so flex is not the 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>

enter image description here

Upvotes: 3

Views: 476

Answers (2)

Zeel Vanani
Zeel Vanani

Reputation: 119

I used bootstrap 3 only. This solution will help!!

<!-- 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>

Upvotes: 1

Alexandre Elshobokshy
Alexandre Elshobokshy

Reputation: 10922

Each row need to have 12 columns, in your case you shouldn't put rows into each other :

<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/

Upvotes: 0

Related Questions