The Bootstrap card becomes compressed when conducting a search within the card grid

After inserting a new image into a card, I noticed that the card gets distorted when I perform a search. I'm unsure if this issue is related to Bootstrap's grid or the image size itself. Any suggestions on how to rectify this would be greatly appreciated. I've already tried adjusting the .card-top-img CSS rules and exploring different grid options without success.

JSFiddle for the code

<html lang="en" dir="ltr">
  <head>
  <meta charset="utf-8">
    ...
</html>
$(document).ready(function(){
  $('#search').on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".uvs").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
...

Answer №1

To create space below images, it is recommended to remove the object-fit: contain; CSS property from the img element and add margin-bottom:20px to the img CSS.

img { width: 200px; height: 200px; margin-bottom:20px; }

In addition, for proper display of card columns after searching, include inline CSS in the row element as follows:

<div class="row" style="width: 100%;">
$(document).ready(function(){
  $('#search').on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".uvs").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
// Responsive design CSS media queries

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

.body{
  margin-left:auto;
    margin-right:auto;
    position: static;
    z-index: 999;
}

/* Card styling */
.card{
  width: 40%;
  margin-top: 30px;
  margin-bottom: 50px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.card-columns{
  display: inline-block
}

.card-body {
  display: flex;
  flex-direction: column;
  z-index: 999;
}

.card-deck{
  margin-bottom: 20px;
}

.navbar{
  margin-bottom: 40px;
}

.navbar-custom{
  background-color: #0B4949;
}

.container-fluid-nav{
  background-color: #448383;
  height: 70px;
  padding-top: 15px;
  margin-bottom: 25px;
}

.btn{
  margin-left: 7px;
  margin-top: auto;
}

button.btn {
  margin-top: auto;
}

h2{
  color: white;
}

img {
  width: 200px; /* Set dimensions to desired size */
  height: 200px;
  margin-bottom:20px;
}

.release-date{
  margin-bottom: 25px;
}

.no-results{
  display: none;
}
<html lang="en" dir="ltr">
  <head>
  <meta charset="utf-8">
  <title>"Brick Sets Coming Next"</title>
  <meta charset="utf-8">
  <title>"Brick Sets Coming Next"</title> <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="main.js"></script>
    </head>
<body>

      <div class="container-fluid-nav text-center">
        <h2>All the Pugs</h2>
      </div>


        <div class="container">
            <div class="row">
              <div class="col-12">
                <h3 class="text-center release-date">Pug List</h3>
              </div>
            </div>
        </div>

        <div class="container">
       <input class="form-control" type="search" id="search" placeholder="Search" aria-label="Search">
      </div>

      <!-- Row 1 of June 1st release -->
      <div class="container">
        <div class="card-deck">
          <div class="row" style="width: 100%;">

             <!-- Add your card elements here -->

          </div>
        </div>
</div>

  </body>
</html>

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

Unexplainable space or padding issue detected in OwlCarousel grid gallery

There seems to be an unusual gap or margin at the bottom of each row section in this portfolio grid gallery that's running in OwlCarousel. You can view an example here. https://i.stack.imgur.com/NHOBd.png I've spent a lot of time trying to solv ...

Adjust tool tip text on the fly

As a beginner, I created a test table and now I want to make the tool tip text change dynamically when I hover over the table with my mouse. Ideally, I would like the tool tip text to correspond to the content of the table cell. Currently, I only have stat ...

Interactive Sideways Navigation Bar

showcases a sleek horizontal scrolling menu on mobile devices. I aim to replicate this functionality for a website I'm redesigning that features extensive navigation elements. Key Features: Left and right scroll button options Centered list item op ...

Optimizing Window Width with React.js and CSS

I'm currently in the process of building a responsive website with react. I am utilizing CSS stylesheets for styling and have used @media queries to ensure responsiveness. However, I've encountered an issue while testing in Chrome where the elem ...

Angular is throwing error TS2322 stating that the type 'string' cannot be assigned to the type '"canvas" while working with ng-particles

My goal is to incorporate particles.js into the home screen component of my project. I have successfully installed "npm install ng-particles" and "npm install tsparticles." However, even after serving and restarting the application, I am unable to resolve ...

Issues with Tags Functionality in Rails 5 Bootstrap JavaScript

I encountered some unusual issues while using Bootstrap 4 with the Rails 5 javascript tags. Initially, everything was working smoothly on this project and I hadn't made any modifications to the js files. However, suddenly, my collapsible navbar dropdo ...

Form comments in Bootstrap are causing rows to shift

Currently, I am working on an Angular-powered horizontal form that utilizes various bootstrap components. However, I have encountered an issue with a "Comment field" that is causing the adjacent columns to shift downwards. I initially suspected the problem ...

Unexpected Error: Null value prevents accessing 'getElementsByClassName' property in HTML, along with Troubleshooting Inactive Button Behavior in HTML

Can someone identify the error in my HTML code? I keep getting an "Uncaught TypeError: Cannot read property 'getElementsByClassName' of null" error on the second line of the script tag. Additionally, my implemented active header code is not funct ...

Using JQuery to swap out background images in CSS

I have been working on a slider that is supposed to fade one picture over another. The issue is that the background change seems to only work in the Dreamweaver preview and not in the actual browser. loop = setInterval(function(){ $("#slider").css("ba ...

Tips on ensuring CSS is properly loaded on a Django HTML page

Despite numerous attempts, I cannot get my CSS to render properly on any of the HTML pages within a Django project. I've tried various solutions from Stack Overflow, such as adding the following code snippet: <link rel="stylesheet" href=& ...

What is the best way to prevent card-group from wrapping on smaller screens?

What is the best way to ensure that cards in a card-group stay adjacent to each other on smaller screens? Currently, they are grouped together on larger screens but appear separated on smaller screens. I am currently hiding the additional cards on smaller ...

Adding an image to a div and slowly revealing it:

I'm currently working on creating an image slider. When I click on a thumbnail above, I retrieve the source of that image and append it to the designated div to display as a larger image. While this functionality is working, I'd like to enhance i ...

Utilizing the Command Line/Window feature within Visual Studio Code

As a newcomer to Visual Studio Code, I'm currently using the latest Version: 1.29.1. When I used Matlab, I had access to a script window for writing code, a Command Window for testing code snippets and viewing variable values, as well as a workspace ...

What is the best way to overlay a video onto an image using HTML and CSS?

Currently, I am experimenting with a layering technique in HTML/CSS. The idea is to place an image behind a video to enhance the overall look of the video section. Here is a sample photoshop mockup that demonstrates what I am aiming for: HTML div id= " ...

Does CSS give preference to max width specifications?

Within a div, I have two child div elements. The parent container utilizes a flexbox layout, with preset maximum widths for the children as shown below: <div class="wrap"> <div class="one">Hi</div> <div class="two">my secon ...

How come there is a varying gap between the fixed header and the main content when the height is set to 10%?

I've noticed a peculiar issue when using percentage values for the height of my fixed header and margin-top of the main div. Everything works smoothly when I set the header height to 50px and margin-top of the main area to 50px. However, when I chan ...

The display: flex property is not being properly implemented in Tailwind CSS for the sm:flex

I have a div with the following styles <div class="hidden sm:visible sm:flex"> .... </div> The sm:visible style is applied like this @media (min-width: 640px) .sm\:visible { visibility: visible; } However, the property disp ...

Guide on adding dual horizontal scroll bars to a v-data-table (Vue / vuetify)

Currently, I am working on Vue / Vuetify and experimenting with the v-data-table component. While creating a table, I noticed that it has a horizontal scroll bar at the bottom. https://i.stack.imgur.com/noOzN.png My goal now is to implement two horizontal ...

Is it possible to selectively process assets based on their type using Gulp and Useref?

Is it possible to selectively process css and js assets using gulp-useref based on the build type specified in the html tags? <!-- build:<type>(alternate search path) <path> --> ... HTML Markup, list of script / link tags. <!-- endbui ...

Element floating over, intersecting with the main content of the page

I am facing an issue with my CSS-styled footer that floats at the bottom of the page. When I resize the browser window, the footer overlaps the contents of the page. Although the footer is quite large, it should not overlay the page content. body { pa ...