What steps should I take to properly align these product cards in a grid layout?

I have a grid of items where the first three are perfectly aligned, but the subsequent ones are scattered throughout the webpage. Please see here for an example. I would like to align all cards in the grid similar to the first three. Any help with this would be greatly appreciated. Below is the code snippet:

<div class="row">

  <div class="col-md-4 mb-5">
    <h2>Ултразвучни системи:</h2>
  </div>
</div>
<!-- /.row -->

<div class="row ">
  <div class="col-md-4 mb-5 d-flex align-items-stretch">
    <div class="card h-100">
      <img class="card-img-top" src="img\herai10.jpg"alt="">
      <div class="card-body">
        <h4 class="card-title">HERA I10</h4>
        <p class="card-text">Акушерство, Гинекологија.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Спецификации</a>
      </div>
    </div>
  </div>
...
      (Remaining card elements...)
...

</div>

</div><!-- /.row -->

htmlcss

Answer №1

There seems to be an unnecessary extra closing </div> tag that is causing the alignment to break.

    <div class="row">
  <div class="col-md-4 mb-5">
    <h2>Ultrasound Systems:</h2>
  </div>
</div>
<!-- /.row -->

<div class="row ">
  <div class="col-md-4 mb-5 d-flex align-items-stretch">
    <div class="card h-100">
      <img class="card-img-top" src="img\herai10.jpg" alt="" />
      <div class="card-body">
        <h4 class="card-title">HERA I10</h4>
        <p class="card-text">Obstetrics, Gynecology.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Specifications</a>
      </div>
    </div>
  </div>>
  ...

  ...
  
  <div class="col-md-4 mb-5 d-flex align-items-stretch">
    <div class="card h-100">
      <img class="card-img-top" src="img\sonoacer7.jpg" alt="" />
      <div class="card-body">
        <h4 class="card-title">Sonoace R7</h4>
        <p class="card-text">Obstetrics, Gynecology.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-primary">Specifications</a>
      </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

Issue with jQuery's .height() method not updating

Here is the code I am working with: $(function() { $('#team-ch').click(function() { $('#team-camb-hert').height('auto'); }); }); I am trying to change the height of a div when a link is clicked. After adding an alert ...

javascriptjqueryhtmlcss

Recording Node pathways that begin with the hash symbol #

How can I configure my Node/Express routing to intercept a route like /#/about and send it to /about Is there a way for node to handle routes that start with "/#"? It appears to only cut off at the hash mark. ...

htmlexpresshashroutes

Creating a hover effect for a specific card while maintaining the rest of the cards unaffected

When hovering over a card, all icons are displayed instead of just the icons for that specific card. I want to show only the icons for the card being hovered on (example output: image). The cards are generated automatically using v-for and fetching data fr ...

javascripthtmlcssvue.jssass

Tips for refreshing jQuery to ensure it functions smoothly for subsequent tasks

I am facing an issue with running a second process under JQuery, as shown in the code snippet below: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <script type=" ...

javascriptjqueryhtmlajax

Mysterious line appearing beneath alternate rows in Table with border-collapse and border-spacing applied. Unable to pinpoint the culprit property causing the issue

After searching for a solution to add space between the rows in my table, I finally found the answer on Stack Overflow. The implementation seemed to work fine at first glance, but upon closer inspection, I noticed an issue depicted in the screenshot below: ...

javascriptcssreactjsmaterial-ui

Difficulty arises when trying to extract specific information from an ajax response using the jQuery.filter

