What is the best way to create panels with a set height in bootstrap?

This is an example image I want to use:

Is there a way to set a fixed height for all my bootstrap panels? 

<div class="col-md-3 padding-0">
  <div class="panel panel-default">
    <div class="panel-body" style="min-height: 10px; max-height: 10px;">
      <img class="img-responsive" src="images/artgram.png" alt="">
      <p>Have you ever been in a company’s reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better? Have you ever been in a company’s reception area that is so impressively stylish that
        your concept of their professionalism or importance changed for the better?</p>
    </div>
  </div>
</div>

<div class="col-md-3 padding-0">
  <div class="panel panel-default">
    <div class="panel-body" style="min-height: 10px; max-height: 10px;">
      <img class="img-responsive" src="images/artgram.png" alt="">
      <p>Have you ever been in a company’s reception area that is so impressively stylish that your concept of their professionalism or importance changed for the better?</p>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrap

Answer №1

To handle panel heights, you can either set a fixed height with hidden overflow

.panel-body {
    height: 150px;    // adjust as needed
    overflow: hidden;
}

Alternatively, you can dynamically assign the maximum rendered height to all panels using JavaScript after page load. You can refer to a similar question I answered here. The code snippet is provided below

var panels = document.getElementsByClassName('panel-body');

var maxHeight = Array.prototype.map.call(panels, function(panel) {
    return parseInt(getComputedStyle(panel).height, 10);
  })
  .reduce(function(a, b) {
    return Math.max(a, b);
  });

for (var i = panels.length; i-- > 0;) {
  panels[i].style.height = maxHeight + 'px';
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="row">
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="panel panel-default col">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit
        amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the width of the Bootstrap input group-prepend/addon

I am encountering difficulties with ensuring that all prepend add-ons have the same width. The issue arises when using Font Awesome icons, as each prepend is sized according to its specific icon. I came across a similar thread from approximately one year a ...

htmlcssbootstrap-4

Is there a way to display the message "no results" when none of the div elements are visible?

I am facing an issue with displaying a message on my webpage. I have multiple divs that are being filtered using filters on a webshop. My goal is to show the message "no results" when all divs have their display set to none. Can anyone provide guidance on ...

javascripthtml

What is the best way to align every element in a single corner using Flexbox CSS?

My goal is to place a link in each corner (left, top, right, bottom) using Flexbox. I attempted using top: 0 or adjusting the flex-direction to column. .container { position: relative; } .top { display: flex; justify-content: space-b ...

htmlcssflexbox

Change the colors of a dynamic row in an HTML table using various options

I have successfully implemented a dynamic table using HTML and JavaScript. However, instead of applying alternate row colors, I want to assign a unique color to each row. How can I achieve this? <!DOCTYPE HTML> <html> <head> ...

javascriptjqueryhtmlcss

Getting in formation without needing a table

Tables are not the way to go for alignment. How can I align this without using a table? I have several input fields, each with a label positioned to the left of it. I want all the input fields to be aligned on the left side. Below is a simple representati ...

htmlcssvertical-alignment

Scrolling Content CSS Sticky iPhone Mockup

Can someone assist me with building an iPhone Mockup with scrolling Content? I want the Mockup to be positioned in the middle of a web page. Specifically, when I scroll down and the iPhone is visible, I would like it to remain sticky so that only the conte ...

htmlcssstickymockups

What is the best way to use flexbox to horizontally and vertically center a div within another div?

Is there a way to perfectly center a div both horizontally and vertically within another div using flexbox? If you've looked at other Q/A threads like this one or that one, you may find them too specialized for your needs. ...

htmlcsslayoutflexbox

Instructions on creating a vertical height adjustment handle for a website

Is there a way to create a 100% height div that can be divided by a draggable border vertically? Take a look at my fiddle to see what I have so far: http://jsfiddle.net/k5rtbzs5/ This is the HTML code: <div class="column"> <div class="top"> ...

javascriptjqueryhtmlcss

Angular Material 2: Sidenav does not come with a backdrop

I'm encountering an issue with the SideNav component while developing a website using Angular 2. The SideNav has 3 modes, none of which seem to affect what happens when I open it. I am trying to make the backdrop display after opening. Even though t ...

htmlangulartypescriptangular2-routingangular-material2

Create a clear section within a div element

https://i.sstatic.net/TCp6E.jpg I'm looking to create a design similar to the image above using only 2 divs and an img. I was able to achieve it using 6 divs, but is there a way to make a transparent mapped area of the parent div with CSS or JavaScrip ...

javascriptcss

unique hyperlink to an external style sheet

element, I came across this line in the header of a web page that was generated by a program. Any thoughts on what significance the number and ID serve in this stylesheet link? <link rel="stylesheet" type="text/css" href="css/contact.css?4131768016" ...

htmlcsscaching

Enhancing the Bootstrap carousel slider with offset background content container

Apologies if the title seems a bit unclear. I want to clarify that I am working with the latest version of pure Bootstrap (https://getbootstrap.com/) and nothing more. My goal is to replicate the layout shown in the following image for a client: https:// ...

htmlcsssliderbootstrap-4

Saving information to a hidden div using jStorage

Currently, I am utilizing jStorage for storing data in local storage. When I store the data using console.log() and later retrieve it using $.jStorage.get(), I found that the values are not being assigned to the hidden div. Can someone provide guidance o ...

javascriptjqueryajaxhtml

What is the best way to display a Country's information from the dropdown menu in the Local Weather application?

I have been working on a Local Weather app that includes a dropdown menu where users can click on a location to view information such as City, Country, and temperature. However, I encountered an issue where the information does not appear consistently ever ...

javascriptjqueryhtmlcssdrop-down-menu

Having trouble positioning the Slick Carousel in the middle of the page

Having an issue with centering the Slick Carousel horizontally on my page, can you help? HTML: <!-- logo slider --> <section id="customer-carousel" class="slider responsive container m-5"> <div> <img src=&qu ...

javascriptcssbootstrap-4slick.js

Is there a way to display menu items in a list when hovering over the parent element using CSS?

Is it possible to make the code below run when hovering over (#cssmenu ul > li > ul > li ) with the mouse? #cssmenu ul > li > ul > li > ul { right: 1170px; } ...

css

Can you apply Bootstrap 5 custom color directly to the class attribute?

just like this: <span class="text-primary">some text</span> I'm curious if there's a way to achieve the following: <span class="text-red-300">some text</span> The red-300 color in Bootstrap 5 is a c ...

csssasscss-variablesbootstrap-5

How can we assign dynamic unique IDs to HTML elements within a for..of loop in TypeScript?

Within my array, I am using a for..of TypeScript loop to dynamically add identical HTML elements. Each element needs to have a unique ID. Is it feasible to achieve this directly within the for..of Typescript loop? The code snippet is as follows: for (le ...

htmlreactjstypescript

Having EventListeners set up across a single CSS class returns null when applied to different types of elements simultaneously

I want to create floating labels that resize dynamically when an input is clicked, similar to modern forms. I am using vanilla JS exclusively for this task. Currently, the setup works with the <input> tag. However, it does not work with the <text ...

javascripthtmlcssforms

extracting the identifiers and class names from an HTML document

I have successfully extracted tags from an HTML file using getElementByTagName. However, I am also interested in parsing the IDs and class names within the same HTML file. This is my current approach: $html = new DOMDocument(); $html->loadHTML ...

phphtmlcakephpdom