Bootstrap Cards responsive text that stacks correctly

Asked
Active3 hr before
Viewed126 times

8 Answers

cardsresponsivebootstrap
90%

Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers ,I'm trying to stack items in Bootstrap correctly. I'm using a container and rows to stack. After a certain breakpoint the items down't align correctly anymore. I want to fix that and checked all StackOverflow questions about cards and text but couldn't find any similar problem,Thanks for contributing an answer to Stack Overflow!

load more v
88%

Some quick example text to build on the card title and make up the bulk of the card's content.,Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with .g-0 and use .col-md-* classes to make the card horizontal at the md breakpoint. Further adjustments may be needed depending on your card content.,Use our handful of available sizing utilities to quickly set a card’s width.

<div class="card" style="width: 18rem;">
   <img src="..." class="card-img-top" alt="...">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
   </div>
</div>
load more v
72%

Everything looked fine until I realized that it isn’t responsive. In fact at xl the cards display at 4 in a row, but at lg the cards all stack vertically as if viewing on a phone.,Try as I might, I can’t get the cards to be responsive no matter how much I play with the col classes.,Basically I’d like the cards 4 across at xl (that’s what they’re doing now), 3 across at lg, and 2 across at md,

CSS

body {
   background - color: #9ff;
    font: normal 1em / 1.5em verdana, helvetica, arial, sans-serif;
 }

ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0.25em;
    margin: 0;
    border: 1px solid # 000;
   list - style: none;
   background - color: #fff;
}

li {
   flex: 0 0 12 % ;
   margin: 0.25 em 0;
}

img {
   display: block;
   width: 100 % ;
   height: auto;
}

@media(max - width: 64 em) {
   li {
      flex: 0 0 24.5 % ;
   }
}

@media(max - width: 50 em) {
   li {
      flex: 0 0 49.5 % ;
   }
}

@media(max - width: 25 em) {
   li {
      flex: 0 0 99.5 % ;
   }
}
65%

The Bootstrap Grid System is used for layout, specifically Responsive Layouts. Understanding how it works is vital to understanding Bootstrap. The Grid is made up of groupings of Rows & Columns inside 1 or more Containers.,Bootstrap uses CSS media queries to establish these Responsive Breakpoints. They enable you to control Column behavior at different screen widths.,The classic Bootstrap grid has 12 column units:

Here’s the most basic example of using the Grid:

<div class="container">
   <div class="row">
      <div class="col">I'm your content inside the grid!</div>
   </div>
</div>

2 Columns…

<div class="container">
   <div class="row">
      <div class="col">Left column</div>
      <div class="col">Right column</div>
   </div>
</div>

3 Columns…

<div class="container">
   <div class="row">
      <div class="col">Left column</div>
      <div class="col">Center column</div>
      <div class="col">Right column</div>
   </div>
</div>
load more v
75%

Cards are versatile, visually appealing, and easy to interact with on both large and small devices, which is perfect for responsive design. Each card acts as a content container that easily scales up or down. As screen sizes get smaller, they number of cards in the row typically decreases and they start to stack vertically. There is additional flexibility as they can be a fixed or variable height.,We will create a Flexbox card layout that has a row of four horizontal containers on larger screens, two on medium, and single column for small devices.,Full width is great for small devices, so let’s keep this in mind as we plan for our larger screen before tackling various breakpoints. When we change the width, the cards start to look more even.

<div class="centered">

   <section class="cards">

      <article class="card">
         <p>content for card one</p>
      </article><!-- /card-one -->

      <article class="card">
         <p>content for card two</p>
      </article><!-- /card-two -->

      <article class="card">
         <p>content for card three</p>
      </article><!-- /card-three -->

      <article class="card">
         <p>content for card four</p>
      </article><!-- /card-four -->

   </section>
</div>
load more v
40%

Hello, same for me. Using bootstrap-4.0.0-alpha-6, if .card are less than three, cards stack differently in Chrome and Opera.,Edit: I don't know why, probably the chrome cache, but the solution works fine in chrome now. Still not working in Safari only.,In case when there's a few cards inside card-columns container they get distributed differently in Chrome, comparing to FF and Safari.

.card - columns.card {
   display: block;
}
load more v
22%

Using a combination of grid components, utility classes and individual card sub-components, cards can be made horizontal in a mobile-friendly and responsive way.,Place the image in the background of the card by setting the boolean prop overlay:,Cards support a wide variety of content, including images, text, list groups, links and more. The following are examples of what's supported inside a <b-card>

<div>
   <b-card title="Card Title" img-src="https://picsum.photos/600/300/?image=25" img-alt="Image" img-top tag="article" style="max-width: 20rem;" class="mb-2">
      <b-card-text>
         Some quick example text to build on the card title and make up the bulk of the card's content.
      </b-card-text>

      <b-button href="#" variant="primary">Go somewhere</b-button>
   </b-card>
</div>

<!-- b-card.vue -->
load more v
60%

Bootstrap Responsive Embed ,Add .card-title to any heading elements and .card-text to text elements.,Bootstrap 5 Dropdowns

Pretag
 Pretag team - issue, fix, solve, resolve

Other "cards-responsive" queries related to "Bootstrap Cards responsive text that stacks correctly"