Changing the description doesn't affect the fixed height of the box - here's how to do it with CSS

Here are the references I used:

GetBootstrap Jumbotron

CoreUI Base Jumbotron

This is how my script looks like:

<template>
  <div class="wrapper">
    <div class="animated fadeIn">
      <b-card>
          <b-row v-for="row in formattedClubs">
              <b-col v-for="club in row" cols>
                  <b-jumbotron header="" lead="">
                      <b-link to="#">
                          <b-img v-on:click="add(club)" thumbnail fluid src="https://picsum.photos/250/250/?image=54" alt="Thumbnail" />
                      </b-link>
                      <b-link href="#" class="card-header-action btn-close">
                          {{club.description}}
                      </b-link>
                      <p>{{club.price}}</p>
                      <p>{{club.country}}</p>
                      <div class="text-center my-3">
                          <b-btn variant="primary">Add</b-btn>
                      </div>
                  </b-jumbotron>
              </b-col>
          </b-row>
      </b-card>
    </div>
  </div>
</template>
<script>
  export default {
      name: 'jumbotrons',
      data () {
          return{
              clubs: [
                  {id:1, description:'chelsea is the best club in the world and chelsea has a great player', price:1000, country:'england'},
                  {id:2, description:'liverpool has salah', price:900, country:'england'},
                  {id:3, description:'mu fans', price:800, country:'england'},
                  {id:4, description:'city has a great coach. Thas is guardiola', price:700, country:'england'},
                  {id:5, description:'arsenal player', price:600, country:'england'},
                  {id:6, description:'tottenham in london', price:500, country:'england'},
                  {id:7, description:'juventus stadium', price:400, country:'italy'},
                  {id:8, description:'madrid sell ronaldo', price:300, country:'spain'},
                  {id:9, description:'barcelona in the spain', price:200, country:'spain'},
                  {id:10, description:'psg buys neymar at a fantastic price', price:100, country:'france'}
              ]
          }
      },
      computed: {
          formattedClubs() {
              return this.clubs.reduce((c, n, i) => {
                  if (i % 5 === 0) c.push([]);
                  c[c.length - 1].push(n);
                  return c;
              }, []);
          }
      }
  }
</script>
<style scoped>
    .jumbotron {
        padding: 0.5rem 0.5rem;
    }
</style>

The resulting view can be seen in this image: https://i.sstatic.net/EtYlN.png

In the image above, each box has a different height due to varying lengths of descriptions. How can I make all the boxes have the same height despite differences in description length?

Answer №1

Consider using Cards instead of Jumbotrons and utilize the card group feature for consistent sizing.

https://getbootstrap.com/docs/4.0/components/card/#card-groups

All cards within a group will have uniform dimensions.

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Vue-Bootstrap also provides support for card groups with equal size, more information can be found here.

Answer №2

If you haven't worked with vue before, you can still manage the styling using flexbox.

.Wrapper {
  display: flex;
  flex-wrap: wrap;
}

.Item {
  background: #f5f5f5;
  display: flex;
  flex: 0 1 180px;
  flex-direction: column;
  text-align: center;
  margin: 10px;
  padding: 5px;
  border: 1px solid #ddd;
}

.ImgWrap {
  position: relative;
  background: #fff;
  flex: 0 1 180px;
  width: 100%;
  display: block;
  overflow: hidden;
}

