How to make a Bootstrap panel with a fixed height

Question

I use bootstrap panel to display text and images, but as the text grows, the body of the panel also grows. I want to know how to create a body with a fixed height, for example. 10 lines or no more than 10 lines. Here is my code:

 <div class="span4"> <div class="panel panel-primary"> <div class="panel-heading">jhdsahfjhdfhs</div> <div class="panel-body">fdoinfds sdofjohisdfj</div> </div> </div> 

Answer 1

You can use max-height in the inline style attribute, as shown below:

 <div class="panel panel-primary"> <div class="panel-heading">jhdsahfjhdfhs</div> <div class="panel-body" style="max-height: 10;">fdoinfds sdofjohisdfj</div> </div> 

To use scrolling with content that overflows a given max-height , you can also try the following:

 <div class="panel panel-primary"> <div class="panel-heading">jhdsahfjhdfhs</div> <div class="panel-body" style="max-height: 10;overflow-y: scroll;">fdoinfds sdofjohisdfj</div> </div> 

To limit the height to a fixed value, you can use something like this.

 <div class="panel panel-primary"> <div class="panel-heading">jhdsahfjhdfhs</div> <div class="panel-body" style="min-height: 10; max-height: 10;">fdoinfds sdofjohisdfj</div> </div> 

Specify the same value for max-height and min-height (either in pixels or in dots - until it is consistent).

You can also put the same styles in the css class in the stylesheet (or the style tag, as shown below), and then include them in your tag. See below:

Style Code:

 .fixed-panel { min-height: 10; max-height: 10; overflow-y: scroll; } 

Apply style:

 <div class="panel panel-primary"> <div class="panel-heading">jhdsahfjhdfhs</div> <div class="panel-body fixed-panel">fdoinfds sdofjohisdfj</div> </div> 

Hope this helps with your need.

Answer 2

HTML:

 <div class="span4"> <div class="panel panel-primary"> <div class="panel-heading">jhdsahfjhdfhs</div> <div class="panel-body panel-height">fdoinfds sdofjohisdfj</div> </div> </div> 

CSS:

 .panel-height { height: 100px; / change according to your requirement/ }