Obtain the final card within a column of cards using Bootstrap 4

I am currently using Bootstrap 4 to create a masonry card deck that consists of 3 columns with 3 cards each. I am wondering if there is a way to target the last card in each column individually.

I know how to target the very last card across all columns:

.card-columns div.card:last-of-type

But, is it possible to target the last card within each column?

Here is the code for the card deck:

<div class="card-columns">
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="card-block card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top img-fluid" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <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 card-inverse card-primary p-3 text-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <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 img-fluid" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with support text below showing equal height actions compared to the first card's content length.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

csstwitter-bootstrapbootstrap-4masonry

Answer №1

A unique solution to the issue is presented here, tailored to the specific HTML layout provided.

.card-columns div.card p:last-child {
  background: #ff0000;
}
<div class="card-columns">
  <div class="card">
    <p>The first paragraph of div 1.</p>
    <p>The second paragraph of div 1.</p>
    <p>The third paragraph of div 1.</p>
    <p>The fourth paragraph of div 1.</p>
  </div>
  <div class="card">
    <p>The first paragraph of div 2.</p>
    <p>The second paragraph of div 2.</p>
    <p>The third paragraph of div 2.</p>
    <p>The fourth paragraph of div 2.</p>
  </div>
</div>

Answer №2

My search has led me to a solution:

.card-columns div.card:nth-child(3n)

This code targets the final card in each column.

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

Ways to resolve the issue: 'Error: Tether (http://github.hubspot.com/tether/) is needed for Bootstrap tooltips'

I'm encountering an issue with Bootstrap V4 where the console displays the following error message; Error: Bootstrap tooltips require Tether () Despite attempting to address this problem by installing Tether, I have been unsuccessful. I included ...

javascripttwitter-bootstrapbootstrap-4tether

Filtering rows of an HTML table that contain links in the `<href>` column data in real time

When using HTML and JavaScript, I have found a solution that works well for many of the columns I am working with. You can see the details on how to dynamically filter rows of an HTML table using JavaScript here. var filters=['hide_broj_pu',&apo ...

javascripthtmlcss

Tabular Bootstrap 4 elements nested within a dropdown menu

I am currently utilizing a bootstrap 4 dropdown menu that includes tabs within it. Below is the codepin for reference: I came across this link that provided a helpful solution to prevent the dropdown menu from closing when clicked inside: Avoid dropdown m ...

javascriptjquerytwitter-bootstrapcssbootstrap-4

Elements overlapping within div elements

Div container and p element are overlapping another Div that contains an image. The image needs to respond to a :hover CSS event but only a small portion of that Div container is able to sense the mouse hovering over it. Any suggestions on how to solve t ...

htmlcss

Why is the CSS not correctly linked to the index.html file?

Currently, I am working on a project involving a "is it newyear page" that should provide a simple yes or no answer. While the functionality of the page is not the issue, I am facing a problem with the link placement. I have included a link inside the < ...

cssdjango

Issue with Vanilla JS form validation in Bootstrap 4

I successfully created a script to validate my Bootstrap 4 form, but I'm facing an issue where the error message is replacing the input field. Should I pursue validating BS4 with Vanilla JS or stick to using Bootstrap validation? What's the indus ...

javascripttwitter-bootstrapbootstrap-4

Addressing see-through box styling in CSS

When working on a website using HTML and CSS, I encountered an issue with a transparent box. All elements within this box are also transparent, but I want them to be solid without any opacity. How can I resolve this? .parent { display: inline-block; ...

htmlcssdjangoopacity

Toggle the anchor tag to be active or inactive, akin to the functionality of the Twitter Bootstrap .disabled class

On my webpage, I have implemented an HTML editor widget that allows users to edit the content of the page. There is also an anchor tag for editing purposes. My goal is to dynamically enable or disable this anchor tag based on the user's mode of operat ...

jquerytwitter-bootstrapanchor

The issue with ng-repeat causing incorrect image width in Flexslider

My webpage features image scrolling functionality, powered by Flexslider. The images on the page are sorted by date - for example, selecting "last 7 days" will display images from the past week (data managed through AngularJS). However, when the JSON dat ...

javascriptjqueryangularjscssflexslider

The alignment of the div is not correct when using css, and there seems to be

... ...

javascriptjqueryhtmlcss

Attempting to create a JavaScript calculator from scratch

After spending hours typing and debugging my code for a school assignment, I have created a calculator that still isn't working. I'm hoping someone can help me find the errors in my code. function myStory() { window.alert ("Very doge"); } // ...

javascriptjqueryhtmlcsscalculator

Expanding Image with HTML and CSS: A Guide

In the process of creating my website, I encountered an issue with the logo placement. I wanted the logo to be in the top left corner, similar to the one shown in this image. Initially, everything was working fine until I made some adjustments to move the ...

javascripthtmlcssimagesticky

Guide to positioning two <div>'s next to each other, not below each other, within the Blazor SyncFusion Card Component

I am currently utilizing the Card component in SyncFusion Blazor, which comes with properties for a title and subtitle. By default, these elements are displayed one below the other: https://i.sstatic.net/LFMr8.png Here is the CSS being employed: Title: ...

htmlcssblazortitlesyncfusion

Create a search bar using HTML and CSS that utilizes the GET method

My current challenge involves creating a search functionality using HTML based on the username entered, such as 'user'. Upon clicking the search bar, the page should redirect to http://localhost/searchuser/user I am encountering difficulties wi ...

htmlcss

Using Webflow code in ReactJS/NextJS: Best practices and implementation tips

After exporting my Webflow code to my NextJS app, I noticed that many of the HTML tags are being flagged as errors because they appear to be missing closing tags. Can anyone shed some light on why this is happening and suggest potential solutions? It&apos ...

htmlcssreactjsnext.jswebflow

Separating Main Page Content from Sidebar for Independent Scrolling

In the layout of our website, there is a narrow column on the left containing menu options, while the right side is occupied by the main page content. The challenge I am facing is figuring out how to ensure that the page content can scroll independently ...

javascriptjqueryhtmlcsswebforms

Make sure the text fits perfectly without any extra spaces

When working with CSS/HTML, I noticed that using a simple text within a div without any margin or padding, and specifying a font-size of 36px with a line-height also set to 36px doesn't fit perfectly - there is always some spacing at the top of the li ...

htmlcsstypography

Problem encountered with submenu text in CSS drop-down menu

Hey there! I've recently started working on a website and encountered a problem while trying to create a dropdown menu using CSS and HTML. The hover function for the submenu is functioning properly, but I'm struggling with changing the font color ...

htmlcss

Looking to adjust the background-image size of a table cell (td) upon clicking a specific

I have a website where I would like to display logos of different games with links attached to them. I have managed to adjust the size of the image on hover, but now I am looking for a way to keep the size bigger after clicking on the link. Is there a simp ...

javascripthtmlbackgroundcss

Elevate Your Navbar's Hamburger Menu with Font Awesome SVG in React-Bootstrap!

Currently working with React-Bootstrap to create a Navbar. I have a desire to swap out the default hamburger menu icon provided by React-Bootstrap with a Font Awesome hamburger icon. Wondering what steps need to be taken in order to change the existing bu ...

csstwitter-bootstrapnavbarfont-awesomereact-bootstrap