.ImgWrap img {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.Description {
  flex:1;
  padding: 10px 0;
  font-size: 0.9em;
  word-wrap: break-word;
}

.Price,
.Country {
  background: #eaeaea;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin: 2px 0 10px 0;
  padding: 5px;
  color: #8a8a8a;
}

.Btn {
  background: #20a8d8;
  border: none;
  border-radius: 3px;
  color: #fff;
  padding: 10px;
}
<div class="Wrapper">

  <div class="Item">
    <div class="ImgWrap">
      <img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
    </div>
    <div class="Description">
      <p>This is some descriptive text.</p>
    </div>
    <p class="Price">800</p>
    <p class="Country">England</p>
    <input class="Btn" type="submit" value="Add">
  </div>

  <div class="Item">
    <div class="ImgWrap">
      <img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
    </div>
    <div class="Description">
      <p> dapibus congue odio placerat quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis, ante ac vulputate malesuada, nunc ex lobortis.</p>
    </div>
    <p class="Price">800</p>
    <p class="Country">England</p>
    <input class="Btn" type="submit" value="Add">
  </div>

  <div class="Item">
    <div class="ImgWrap">
      <img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
    </div>
    <div class="Description">
      <p>Nam accumsan aliquet congue. Quisque orci tortor, ullamcorper a auctor sit amet, luctus non ante. Proin rutrum purus quis tellus pulvinar, at tincidunt odio sagittis. Nam aliquet risus sit amet suscipit dictum. Sed sed porta urna. </p>
    </div>
    <p class="Price">1000</p>
    <p class="Country">England</p>
    <input class="Btn" type="submit" value="Add">
  </div>

  <div class="Item">
    <div class="ImgWrap">
      <img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
    </div>
    <div class="Description">
      <p>Nam accumsan aliquet congue. Quisque orci tortor.</p>
    </div>
    <p class="Price">700</p>
    <p class="Country">England</p>
    <input class="Btn" type="submit" value="Add">
  </div>

  <div class="Item">
    <div class="ImgWrap">
      <img src="https://picsum.photos/250/250/?image=54" alt="Thumbnail">
    </div>
    <div class="Description">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non pellentesque elit, sit amet placerat nisl. Quisque hendrerit risus nisl, vel dignissim est congue in.</p>
    </div>
    <p class="Price">600</p>
    <p class="Country">England</p>
    <input class="Btn" type="submit" value="Add">
  </div>

</div>

Answer №3

To achieve a full height Jumbotron, simply add the class h-100...


      <b-col v-for="club in row" cols>
          <b-jumbotron header="" lead="" class="h-100">
              <b-link to="#">
                  <b-img v-on:click="add(club)" thumbnail fluid src="https://picsum.photos/250/250/?image=54" alt="Thumbnail" />
              </b-link>
              <b-link href="#" class="card-header-action btn-close">
                  {{club.description}}
              </b-link>
              <p>{{club.price}}</p>
              <p>{{club.country}}</p>
              <div class="text-center my-3">
                  <b-btn variant="primary">Add</b-btn>
              </div>
          </b-jumbotron>
      </b-col>

In this case, using the cols inside the row will ensure consistent heights due to Bootstrap 4's flexbox functionality.

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

Disappearance of the second level in a CSS dropdown menu

I am currently working on creating a dropdown menu using only CSS. Check out this example I'm using: http://jsfiddle.net/DEK8q/8/ My next step is to center the menu, so I added position-relative like this: #nav-container { position: rela ...

optimal method for displaying HTML strings with components in Vue

My website is a Blog/News site featuring posts that contain HTML content stored in the database. In addition to posts, I also want to include elements like sliders which cannot be generated using v-html. I explored Vue's Render Functions to find a so ...

Achieve video lazy loading in JavaScript or jQuery without relying on any external plugins

I've been experimenting with lazy loading videos using jQuery. While I've had success with lazy loading images and background-images using the same technique, I ran into issues when trying to apply it to videos. Here's what I've tried s ...

Having trouble implementing custom fonts in React App for all browsers

While working on my project, I included custom .woff fonts using @font-face and stored them in my src folder. Surprisingly, the fonts displayed correctly when running the app locally. However, upon deploying the app to the live domain, Chrome and Firefox ...

Design and styling with HTML5 and CSS

Having a small issue with my code as I venture back into coding after a long hiatus, resulting in me forgetting some basics. Currently, I am attempting to create a simple HTML layout. Upon inspecting the page, I noticed that it appears slightly longer tha ...

Introducing space between div elements changes the arrangement of columns

I am facing an issue with my layout consisting of 6 div tags divided into 2 rows of fixed height. Whenever I try to add a margin around the divs, the rightmost div gets pushed down to the next row. How can I solve this problem? HTML: <div class="contai ...

Customize the appearance of HTML5 input types when validation is unsuccessful

Hey everyone I have a question: Is there a CSS trick to style the red border (or shadow) of input fields that have not been validated, such as email inputs? If my explanation isn't clear enough, I'm referring to changing the color of this eleme ...

Hover Effect for Bootstrap Gallery

I've created a hover effect for my gallery that is embedded in a Bootstrap Grid. Although the hover effect itself works fine, on some screen sizes, the overlay ends up covering the gallery images. Does anyone have any ideas, solutions, or hints to so ...

Delving into the World of CSS

I have been working on changing the background image using this JavaScript code, but I am not sure what to reference in the CSS file. Despite reading through everything, my screen still remains blank. $(function() { var body = $('body'); var bac ...

Tips for wrapping text within a span element that is positioned absolutely

Need a long string for the bullet text as shown in the code, they can't be separate words. Having trouble with overflow auto, it's cutting off the bullet text. The bullet text must remain in absolute position. How can I make the text wrap to t ...

Updating Vue state when the browser's back button is clicked

I'm currently working on a login page that features various provider options. When a user clicks on a provider, they are directed to the sign-in page of that specific provider. Within this login component, there is a boolean variable called "pageRedir ...

The issue of a background image not appearing on Chrome and Firefox has been identified

I am experiencing an issue where a background image is not showing up on Chrome or Firefox, but it displays properly on other browsers. The problem occurs with relative and hard links Substituting the image file works, but the video disappears Adblock is ...

Tips for causing a single span tag within a group of multiple tags to overflow its parent element

Is there a way to make the highlight span sit just after the to without affecting the width of the parent, and without using absolute positioning? I would like the span to be aligned with the example "to" and overflow outside of the parent container. Thank ...

Exploring the Application of CSS Styles in Selenium

I need help with a webpage that contains a configurable field. The values of this field can be set through a configuration panel, and it can be marked as required by checking a checkbox which applies a specific style to the field label. My question is, how ...

What is the best way to toggle dropdown menu items using jQuery?

Upon clicking on an li, the dropdown menu associated with it slides down. If another adjacent li is clicked, its drop down menu will slide down while the previous one slides back up. However, if I click on the same li to open and close it, the drop down m ...

Having trouble with my JSFiddle code not functioning properly in a standard web browser for a Google Authenticator

Here is the code snippet that I am having trouble with: http://jsfiddle.net/sk1hg4h3/1/. It works fine in jsfiddle, but not in a normal browser. I have included the necessary elements in the head to call all the external files. <head> <scri ...

How can you eliminate a line from the HTML input mask in Gravity Forms?

With Gravity Forms, I am utilizing the "input masks" feature to prompt users to enter data in a specific format. However, it seems to be creating an unwanted line within the input field itself as shown in the image below: https://i.stack.imgur.com/8gQ3K.j ...

How can I clear all jQuery toggled classes that have been added across the entire webpage in an Angular project?

Upon clicking a link within an element, the following CSS is applied: <a class="vehicleinfo avai-vehicle-info-anc-tag" ng-click="vehicleInfo($event)">Vehicle Info <span class="s-icon red-down-arrow"> </span> </a> $scope.vehic ...

Brand new Laravel 9 setup featuring a vue 3 scaffold, but encountering issues with vite not displaying components

After setting up a fresh Laravel 9.19 installation with Vue scaffolding and vite.js, everything seemed to be working well, except for one issue - the Vue example component that comes with the default Laravel install wasn't rendering in the browser. M ...

Using Laravel to connect custom fonts

After previously discussing and experimenting with linking custom font files in Laravel, I encountered an issue where the fonts were not displaying correctly on my website. Due to Laravel's router, directly linking to font files in CSS was posing a ch ...