Expanding and filling the parent container both horizontally and vertically with Bootstrap 4 cards arranged in columns

Utilizing Bootstrap 4, I have constructed a row with 3 columns, each set to a size of 4 on medium and larger displays. Although the content within these cards may vary in size, my goal is to ensure that each card maintains an equal length.

I have opted against using card groups/decks due to their lack of responsiveness; instead, I want the cards to occupy all 12 rows on small/xs displays.

Below is an excerpt of code pertaining to the cards. For a live preview, the project can be accessed on Plunker: http://plnkr.co/edit/RLQaA6knYi69qc4vLr6j?p=info. Upon viewing the project on a large display, it becomes apparent that the cards do not possess equivalent sizes.

According to Bootstrap 4, if no width specifications are provided, cards are expected to stretch to fill the entire width of their container. So, is it safe to assume that they should encompass the full width of the parent container (in this case, the div of col-md-4)?

If my assumption proves incorrect, how can I effectively expand the 3 cards horizontally to cover the entire width of the enclosing column while also ensuring uniform vertical length? Attempts to incorporate flex-column flex-grow yielded horizontal expansion without affecting vertical sizing. What would be the optimal approach to address this issue?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<main>
  <div id="content-container" class="container">

    <div class="row">
      <div class="col-12">
        <h2 class="display-5 text-center text-white text-uppercase">Portfolio</h2>
      </div>
    </div>

    <div class="row">

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card resize-card">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Featured</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card resize-card">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Footer</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card resize-card">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-body">
            <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>
          </div>
        </div>
      </div>

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

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

Edit:

To achieve uniformity in card dimensions, I successfully implemented a class for each card div with a width value of 100%. Despite this resolution, I'm uncertain if this method adheres to the correct practice, as I initially anticipated cards to automatically adjust in this manner.

htmlcssbootstrap-4

Answer №1

Your columns are set to have a width of 100% on mobile devices, but the cards inside these columns still have a width of auto.

To fix this issue, you can apply the `w-100` class to each card.

Please review the result to ensure it meets your desired outcome.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<main>
  <div id="content-container" class="container">

    <div class="row">
      <div class="col-12">
        <h2 class="display-5 text-center text-white text-uppercase">Portfolio</h2>
      </div>
    </div>

    <div class="row">

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card w-100">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Featured</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card w-100">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Footer</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card w-100">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-body">
            <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>
          </div>
        </div>
      </div>
    </div>

  </div>
</main>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

UPDATE

If you want to control the properties of all cards simultaneously, you can create a custom class for a row containing these cards. You are free to use your own CSS in addition to Bootstrap styling.

