Rajan
Rajan

Reputation: 2425

How to limit the size of Bootsrap panels?

Hi I want to create dashboard using bootstrap panels.

Now I want the panels to be of equal size, if the data is more then i want to automatically set the overflow to scroll. I want to have three equal sized pannels in each row in which i will fetch data from database

I did this but didn't work:

<div class="col-md-4">
      <div class="col-md-12">
        <div class="panel panel-success">
            <div class="panel-heading">
              <h2 class="panel-title">Last 10 Inserted Users</h2>
            </div>
             <div class="panel-body" style="overflow:hidden;">        


             My PHP code to fetch data which maybe small or large

            </div>
        </div>
      </div>
    </div>

Upvotes: 0

Views: 73

Answers (2)

Abhijeet Mukherjee
Abhijeet Mukherjee

Reputation: 59

For Panel Size limitation You can code like this..

<div class="panel panel-primary">
<div class="panel-heading">Heading</div>
<div class="panel-body" style="min-height: 10; max-height: 10;">Body</div>
</div>

Upvotes: 0

Kiran Dash
Kiran Dash

Reputation: 4956

The below mentioned css will fix the height of the div where you have content:

.panel-body {
  height:300px;//change it to your desired height
  overflow-y: scroll;//will apply scroll on the vertical axis when your content goes beyond 300px
}

Upvotes: 2

Related Questions