The code snippet below seems to be causing some trouble. It's supposed to filter HTML content that includes a div with the class "filtered_entries_box", but it's not working as expected. $.ajax({ "url" : "start.php", "type" : "POST", ...

javascriptjqueryhtmlajax

How can I resize an image to fit at the bottom of the screen, similar to a footer?

Currently, the image is not spanning the entire width of the screen I've looked into various solutions for similar issues, but they always end up aligning the image to the right or left and increasing its size. If anyone has any suggestions, I would ...

htmlcss

What are some creative ways to customize and animate the cursor or caret within an input field?

Just to clarify, I am working with React and Material-UI. I have a task at hand where I need to modify the appearance of the caret within an input element by adding an animation to it. I have managed to change its color using caret-color and set a default ...

javascripthtmlcsssassmaterial-ui

Adding and Removing Attributes from Elements in AngularJS: A Step-by-Step Guide

<input name="name" type="text" ng-model="numbers" mandatory> Is there a way to dynamically remove and add the "mandatory" class in Angular JS? Please note that "mandatory" is a custom class that I have implemented. Thank you. ...

javascripthtmlangularjs

Duplicate the PHP code for every section found within an INI file

<? $config = parse_ini_file('/list.ini', true); ?> <?echo'<select id="LBox" name="listbox" size="20" style="display:none;">'; foreach($config[MPR] as $id=>$label){ switch ($id) { case ($id== ...

phphtml

Discover the steps to modify the input field type with just a keypress in angularjs

I need help changing an input field type from text to password. Currently, I am able to change the input field type from text to password when clicking on it. However, I also want the type to change from text to password when tab is pressed. Any assistan ...

cssangularjs

Choose a particular element within an element class using a variable as the selector in jQuery

Is there a way to dynamically add a class to a specific element in an array based on a variable in a for loop, rather than random selection? I need to target elements with the variable provided and possibly apply the class to more than one element if neces ...

javascriptjquerynode.jshtmlfor-loop

Problem with jQuery's .prepend method being called twice on list items

Looking to enhance the appearance of a list by adding some icons before the anchor links within each list item. <ul class="submenu-children"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> ...

javascriptjqueryhtmlappend

What could be the culprit behind the error in the "blend-mode" function when using .mp4 files in Firefox?

Attempting to utilize mix-blend-mode with an mp4 playing in the background has been a fun experiment. The concept is to have a div containing some text, with the video playing in the background to create an effect on the letters. This method works flawless ...

javascriptcssreactjsfirefoxmix-blend-mode

What's the best way to customize the appearance of an OPTION field using inline text styling

I am attempting to customize the appearance of SELECT / OPTION boxes using INLINE CSS. Unfortunately, my use of background-color is not producing the desired effect: <option style='bakground-color:red'>text</option> My goal is to h ...

cssselectinline

What is the best way to set up a side-opening feature in the UI design?

I am having trouble with the Amoclan shape transitioning to the next side. I need the transition to occur exactly as specified in the documentation, but for some reason it is still moving on to the next side. <html> <head> <script src=" ...

jquerycsssemantic-ui

Having trouble with the JavaScript DOM rewrite for aligning text?

function modifyTextAlignment(){ document.getElementById("th1").style.textAlign = "right"; } #th1{ text-align:left; } <table> <tr><center><th colspan="2" id="th1">List of Important Emergency Contacts</th><center></tr& ...

javascriptjqueryhtmlcss

Extracting specific text from HTML tags using Python's BeautifulSoup

I'm trying to extract specific tags from two different sections of text using the BeautifulSoup library in Python. Here's what I've attempted so far: g = soup.find_all("dtposted") for tag in g: print(tag) <dtposted>2020<trnamt& ...

pythonhtmlbeautifulsoup

Having trouble getting the sass lighten functions to work properly with a variable

Currently incorporating SASS into my project, Below is the snippet of my variable code :root, [data-theme="default"] { --text-color: #383143; } $text-color: var(--text-color); Utilizing the variable with a lighten function as shown below, body { ...

csssass

What is the best way to create a sticky div that reacts to a floating (position: fixed) div?

I have been utilizing Material UI's <Appbar /> component, which is rendered as a div with position: fixed;. The effect of the bar hiding on scroll employs visibility: hidden; and transform: translateY(-59px);. Now, my goal is to include a stick ...

javascriptcssreactjsmaterial-uigatsby