Stack Overflow
Stack Overflow

Questions tagged [bootstrap-cards]

Bootstrap’s cards provide a flexible and extensible content container. Use this tag both for Cards and related classes (such as Card groups)

Cards are a component of Bootstrap.

Documentation (for version 4.0) can be found here, this includes information about associated classes such as card-group and card-deck.

Cards replace panels, wells, and thumbnails (from Bootstrap 3).

146 questions
219
votes
23 answers

How to make Bootstrap cards the same height in card-columns?

I am using Bootstrap 4 alpha 2 and taking advantage on cards. Specifically, I am working with this example taken from the official docs. How can I make all cards to be the same height? All I can think by now is setting the following CSS rule: .card…
blueSurfer
  • 5,651
  • 13
  • 42
  • 63
20
votes
5 answers

Bootstrap cards not showing like in examples

Why do my Bootstrap cards look weird? In the examples they look like cards with a border and white padding but mine look like text only without the padding and the white background. For example: I don't know if the code will help you but here it…
flex_
  • 679
  • 2
  • 8
  • 26
13
votes
3 answers

How to raise bootstrap button "over" a stretched link?

I'd like to put some content in a Bootstrap 4 card with a stretched link over it. I'd also like to include a button in this card which has a URL different to the stretched link. Bootstrap's documentation says: Multiple links and tap targets are not…
Spielo
  • 481
  • 1
  • 6
  • 17
10
votes
4 answers

unknown at rule @include css(unknownAtRules) error while including @include in css file

I am trying to customize card columns by using Bootstrap 4 card layout. But why it is showing error if i am writing this code in my css file? Error showing is in VS code: unknown at rule @include css(unknownatrules) HTML file
Sumit Trivedi
  • 113
  • 1
  • 1
  • 9
3
votes
2 answers

Applying box-shadow to Bootstrap 4 card component

I'm trying to apply a simple shadow to a cards component. Somehow the shadow glitches and looks mirrored and misplaced. I think it has to do with margin-bottom but there's more to it I can't figure out. What is the correct approach to let cards have…
Daniel W.
  • 31,164
  • 13
  • 93
  • 151
3
votes
1 answer

Responsive table inside a card

I created a card using the bootstrap. Within that card I intend to insert a table with data. My problem is that when reducing the screen (check responsiveness), the data in the table comes out of the card. How can I solve this problem of mine, can…
S3ck Stros
  • 325
  • 3
  • 10
3
votes
3 answers

How to prevent table to exceed card body width in Bootstrap 4?

here is example of my code:
espresso_coffee
  • 5,980
  • 11
  • 83
  • 193
3
votes
3 answers

How to set number of cards per row in card-deck in Bootstrap 4

I am looking for solution fot setting number of cards in card-deck per row in bootstrap. For example, I would like to have two cards per row:
Card…
profiler
  • 567
  • 2
  • 15
  • 41
2
votes
2 answers

How to change image size using nextjs

I have an image in a bootstrap card using next/image. I would like the image to be smaller and not fill the entire top portion of the card. Say about 60% of the original size. I tried to wrap the image in a div container and added some css but did…
rf guy
  • 379
  • 10
  • 26
2
votes
1 answer

i want to create a loop with bootstrap card

I have a problem viewing a page. On my page every time I create an "event" I would like the cards to be placed side by side with a maximum of two / three "cards" per row. While now they are placed one below the other. How can I create a loop that…
Daniele Vallorani
  • 73
  • 1
  • 14
2
votes
1 answer

Bootstrap Cards Not Following Column Rules

I have this code containing a row of bootstrap template cards:
... …
Catogram
  • 303
  • 1
  • 12
2
votes
1 answer

Is there ngx-bootstrap 'card' component?

Is there any existing solution for ngx-bootstrap card component? If it does not exist, what is the alternative for it? Thank you.
user user
  • 73
  • 5
2
votes
2 answers

How to place card-columns in the center of the page when using bootstrap 4.3.1?

I am trying to horizontally-center a card-columns with Bootstrap 4.3.1 while nesting cards. Here is how my cards are nested > Main Card >> Card-columns >>> Card 1 >>> Card 2 >>> Card 3 >>> Card N I tried to…
user12310517
2
votes
1 answer

How to make Bootstrap 4 cards NOT to stretch all the way to the right

I want to have a few Bootstrap cards on html page. The exact number of them I don't know and cannot predict, because it depends on the user data in the database. For example, if the user has 4 items I need to create 4 cards, if 10 then 10 cards and…
Suren
  • 173
  • 3
  • 11
1
vote
1 answer

Reducing space betwen header and main in bootstrap, and section and continer in bootstrap 5 cards

I want to reduce space between header and main in bootstrap 5 cards class shown by black line A And line B which is between section container (or tag) and class album. I am using cards class in bootstrap 5. Thanks in advance.
slawalata
  • 389
  • 1
  • 2
  • 14
1
2 3
…
9 10