.row-whith-wide-cards .card {
  width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<main>
  <div id="content-container" class="container">

    <div class="row">
      <div class="col-12">
        <h2 class="display-5 text-center text-white text-uppercase">Portfolio</h2>
      </div>
    </div>

    <div class="row row-whith-wide-cards">

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Featured</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-footer">Footer</div>
        </div>
      </div>

      <div class="col-md-4 d-flex align-items-stretch">
        <div class="card">
          <img class="card-img-top" src=".../100px200/" alt="Card image cap">
          <div class="card-body">
            <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>
          </div>
        </div>
      </div>
    </div>

  </div>
</main>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></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

Unusual behavior of PHP echo when inserting into an HTML value attribute

Let's dive right into the problem. I have a database entry that is a string in the column name1 and it looks something like this: COMPANYNAME DIVADAY The key characteristic of this string is that it is mostly a combination of two or more words separ ...

phphtmlsql-server

Utilizing JavaScript to trigger an email with PHP variables included

i am trying to pass a few php variables using a javascript trigger. Everything seems to be working with the variables, databases, and script but I am struggling with the PHP part. Here is my attempt at the PHP code, although it clearly has some issues. I ...

javascriptphphtmlemail

Retrieving all elements that contain the specified search value with Jsoup

I am currently developing an Android app that involves working with HTML. Specifically, I need to extract part of an HTML body, retrieve attributes, and search for values containing a specific element. While I have successfully accomplished the first two t ...

javaandroidhtmljsoup

personalizing material-ui component styles – set select component color to be pure white

I am looking to implement a dropdown menu using material-ui components (refer to https://material-ui.com/components/selects/). To do so, I have extracted the specific component from the example: Component return <div> <FormControl variant="outli ...

javascriptcssreactjscomponentsmaterial-ui

Encountering the "ENOTFOUND error" when trying to install ReactJs via Npm

Struggling to install ReactJs? If you've already installed Nodejs and attempted to create a ReactJs project folder using npx create-react-app my-app, but encountered the following error: npm ERR! code ENOTFOUND npm ERR! syscall getaddrinfo npm ERR! er ...

javascripthtmlnode.jsreactjsnpm

Displaying a div on click using Jquery will only impact one div at a time

I am encountering an issue with my WordPress setup. Within my loop, I have a clickable link that toggles a div to show or hide content. However, since each item in the loop uses the same class, clicking on one link activates all of them simultaneously. &l ...

javascriptjqueryhtmlwordpress

Efficiently adjusting the height of a sticky sidebar

I am currently implementing a Bootstrap grid with two divs in a row. I need my reply-container to be fixed (sticky). However, when setting position: fixed; it is affecting the element's width by adding some additional width. With position: sticky, set ...

cssvue.jsbootstrap-4grid

What is the best way to link the roll button to a specific video URL?

I am currently working on a project that involves assigning specific videos to 6 roll buttons for continuous play. For instance, I want the first roll button to display a yellow dice and the second button to show a blue dice, and so on. As of now, I have ...

javascripthtmlcss

Using Django (v3) UserCreationForm, the process of applying Bootstrap4 form-related classes to fields can be simplified

I am currently in the process of creating a registration form. The structure of the form is as follows: class UserSignUpForm(UserCreationForm): username = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control', ' ...

pythondjangobootstrap-4django-forms

How to use Bootstrap to center an SVG or div in the middle of the page

I've been struggling to center this box for a week now, but no matter what I try, it keeps ending up on the center left. I attempted to use CSS to position it absolutely, but that ended up messing with the responsive design. Here is my HTML: <body ...

htmlbootstrap-4

Is there a way to use jQuery to centrally align the accordion item that I have chosen?

My attempts to use `this.scrollIntoView({behavior: "smooth"}) were yielding inconsistent results in terms of where the selected item would land on the page. I believe I might need to utilize scrollTop(), but as someone who is new to jQuery, I am ...

javascripthtmljquerycssscroll

Automated email formatting for a polished presentation

Aspiring to create automated emails upon user registration on my website, the aesthetic appeal of these emails is crucial to me. I have meticulously crafted an email template using HTML. You can view a snapshot here: https://i.sstatic.net/MpjfP.png Howev ...

htmlcssemail

Clearing the canvas completely with CamanJS: a step-by-step guide

I need some help with my CamanJS photo editing app. Everything is working perfectly except for one issue - when a user uploads a new image and applies a filter, the canvas reverts back to the previously uploaded image. Even though I am using the revert() f ...

javascriptandroidhtmlcamanjs

Manipulating Objects with CSS Transform in Global/Local Coordinates

If we take a closer look at our setup: <div id="outside"> <div id="inside">Foo</div> </div> and apply a rotation to the outer element - let's say turning it 45 degrees clockwise: <div id="outside" style="transform: ro ...

javascripthtmlcss

Ensure that children elements are aligned to the bottom by setting the axis of the HTML

Elements positioned within a parent DIV typically flow from top to bottom. Even when using Javascript to add elements to the parent DIV, they maintain this top-to-bottom positioning. I am interested in achieving a bottom-to-top axis alignment within the pa ...

javascripthtmlcsspositioningaxis

Trigger bootstrap dropdown when input is clicked

One of the challenges I'm facing is getting a Bootstrap 4 dropdown to open when a user tabs to it for ADA accessibility. Currently, clicking on the input triggers the dropdown to show, but I need it to work with tabbing as well. Using a focus event a ...

javascriptjquerybackbone.jsbootstrap-4backbone-views

Searching for the nearest label to an input element when they are located at the same hierarchy level

I am dynamically inserting input elements into my form. The structure of each code block is as follows: <input .. /> <input .. /> <label></label> The purpose of the label is to display an error message. For example, if one of the ...

jqueryhtml

How can I line up elements in different divs when the width is adjusting based on the window size?

Trying to align a search input and a result element in separate containers when the window size changes. Looking for a solution without using Javascript. One window size: https://i.sstatic.net/LiQtY.png A smaller window: https://i.sstatic.net/dgj4I.png C ...

htmlcsswebresponsive-design

Creating an Angular 7 Template using HTML CSS and Javascript

I recently acquired a template that comes with HTML, CSS, and Javascript files for a static webpage. My goal is to integrate these existing files into my Angular project so I can link it with a Nodejs application to create a full-stack webpage with backend ...

javascripthtmlcssangular

Overlapping Image Arrows with CSS Styling

After receiving a design with what appeared to be a simple feature from a designer, I discovered that implementing it was more complex than expected. Specifically, I needed to create a CSS3 arrow with an image as the fill color in order to overlap the unde ...

jqueryhtmlcssslider