Having trouble defining the width of cards in Bootstrap 4 using precise percentage values

Question

Having trouble defining the width of cards in Bootstrap 4 using precise percentage values

Take a look at this example. I believe I should be able to manually set the width of card elements using CSS. Despite my efforts, the width seems to be ignored and the final computed value is not what I expected. For instance, on larger screens, all 6 cards are displayed in a single row instead of following the specified width: 25%. On smaller screens, the cards do not align side by side as intended.

<div class="container">
    <div class="card-deck">
        <div class="card mb-4">
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">1 Card title</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>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        [other card elements...]
    </div>

.card {
    width: 50%;
}

@media (min-width: 768px) {
    .card {
        width: 33%;
    }
}

@media (min-width: 1200px) {
    .card {
        width: 25%;
    }
}

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

When dealing with the width property for .card-deck .card, it's important to note that simply using width won't work as expected. Instead, you should utilize both flex-basis and max-width for optimal results. Below is the code snippet:

.card {
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  max-width: 100%;
}
@media (min-width: 576px){
  .card {
    flex-basis: calc(50% - 30px);
    flex-grow: 0;
    flex-shrink: 0;
    max-width: calc(50% - 30px);
  } 
}

@media (min-width: 768px) {
  .card {
    flex-basis: calc(33.3333% - 30px);
    max-width: calc(33.3333% - 30px);
  }
}

@media (min-width: 1200px) {
  .card {
    flex-basis: calc(25% - 30px);
    max-width: calc(25% - 30px);
  }
}

Bootstrap applies the css properties

margin-left: 15px;margin-right: 15px;

to .card-deck .card, causing the cards not to go full width. To resolve this issue, you need to eliminate the margin width from the total card width.

You can find an example on CodePen.

If you try to mimic the design without modification, it may not look good compared to the default Bootstrap card design. Consider altering the html structure to achieve your desired layout without resorting to custom CSS properties.

Here is the link to the altered CodePen.

Edited Version

Bootstrap removes margin from the .card class when the window width is less than or equal to 575.98px. Similarly, .card-deck class eliminates

display: flex;flex-flow: row wrap;

. If you want two cards per row on smaller devices, follow this approach:

.card {
  flex-basis: calc(50% - 30px);
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: 15px;
  margin-right: 15px;
  max-width: calc(50% - 30px);
}

Add the classes d-flex flex-wrap to the card-deck element.

<div class="card-deck d-flex flex-wrap"></div>

The updated version of the previous CodePen can be found here: CodePen Link. Below is the complete HTML and CSS code:

<div class="container">
    <div class="card-deck d-flex flex-wrap">
        ... // Card elements here
    </div>
</div>

CSS

.card-deck .card {
  flex-basis: calc(50% - 30px);
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: 15px;
  margin-right: 15px;
  max-width: calc(50% - 30px);
}

@media (min-width: 768px) {
  .card-deck .card {
    flex-basis: calc(33.3333% - 30px);
    max-width: calc(33.3333% - 30px);
  }
}

@media (min-width: 1200px) {
  .card-deck .card {
    flex-basis: calc(25% - 30px);
    max-width: calc(25% - 30px);
  }
}

Answer 2

When dealing with the width property for .card-deck .card, it's important to note that simply using width won't work as expected. Instead, you should utilize both flex-basis and max-width for optimal results. Below is the code snippet:

.card {
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  max-width: 100%;
}
@media (min-width: 576px){
  .card {
    flex-basis: calc(50% - 30px);
    flex-grow: 0;
    flex-shrink: 0;
    max-width: calc(50% - 30px);
  } 
}

@media (min-width: 768px) {
  .card {
    flex-basis: calc(33.3333% - 30px);
    max-width: calc(33.3333% - 30px);
  }
}

@media (min-width: 1200px) {
  .card {
    flex-basis: calc(25% - 30px);
    max-width: calc(25% - 30px);
  }
}

Bootstrap applies the css properties

margin-left: 15px;margin-right: 15px;

to .card-deck .card, causing the cards not to go full width. To resolve this issue, you need to eliminate the margin width from the total card width.

You can find an example on CodePen.

If you try to mimic the design without modification, it may not look good compared to the default Bootstrap card design. Consider altering the html structure to achieve your desired layout without resorting to custom CSS properties.

Here is the link to the altered CodePen.

Edited Version

Bootstrap removes margin from the .card class when the window width is less than or equal to 575.98px. Similarly, .card-deck class eliminates

display: flex;flex-flow: row wrap;

. If you want two cards per row on smaller devices, follow this approach:

.card {
  flex-basis: calc(50% - 30px);
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: 15px;
  margin-right: 15px;
  max-width: calc(50% - 30px);
}

Add the classes d-flex flex-wrap to the card-deck element.

<div class="card-deck d-flex flex-wrap"></div>

The updated version of the previous CodePen can be found here: CodePen Link. Below is the complete HTML and CSS code:

<div class="container">
    <div class="card-deck d-flex flex-wrap">
        ... // Card elements here
    </div>
</div>

CSS

.card-deck .card {
  flex-basis: calc(50% - 30px);
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: 15px;
  margin-right: 15px;
  max-width: calc(50% - 30px);
}

@media (min-width: 768px) {
  .card-deck .card {
    flex-basis: calc(33.3333% - 30px);
    max-width: calc(33.3333% - 30px);
  }
}

@media (min-width: 1200px) {
  .card-deck .card {
    flex-basis: calc(25% - 30px);
    max-width: calc(25% - 30px);
  }
}

Answer 3

Answer №2

When working with the card-deck card, the default flexbox property flex:1 0 0% prevents the cards from expanding in width. To override this, utilize the flex-fill class on the cards and ensure to include the specificity .card-deck .card in the CSS selectors.

<div class="container">
    <div class="card-deck>
        <div class="card mb-4 flex-fill"><
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">1 Card title</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>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        ... (more cards)
    </div>
</div>

Answer 4

When working with the card-deck card, the default flexbox property flex:1 0 0% prevents the cards from expanding in width. To override this, utilize the flex-fill class on the cards and ensure to include the specificity .card-deck .card in the CSS selectors.

<div class="container">
    <div class="card-deck>
        <div class="card mb-4 flex-fill"><
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body">
                <h4 class="card-title">1 Card title</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>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        ... (more cards)
    </div>
</div>

Having trouble defining the width of cards in Bootstrap 4 using precise percentage values

Answer №1

Answer №2

Similar questions

Parent div not properly adjusting its height

Adjusting the background width results in the container position being altered as well

Using jQuery to temporarily disable a div element

Identifying the origin of the link or button clicked to switch to a different webpage

What is the best way to extract value from an input text that is being repeated using ng-repeat within a Tr

The background image does not have the body padding applied

hover effect with fading transition while mouse is still hovering

Determine whether a click event originated from within a child window

Is it possible to customize the default styling options in Tailwind?

What could be causing the absence of HTML attribute suggestions in my Visual Studio Code?

Reveal and conceal using CSS animations

Unable to dismiss keyboard in iPhone search bar

Switching out one block of HTML with another in JavaScript is a powerful way to dynamically update

Mastering the Art of Restricting an IP Address Range with FILTER_VALIDATE_IP

Creating intentional blank space before the <Span> element using CSS in HTML

Side Menu with Fixed Position Created with Tailwind CSS

Initiating a horizontal scroll menu at the center of the screen: Step-by

"Enhance your website with a unique Bootstrap 5 carousel featuring multiple

What is preventing this code from successfully altering the opacity of an element based on its id?

Do not use Express.js to serve the index.html file