How to make Bootstrap Panel body with fixed height

Question

I am using bootstrap s panel to display text and image  but as the text grows  the body of the panel also increases  I want to know how to create the body with fixed height  e g  10 rows or at most 10 rows   Here is my code    lt div class  span4  gt     lt div class  panel panel-primary  gt       lt div class  panel-heading  gt jhdsahfjhdfhs lt  div gt       lt div class  panel-body  gt fdoinfds sdofjohisdfj lt  div gt     lt  div gt   lt  div gt

User · Answer

HTML      lt div class  span4  gt     lt div class  panel panel-primary  gt       lt div class  panel-heading  gt jhdsahfjhdfhs lt  div gt       lt div class  panel-body panel-height  gt fdoinfds sdofjohisdfj lt  div gt     lt  div gt   lt  div gt    CSS      panel-height     height  100px    change according to your requirement

User · Answer

You can use max-height in an inline style attribute  as below    lt div class  panel panel-primary  gt     lt div class  panel-heading  gt jhdsahfjhdfhs lt  div gt     lt div class  panel-body  style  max-height  10   gt fdoinfds sdofjohisdfj lt  div gt   lt  div gt    To use scrolling with content that overflows a given max-height  you can alternatively try the following    lt div class  panel panel-primary  gt     lt div class  panel-heading  gt jhdsahfjhdfhs lt  div gt     lt div class  panel-body  style  max-height  10 overflow-y  scroll   gt fdoinfds sdofjohisdfj lt  div gt   lt  div gt    To restrict the height to a fixed value you can use something like this    lt div class  panel panel-primary  gt     lt div class  panel-heading  gt jhdsahfjhdfhs lt  div gt     lt div class  panel-body  style  min-height  10  max-height  10   gt fdoinfds sdofjohisdfj lt  div gt   lt  div gt    Specify the same value for both max-height and min-height  either in pixels or in points     as long as it   s consistent    You can also put the same styles in css class in a stylesheet  or a style tag as shown below  and then include the same in your tag  See below   Style Code    fixed-panel     min-height  10    max-height  10    overflow-y  scroll      Apply Style     lt div class  panel panel-primary  gt     lt div class  panel-heading  gt jhdsahfjhdfhs lt  div gt     lt div class  panel-body fixed-panel  gt fdoinfds sdofjohisdfj lt  div gt   lt  div gt    Hope this helps with your need

[html] How to make Bootstrap Panel body with fixed height

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3