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:
<div class="span4"> <div class="panel panel-primary"> <div class="panel-heading">jhdsahfjhdfhs</div> <div class="panel-body">fdoinfds sdofjohisdfj</div> </div> </div>
Bootstrap panels will fit just fine inside Bootstrap's columns. Try wrapping the full set of <a> tags in a <div class="container"> and <div class="row"> , then give each <a> tag a column class like col-md-6 (two 50% width columns at larger screen sizes, switching to a single full-width column at smaller screen sizes).
To create a non-bordered table within a panel, use the class . table within the panel.
In addition to styling the content within panels, Bootstrap includes a few options for laying out a series of panels.
A panel in bootstrap is a bordered box with some padding around its content: A Basic Panel.
You can use max-height
in an inline style
attribute, as 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 alternatively 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 restrict 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 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 :
<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.
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/ }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With