Inconsistencies in Bootstrap hover sizes

I am encountering an issue with the hover size in my 'content' class. The hover sizes are different due to discrepancies in paragraph line spacing across cards. Is there a solution to ensure all hovers appear equal in size on each card? For reference, please find the provided code below. Thank you.

.card .content {
        width: 100%;
        background: #fff;
        opacity: 0.65;
        position: absolute;
        bottom: -60%;
        margin-left: -4px;
        transition: all ease 0.5s;
        border-radius: 4px;
        box-shadow: 0px -3px 4px rgba(10, 10, 10, 0.09)
        
    }

    .card .content .category {
        font-size: 17px;
        font-weight: 600
    }

    .card .content .price {
        font-size: 17px;
        font-weight: 500;
        color: #0d6efd
    }

    .card .content p {
        font-weight: 500;
        font-size: 12px;
        text-align: center;
    }

    .card:hover .content {
        bottom: 0%
    }

    .buttons button {
        border-radius: 1px;
        margin-bottom: 10px;
        transition: all ease 0.3s
    }

    .content {
        padding: 10px
    }

    hr {
        border: 0;
        height: 1px;
        width: 60%;
        position: relative;
        margin: 15px auto;
    }

    .d-flex {
        font-weight: 500;
        font-size: 12px;
        margin: 15px auto;
    }

    .fa-play-circle {
        padding-right: 4px;
        padding-top: 3px;
    }

<body>
<div id="image">
    <div class="row">
        <div class="image-column col-lg-3 col-md-6">
            <div class="card h-100 p-1 card-container">
                <div class="card-header">
                    <h3>GABEL LOFFEL</h3>
                </div>
                <div class="card-img-wrapper ">
                    <img src="assets\image_1.jpg" alt="">
                    <div class="content">
                        <hr>
                        <p>Get out your <br> Lederhosen!</p>
                        <hr>
                        <div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
                    </div>
                </div>
                
            </div>
        </div>

        <div class="image-column col-lg-3 col-md-6">
            <div class="card h-100 p-1 card-container">
                <div class="card-header">
                    <h3>GARY GARI</h3>
                </div>
                <div class="card-img-wrapper ">
                    <img src="assets\image_2.jpg" alt="">
                    <div class="content">
                        <hr>
                        <p>The delicious <br> headquarters for all <br> your ginger related <br> needs!</p>
                        <hr>
                        <div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="image-column col-lg-3 col-md-6">
            <div class="card h-100 p-1 card-container">
                <div class="card-header">
                    <h3>IL PIATTO</h3>
                </div>
                <div class="card-img-wrapper ">
                    <img src="assets\image_3.jpg" alt="">
                    <div class="content">
                        <hr>
                        <p>Got wild finicky kids? <br> Head for Il Piatto for <br> kid-friendly Italian <br> Fun!</p>
                        <hr>
                        <div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="image-column col-lg-3 col-md-6">
            <div class="card h-100 p-1 card-container">
                <div class="card-header">
                    <h3>PIERRE PLATTERS</h3>
                </div>
                <div class="card-img-wrapper ">
                    <img src="assets\image_4.jpg" alt="">
                    <div class="content">
                        <hr>
                        <p>Smart talks, Smart <br> eats!</p>
                        <hr>
                        <div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0b2bfbfa4a3a4a2b1a090e5fee0fee2">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
htmlcssbootstrap-4

Answer №1

wrap your <p></P> content within a div element with a custom class named para, along with Bootstrap flex classes to center and justify the content.

Add styling for .content

height: 280px !important;

Also, apply styles to .content .para

.content .para{ height: 100px !important; }

.card .content {
  width: 100%;
  background: #fff;
  opacity: 0.65;
  position: absolute;
  bottom: -60%;
  margin-left: -4px;
  transition: all ease 0.5s;
  border-radius: 4px;
  box-shadow: 0px -3px 4px rgba(10, 10, 10, 0.09)
}

.card .content .category {
  font-size: 17px;
  font-weight: 600
}

.card .content .price {
  font-size: 17px;
  font-weight: 500;
  color: #0d6efd
}

.card .content p {
  font-weight: 500;
  font-size: 12px;
  text-align: center;
}

.card:hover .content {
  bottom: 0%
}

.buttons button {
  border-radius: 1px;
  margin-bottom: 10px;
  transition: all ease 0.3s
}

.content {
  height: 280px !important;
  padding: 10px;
}

.content .para {
  height: 100px !important;
}

hr {
  border: 0;
  height: 1px;
  width: 60%;
  position: relative;
  margin: 15px auto;
}

.d-flex {
  font-weight: 500;
  font-size: 12px;
  margin: 15px auto;
}

