I have some bootstrap card boxes that has vary sizes of text that will be stored within each. I want to ensure that the box will retain the same height regardless of the amount. In that case, maybe only x amount of lines should display which is fine, just want to make sure that the boxes themselves are a consistent height because this will mess up the whole page if they are not. These are bootstrap 3 boxes.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<div >
<div v-for="(card, index) in cards">
<div v-if="canDisplay(index)" >
<div onclick="">
<div >
<div v-html="getImage(card)">
</div>
</div>
<h4 id="thumbnail-label" v-html="getTextLinkUrl(card)">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing
</h4>
<div v-html="card.description"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div >
<ul >
<li>
<button @click="edit(index)"><i
></i> Edit</button>
</li>
<li>
<button @click="remove(index)"><i
></i> Remove</button>
</li>
</ul>
</div>
</div>
</div>
<div v-for="(card, index) in cards">
<div v-if="canDisplay(index)" >
<div onclick="">
<div >
<div v-html="getImage(card)">
</div>
</div>
<h4 id="thumbnail-label" v-html="getTextLinkUrl(card)">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing
</h4>
<div v-html="card.description"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum non consectetur a erat nam. Massa vitae tortor condimentum lacinia quis vel. Elementum eu facilisis sed odio morbi. Tellus at urna condimentum mattis pellentesque id nibh. Et malesuada fames ac turpis egestas. Senectus et netus et malesuada. Massa enim nec dui nunc. Scelerisque in dictum non consectetur a. Vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Risus feugiat in ante metus dictum at tempor. Convallis convallis tellus id interdum velit. Id diam maecenas ultricies mi eget. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Metus aliquam eleifend mi in nulla.
Accumsan lacus vel facilisis volutpat est velit egestas dui id. Nibh sit amet commodo nulla facilisi nullam vehicula. Sed id semper risus in hendrerit gravida rutrum quisque. Eget felis eget nunc lobortis. Adipiscing enim eu turpis egestas pretium. Volutpat sed cras ornare arcu. Ac tortor dignissim convallis aenean. Risus nec feugiat in fermentum posuere. Turpis tincidunt id aliquet risus feugiat in ante metus. Vitae nunc sed velit dignissim sodales ut. Tellus elementum sagittis vitae et leo duis ut diam. Nibh praesent tristique magna sit amet purus gravida quis blandit. Ornare suspendisse sed nisi lacus sed. Eu non diam phasellus vestibulum lorem. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Porta lorem mollis aliquam ut. Condimentum mattis pellentesque id nibh. Ipsum suspendisse ultrices gravida dictum. Consequat semper viverra nam libero justo laoreet sit.
Nunc non blandit massa enim nec dui nunc mattis enim. Ut porttitor leo a diam sollicitudin tempor id. Eget mauris pharetra et ultrices neque ornare aenean. Eu sem integer vitae justo eget magna. Vitae tempus quam pellentesque nec nam aliquam sem et. Aliquet enim tortor at auctor. Nisl nisi scelerisque eu ultrices vitae auctor eu. Fames ac turpis egestas integer eget. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Dictum varius duis at consectetur lorem. Scelerisque felis imperdiet proin fermentum leo. Id aliquet lectus proin nibh. Diam maecenas ultricies mi eget mauris pharetra. Vulputate enim nulla aliquet porttitor. Dictum sit amet justo donec.
</div>
<div >
<ul >
<li>
<button @click="edit(index)"><i
></i> Edit</button>
</li>
<li>
<button @click="remove(index)"><i
></i> Remove</button>
</li>
</ul>
</div>
</div>
</div>
<div v-for="(card, index) in cards">
<div v-if="canDisplay(index)" >
<div onclick="">
<div >
<div v-html="getImage(card)">
</div>
</div>
<h4 id="thumbnail-label" v-html="getTextLinkUrl(card)">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing
</h4>
<div v-html="card.description"></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div >
<ul >
<li>
<button @click="edit(index)"><i
></i> Edit</button>
</li>
<li>
<button @click="remove(index)"><i
></i> Remove</button>
</li>
</ul>
</div>
</div>
</div>
</div>CodePudding user response：
i remove your closing div and move your content inside the thumbnail-description. added a specific height and hide the overflow. hope this helps you.
.thumbnail {
height: 450px;
overflow: hidden;
}
.thumbnail-description {
max-height:300px;
overflow:hidden;
}
@media only screen and (max-width: 768px){
.thumbnail {
height:auto;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<div >
<div v-for="(card, index) in cards">
<div v-if="canDisplay(index)" >
<div onclick="">
<div >
<div v-html="getImage(card)">
</div>
</div>
<h4 id="thumbnail-label" v-html="getTextLinkUrl(card)">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing
</h4>
<div v-html="card.description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div >
<ul >
<li>
<button @click="edit(index)"><i
></i> Edit</button>
</li>
<li>
<button @click="remove(index)"><i
></i> Remove</button>
</li>
</ul>
</div>
</div>
</div>
<div v-for="(card, index) in cards">
<div v-if="canDisplay(index)" >
<div onclick="">
<div >
<div v-html="getImage(card)">
</div>
</div>
<h4 id="thumbnail-label" v-html="getTextLinkUrl(card)">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing
</h4>
<div v-html="card.description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum non consectetur a erat nam. Massa vitae tortor condimentum lacinia quis vel. Elementum eu facilisis sed odio morbi. Tellus at urna condimentum mattis pellentesque id nibh. Et malesuada fames ac turpis egestas. Senectus et netus et malesuada. Massa enim nec dui nunc. Scelerisque in dictum non consectetur a. Vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Risus feugiat in ante metus dictum at tempor. Convallis convallis tellus id interdum velit. Id diam maecenas ultricies mi eget. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Metus aliquam eleifend mi in nulla.
Accumsan lacus vel facilisis volutpat est velit egestas dui id. Nibh sit amet commodo nulla facilisi nullam vehicula. Sed id semper risus in hendrerit gravida rutrum quisque. Eget felis eget nunc lobortis. Adipiscing enim eu turpis egestas pretium. Volutpat sed cras ornare arcu. Ac tortor dignissim convallis aenean. Risus nec feugiat in fermentum posuere. Turpis tincidunt id aliquet risus feugiat in ante metus. Vitae nunc sed velit dignissim sodales ut. Tellus elementum sagittis vitae et leo duis ut diam. Nibh praesent tristique magna sit amet purus gravida quis blandit. Ornare suspendisse sed nisi lacus sed. Eu non diam phasellus vestibulum lorem. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Porta lorem mollis aliquam ut. Condimentum mattis pellentesque id nibh. Ipsum suspendisse ultrices gravida dictum. Consequat semper viverra nam libero justo laoreet sit.
Nunc non blandit massa enim nec dui nunc mattis enim. Ut porttitor leo a diam sollicitudin tempor id. Eget mauris pharetra et ultrices neque ornare aenean. Eu sem integer vitae justo eget magna. Vitae tempus quam pellentesque nec nam aliquam sem et. Aliquet enim tortor at auctor. Nisl nisi scelerisque eu ultrices vitae auctor eu. Fames ac turpis egestas integer eget. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Dictum varius duis at consectetur lorem. Scelerisque felis imperdiet proin fermentum leo. Id aliquet lectus proin nibh. Diam maecenas ultricies mi eget mauris pharetra. Vulputate enim nulla aliquet porttitor. Dictum sit amet justo donec.
</div></div>
<div >
<ul >
<li>
<button @click="edit(index)"><i
></i> Edit</button>
</li>
<li>
<button @click="remove(index)"><i
></i> Remove</button>
</li>
</ul>
</div>
</div>
</div>
<div v-for="(card, index) in cards">
<div v-if="canDisplay(index)" >
<div onclick="">
<div >
<div v-html="getImage(card)">
</div>
</div>
<h4 id="thumbnail-label" v-html="getTextLinkUrl(card)">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous" /> Testing
</h4>
<div v-html="card.description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div >
<ul >
<li>
<button @click="edit(index)"><i
></i> Edit</button>
</li>
<li>
<button @click="remove(index)"><i
></i> Remove</button>
</li>
</ul>
</div>
</div>
</div>
</div>