Creating a responsive Bootstrap panel that adjusts its height and width based on the content being dynamically generated

https://i.sstatic.net/vvpD9.png

My project has an address list rendered from the backend. I now need to ensure that all panels have the same height and width, making them responsive.

The following is my HTML code:

The data in each panel corresponds to what is stored in my database, serving as test data.

<div class="col-sm-4 col-xs-12 addressBox-shipping" style="margin-bottom: 10px; margin-top: 10px; display: block;">
   <div class="panel fixed-box" style="border:1px solid #ddd;margin-bottom: 3px;">
       <div class="panel-body fixed-body">
          <address style="margin: -10px 0 1px 0;min-height: inherit;">
             <div class="row ">
                <div class="col-md-12 ">
                  <strong style="word-break: break-all">Winnipeg</strong>
                    <br>
                    <span class="truncate_to_ellipsis" title="198 Commerce Drive">
                        198 Commerce Drive,
                    </span>
                <br>
                     Winnipeg, Manitoba, R3P0Z6
                <br>
                Canada
                <br>
            </div>
          </div>
        </address>
      </div>
   <div class="panel-footer">
        <div class="row" style="margin-bottom: 5px">
            <div class="col-md-12 col-xs-12 col-sm-12">
                <button class="form-control btn btn-default btn-sm pull-left" style="text-transform: capitalize;width: inherit;">
                     <span class="fa fa-square"></span>
                                Ship To Address
                </button>
                        
             </div>
         </div>
        <div class="row">
            <div class="col-md-6 col-xs-6 col-sm-6">
             <button class="btn btn-default btn-sm pull-left addressDiv" style="text-transform: capitalize;" id="address721">
               <span class="fa fa-edit"></span>&nbsp;
                        Edit
              </button>
             </div>
            <div class="col-md-6 col-xs-6 col-sm-6">
               <button class="btn btn-default btn-sm pull-left" style="text-transform: capitalize;">
                <span class="fa fa-trash"></span>&nbsp;
                  Delete
                </button>
              </div>
           </div>
        </div>
     </div>
</div>
cssbootstrap-4

Answer №1

It seems like you're still using the outdated Bootstrap 3 framework!
During that era, the grid system was built with the float property, which unfortunately cannot achieve your desired layout without the use of JavaScript.

To work around this limitation, one solution is to assign a custom class to the row element and apply flexbox properties for customization.

.custom-row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

.custom-row>[class^='col'] {
  float: none;
  height: inherit;
}

.panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.panel-footer {
  margin-top: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="row custom-row">
  <div class="col-sm-4 col-xs-12 addressBox-shipping" style="margin-bottom: 10px; margin-top: 10px; display: block;">
    <div class="panel fixed-box" style="border:1px solid #ddd;margin-bottom: 3px;">
      <div class="panel-body fixed-body">
        <address style="margin: -10px 0 1px 0;min-height: inherit;">
          <div class="row ">
            <div class="col-md-12 ">
              <strong style="word-break: break-all">Winnipeg</strong>
              <br>
              <span class="truncate_to_ellipsis" title="198 Commerce Drive">198 Commerce Drive,</span>
              <br>
              Winnipeg, Manitoba, R3P0Z6<br>Winnipeg, Manitoba, R3P0Z6<br><br>Winnipeg, Manitoba, R3P0Z6
              <br>
              Canada
              <br>
            </div>
          </div>
        </address>
      </div>
      <div class="panel-footer">
        <div class="row" style="margin-bottom: 5px">
          <div class="col-md-12 col-xs-12 col-sm-12">
            <button class="form-control btn btn-default btn-sm pull-left" style="text-transform: capitalize;width: inherit;"><span class="fa fa-square"></span>Ship To Address</button>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6 col-xs-6 col-sm-6">
            <button class="btn btn-default btn-sm pull-left addressDiv" style="text-transform: capitalize;" id="address721"><span class="fa fa-edit"></span>&nbsp;Edit</button>
          </div>
          <div class="col-md-6 col-xs-6 col-sm-6">
            <button class="btn btn-default btn-sm pull-left" style="text-transform: capitalize;"><span class="fa fa-trash"></span>&nbsp;Delete</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  [Repeat similar code snippets as needed]
</div>

Answer №2

Bootstrap 4 no longer uses the *-xs-* classes, so replace col-xs-12 with col-12.

To create columns like 

col-sm-4 col-xs-12 addressBox-shipping
, apply 
display: flex; flex-direction: column;
.

.col-sm-4 {
  display: flex;
  flex-direction: column;
}



.col-4 {
  display: flex;
  flex-direction: column;
}


/* This part is optional */

.col-4 div {
  height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row ">
    <div class="col-4 mb-3">
      <div class="bg-primary py-5">
        Hello
      </div>
    </div>
    <div class="col-4 mb-3">
      <div class="bg-primary py-5">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      </div>
    </div>

    <div class="col-4 mb-3">
      <div class="bg-primary py-5">
        Possimus sit consequuntur in dicta quia delectus quo atque quidem iste provident voluptatibus officia, alias, quos enim, assumenda beatae. Provident, corporis dignissimos!
      </div>
    </div>

    <div class="col-4 mb-3">
      <div class="bg-primary py-5">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus fugit perferendis veritatis, maiores, iusto in culpa aperiam explicabo consectetur vero, reici...
      </div>
    </div>

    <div class="col-4 mb-3">
      <div class="bg-primary py-5">

      </div>
    </div>

    <div class="col-4 mb-3">
      <div class="bg-primary py-5">>

      </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

Place each label and input element on a separate line without using div tags

Can we separate form elements onto individual lines without enclosing them within divs? For example: <label for="one">One:</label> <input type="text" id="one"> <label for="two">Two:</label> <select id="two"> ...

htmlcssforms

Avoiding overlapping of div elements in a stacked div layout

I have a challenge with creating a vertical layout of stacked divs. Everything was going smoothly until I encountered the #resume div, which stubbornly stays hidden beneath the table-containing div above it. Despite trying various adjustments to float and ...

htmlcss

"Bootstrap 4 does not allow labels to be displayed inline with the input field

I'm currently working with Bootstrap 4 and Vue.js to populate an input form, but I'm struggling to get the label to appear inline and before the input type file. <div v-for="problem in problems"> <div class="row"& ...

htmlcssvue.jsbootstrap-4label

Seamless movements to the exact midpoint

I am trying to find a method to create a smooth transition when removing the center class from p.title.class, allowing it to smoothly move to its new position. JSfiddle Here is an excerpt of my HTML: <body> <div class="wrapper-top"> ...

jqueryhtmlcss

The text sizing for the input group's prepend is displaying incorrectly

Having trouble adding a prepend text to a large-sized form field. The prepend box and text remain at the default size even after setting the input group to large. <Form className="forms mx-auto" onSubmit={handleSubmit}> <InputGroup c ...

reactjstwitter-bootstrapbootstrap-4react-bootstrap

Real estate for a targeted audience

1. Overview I have a list of selectors that should always apply certain properties. Some selectors require additional properties to be added. I'm struggling to find a way to achieve this without repeating code. 2. Minimal CSS Example (MCVE) 2.1 ...

cssstylus

What is the method for generating an oval shape with a border-radius in CSS?

Is there a way to create an oval shape instead of a rectangle with rounded edges using CSS? Below is the code snippet I have been working with: div { position: fixed; border-radius: 25px; background: rgba(0,0,0,.5) width: 100px; height: 50px; ...

css

The font size on my website fluctuates up and down every time I refresh the page or navigate to a different one

I am currently in the process of updating my research lab's website using a Jekyll framework with Bootstrap. However, I have encountered an issue where the font size grows slightly whenever I navigate to a new page or refresh the current one, before r ...

htmlcsstwitter-bootstrapjekyll

Selectors within 'not' in document.querySelectorAll are failing to function as expected

I've been attempting to find a way to replace the jQuery .not() function with native JavaScript, but so far my attempts using document.querySelectorAll have not been successful. Here is what I am trying to achieve - converting this jQuery selector in ...

javascripthtmlcsscss-selectors

Angular JS Sliding Navigation Bar

Embarking on my initial endeavor with AngularJS, I am eager to implement a tree structure within a flyout menu. After stumbling upon this dropdown menu demonstration at , I am inspired to modify it into a sleek Flyout menu. In the referenced example, chil ...

javascriptcssangularjs

Increasing the size of a div container based on the position of the cursor on the

I recently stumbled upon a fantastic website where two images slide left and right based on mouse movement. When the cursor is on the right, the right part of the image expands, and when it's on the left, the left part expands. You can check out the ...

javascriptjqueryhtmlcss

Do you need a list that doesn't have any indentation?

Hey there! I stumbled upon this code snippet and I'm trying to figure out how to remove the indent for version 2.1. The existing code works perfectly, but I really want to get rid of those indents. Any help would be awesome, thanks! Here is the code: ...

htmlcssindentation

Tips for creating responsive divs inside a parent div

Even though I have read numerous similar questions on the topic, I am still struggling to understand how to position divs or other elements based on different media. Here's my issue: I have a div containing 4 social bar pictures that I want to make r ...

htmlcssresponsive-design

Attach a tab-icon to a picture

I am looking to add a tab to the bottom border of an image within a gallery. This tab needs to be right up against the image border with no space in between. When clicked, this tab should activate a small JavaScript function that will display the content ...

javascripthtmlcsstabsimage

Nested Modals Result in Body Scrolling

https://jsfiddle.net/e6x4hq9h/ When opening the first modal, it works correctly and removes the background scrollbar. However, when trying to open a modal from within that modal, it causes the scroll to jump to the background. I have researched various ...

jquerycsstwitter-bootstraptwitter-bootstrap-3

Having trouble loading @font-face fonts

I am experiencing an issue where my downloaded fonts are not showing up in Chrome. I am utilizing scss which gets compiled to css using gulp. If I directly visit http://project-name.localhost/data/fnt/Shermlock.ttf I can successfully download the font. ...

cssapachefontssassdirectory-structure

Overriding Divs with Navigation

In my WordPress blog, the top menu consists of 3 divs: one for navigation, one for social icons, and one for the search bar. Unfortunately, the navigation div is currently overriding the other two divs, causing them to lose their functionality. When I ad ...

htmlcsswordpress

Customizing the color of pagination in Bootstrap

Here is the pagination control I am working on: https://i.sstatic.net/iVufm.png I have been trying to change the color of the pagination labels to purple, but my CSS overrides are not working. Here is what I currently have in my stylesheet: /* Paginatio ...

csstwitter-bootstrappagination

Instructions for applying a border style to a dynamically generated table using jQuery

I'm currently working on adding CSS to a table that is generated dynamically when a button is clicked. The function that is triggered on the click event includes the following jQuery code to create the dynamic rows: $("#employeDetail").append('& ...

javascriptjqueryhtmlcss

The website lacks accessibility features such as a text size swapper, but the contrast swapper is not functioning properly

As I embark on my first website project that requires accessibility controls, I find myself in need of the ability to adjust text size and contrast settings. Specifically, I want to offer options for small, default, and large text sizes as well as normal, ...

jquerycssaccessibility