.fa-play-circle {
  padding-right: 4px;
  padding-top: 3px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="77151818030403051607374259475945">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div id="image">
  <div class="row">
    <div class="image-column col-lg-3 col-md-6">
      <div class="card h-100 p-1 card-container">
        <div class="card-header">
          <h3>GABEL LOFFEL</h3>
        </div>
        <div class="card-img-wrapper ">
          <img src="images/2.jpg" class="img-fluid" alt="">
          <div class="content">
            <hr>
            <div class="para d-flex justify-content-center align-items-center">
              <p>Get out your <br> Lederhosen!</p>
            </div>
            <hr>
            <div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
          </div>
        </div>

      </div>
    </div>

    <div class="image-column col-lg-3 col-md-6">
      <div class="card h-100 p-1 card-container">
        <div class="card-header">
          <h3>GARY GARI</h3>
        </div>
        <div class="card-img-wrapper ">
          <img src="images/3.jpg" class="img-fluid" alt="">
          <div class="content">
            <hr>
            <div class="para d-flex justify-content-center align-items-center">
              <p>The delicious <br> headquarters for all <br> your ginger related <br> needs!</p>
            </div>
            <hr>
            <div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
          </div>
        </div>

      </div>
    </div>
    <div class="image-column col-lg-3 col-md-6">
      <div class="card h-100 p-1 card-container">
        <div class="card-header">
          <h3>IL PIATTO</h3>
        </div>
        <div class="card-img-wrapper ">
          <img src="images/4.jpg" class="img-fluid" alt="">
          <div class="content">
            <hr>
            <div class="para d-flex justify-content-center align-items-center">
              <p>Got wild finicky kids? <br> Head for Il Piatto for <br> kid-friendly Italian <br> Fun!
              </p>
            </div>
            <hr>
            <div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
          </div>
        </div>

      </div>
    </div>
    <div class="image-column col-lg-3 col-md-6">
      <div class="card h-100 p-1 card-container">
        <div class="card-header">
          <h3>PIERRE PLATTERS</h3>
        </div>
        <div class="card-img-wrapper ">
          <img src="images/2.jpg" class="img-fluid" alt="">
          <div class="content">
            <hr>
            <div class="para d-flex justify-content-center align-items-center">
              <p>Smart talks, Smart <br> eats!</p>
            </div>
            <hr>
            <div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
          </div>
        </div>

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11727e637451233f283f23">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2825253e393e382b3a0a7f647a647b">[email protected]</a>/dist/js/bootstrap.min.js"></script>

Test this code in a browser to visualize it yourself

Answer №2

Place your <p></P> within the content class inside a div, add a custom class para and apply bootstrap flex classes for justification and center alignment.

Apply styles to .content:

height: 280px !important;

Also, style .content .para:

.content .para{ height: 100px !important; }

In the card section, use the img-fluid class for the img tag.

.card .content {
  width: 100%;
  background: #fff;
  opacity: 0.65;
  position: absolute;
  bottom: -60%;
  margin-left: -4px;
  transition: all ease 0.5s;
  border-radius: 4px;
  box-shadow: 0px -3px 4px rgba(10, 10, 10, 0.09)
}

.card .content .category {
  font-size: 17px;
  font-weight: 600
}

.card .content .price {
  font-size: 17px;
  font-weight: 500;
  color: #0d6efd
}

.card .content p {
  font-weight: 500;
  font-size: 12px;
  text-align: center;
}

.card:hover .content {
  bottom: 0%
}

.buttons button {
  border-radius: 1px;
  margin-bottom: 10px;
  transition: all ease 0.3s
}

.content {
  height: 280px !important;
  padding: 10px;
}

.content .para {
  height: 100px !important;
}

hr {
  border: 0;
  height: 1px;
  width: 60%;
  position: relative;
  margin: 15px auto;
}

.d-flex {
  font-weight: 500;
  font-size: 12px;
  margin: 15px auto;
}

.fa-play-circle {
  padding-right: 4px;
  padding-top: 3px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a2afafb4b3b4b2a1b080f5eef0eef2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div id="image">
  <div class="row">
    ... (Code truncated for brevity) ...
          </div>
        </div>
      </div>
    </div>
  </div>
</script>

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

Tips for using the arrow keys to navigate the cursor/caret within an input field

I am trying to create a function that allows the cursor/caret to move inside an input field character by character using the arrow keys (ArrowLeft, ArrowRight) on a keydown event. Current Approach: const handleKeyDown = (e: KeyboardEvent<HTMLInputEle ...

javascripthtmlreactjstypescriptdom-events

Ways to show buttons as inline or block elements when a single button is enclosed within a form

Need help figuring out how to make two buttons display as block elements on small screens and inline elements on larger screens, especially when one button is wrapped inside a form? I am struggling with displaying two buttons on my page. One of the button ...

csstwitter-bootstrapresponsive-designbootstrap-4

Unique Title: "Tailored Scrolling Method with Dynamic Flicker

I created a scroll animation function for transitioning to the next div. It works smoothly in Firefox, but I am experiencing flickering issues in Chrome when scrolling multiple times. Here is a fiddle Check out the code snippet below: var mousewheelevt ...

javascriptjqueryhtmlgoogle-chrome

Why am I experiencing varying outcomes between createShadowRoot and attachShadow methods?

Recently, I've encountered an issue related to shadow dom while working on a project. After referring to an older tutorial that uses createshadowroot, I realized that this method is now considered deprecated and should be replaced by attachshadow. Un ...

csswebshadow-dom

Trouble with CSS rendering on Sharepoint in Edge Browser - Dealing with SEC7111 Issue

Recently, I was moved to a Windows 10 VM from Windows 7 and I encountered an issue with displaying a site for my team at work properly in Edge. A WebPart linking to CSS was showing everything as one large list instead of a table with dropdowns. Oddly enoug ...

htmlcsssecuritysharepointmicrosoft-edge

Can you explain the purpose of the state object that is passed to history.pushState? What role does it play in

Can you explain the purpose of the stateObj parameter in the function history.pushState? For instance, when calling the function history.pushState(stateObj, title, url). ...

javascriptajaxdomhtml

Using Python with Selenium, automate the process of clicking on each list item within

Hey there! I recently implemented the code below, and it worked perfectly. However, I'm now trying to figure out how to make it click on all the li items within a ul that have an empty class attribute. Any ideas on how to do this using Xpath? Xpath: ...

htmlpython-2.7python-3.xselenium-webdriveriteration

Tooltip not appearing when user hovers over it

I need help with displaying tooltips only when hovering over anchor tags. Initially, I have hidden the visibility and want to show it on hover. However, the tooltips are not appearing when I hover over them and there are no console errors displayed. Can so ...

htmlcsstooltip

Loading default values into HTML/Jade in an Express/node.js web application

My web application is developed with Express for node.js. I have utilized Jade template files for the HTML views. On one of these views, I want the input fields to be pre-filled with data. The data is stored in a mongodb session store, as well as in anot ...

htmlnode.jsmongodbexpresspug

What is the best way to make twitter-bootstrap navbar subitems collapse/expand on smaller screens?

After experiencing success with the twitter-bootstrap 'hero' example, it has become evident that on small screens, the navbar menu only displays first-level items, with sub-items collapsed. However, tapping on an item with child elements expands ...

csstwitter-bootstrapdrop-down-menunavbarhandhelddevice

Using AngularJS to bind to the 'src' property of an <img> tag

There is a table on my website with numerous rows, and each row contains a preview image that should appear in the top right corner when the mouse hovers over it. I attempted to insert an image tag with AngularJS binding for the URL in the src attribute l ...

javascripthtmlangularjsimagebrowser

Troubleshooting JavaScript issues: jQuery not functioning as expected

Although I consider myself experienced in programming, my venture into jQuery has hit a roadblock with this seemingly simple code: $(document).ready(function() { $('.footer').click(function() { $('.footer').fadeOut('sl ...

javascriptjqueryhtml

"Media queries in CSS don't consistently apply all styles when reaching the minimum

The CSS styles I am using are as follows: @media (min-width: 1280px) { .window-padding { padding-top: 20px; padding-bottom: 20px; padding-left: 30px; padding-right: 30px; } } @media (min-width: 769px) { .windo ...

htmlcssmedia-queries

The script is malfunctioning on Google Chrome

Below is a script that I have: EXAMPLE : <script> var ul = document.getElementById("foo2"); var items = ul.getElementsByTagName("li"); for (var i = 0; i < items.length; i=i+2) { // perform an action on items[i], which repr ...

javascripthtml

What is the best way to access the CSS font-size property using JavaScript?

I've attempted to adjust the font size using this code: document.getElementById("foo").style.fontSize Unfortunately, this code does not return any results. The CSS styles are all defined within the same document and are not in an external stylesheet ...

javascripthtmlcss

Ways to verify the content within two separate p elements

<p> expanded state:</p> <P> true </p> Merging the text from both tags into a single output. Final Output: expanded state: true ...

javahtmlseleniumselenium-webdriver

The grid lines are crisscrossing in an alternating pattern

I've created a grid with four corners using four separate span elements. You can find the Plunker code for this project here. https://i.sstatic.net/HNUeh.png My goal is to have the vertical bars drawn on top of the horizontal bars in the grid. For e ...

htmlcss

Discover the possibilities of setting the dimensions of your anchor tags using only inline-block spans

Can anyone help me understand what is happening with this small piece of HTML code? http://jsbin.com/akome5 When viewed on various browsers such as FF4, Chrome10, IE9, IE8, Opera 11, the layout of the element appears like this: Hmm, why is this happenin ...

layoutanchorhtmlcss

My attempt to reveal hidden information in my repeater using a button and JavaScript has not produced the desired results

Welcome to my first post on this forum. In the HTML code, there is a repeater containing a button shown below: <button type="button" class="btn btn-info">Contact</button> <p style="display: none" id="contact"><%# Eval("Email") %&g ...

javascripthtmlasp.netwebforms

Is it possible for us to view the code contained within a bootstrap class?

The button element has specific classes applied to it with <button class="btn btn-outline-primary">. I am curious about the code within the btn class. ...

htmlcssclassbootstrap-4frontend