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
1
vote
1 answer

How can I remove the extra space in cards bootstrap 4

So I've been losing my head trying to figure this out. I can't seem to make the cards horizontally centered inside this section and when I checked inspect elements, it turns out the cards are occupying some extra space which isn't really padding or…
fael_
  • 35
  • 1
  • 8
1
vote
0 answers

Bootstrap card deck with fixed width for each card and with a horizontal scroll

... …
Nemesis
  • 135
  • 1
  • 1
  • 13
1
vote
3 answers

asp.net Bootstrap - responsive cards nested in a container-card

I have this markup
1
vote
0 answers

Dynamic Bootstrap cards with content-wise width

What is the way for creating bootstrap cards dynamically with the fixed height and width depending on the length of text. Now all the cards are aligned by columns, but I want a fixed margin between them.
<% for(var i = 0;…
Joseph Kirtman
  • 349
  • 2
  • 10
1
vote
2 answers

Bootstrap 4: Accordion does not collapse cards

From the official documentation of Bootstrap 4, there is this following code. What should I do in order to not collapse other cards if I open/show one. I want all the cards shown/open initially then the user will just select which card he want to…
beginner
  • 2,024
  • 5
  • 43
  • 76
1
vote
0 answers

Using scale() on a card element inside .card-columns cuts the top of the first row

Using: Bootstrap 4.3.1 and jQuery 3.4.1 I'm making a web application which generates a lot of bootstrap cards inside a .card-columns container. When the user hovers over a card, it gets scaled up (with CSS transform: scale(1.1)) to show that it's…
Nagy Szabolcs
  • 23
  • 1
  • 8
1
vote
2 answers

Bootstrap Cards Not Shifting Down

I am trying to get some help with my bootstrap cards. I have 4 cards which extend horizontally across the whole width of the page. When visiting the website on a mobile device they stay all still extend horizontally and then stretch vertically. I…
jkruskie
  • 412
  • 4
  • 15
1
vote
0 answers

Filter bootstrap 4 cards

has anyone come across a script that filters bootstrap cards/results on a html page, and sets classes so they become hidden? Like this: Filter cards in Bootstrap 4 with jQuery (does not work) I use something like this on a table, but it does not…
user3795243
  • 11
  • 4
0
votes
0 answers

how to make the cards all default to the same size with bootstrap?

I'm trying to make these cards the same sizes. In bootstrap, this problem is usually solved with h-100 as shown below, but I still didn't get it. Now follow all the code below to get a better idea (function () { "use strict"; var carousels =…
Allan Michel
  • 35
  • 4
0
votes
1 answer

ASP.NET MVC Core Razor view: Submit List of Bootstrap Card Items to post Action Method

I have a page that displays a list of items using a foreach loop within a form tag. Each item is displayed using a bootstrap Card. And In each card, I want to have an input field that a user can type/modify some text and then when the user clicks…
emile keen
  • 5
  • 3
0
votes
0 answers

Creating spaces between div card and align them in one direction not overlaping

I have 3 div cards they seem to overlap and want them to align right maybe using margin. I need some help with my styling, currently now they overlap and its not good for user experience. I have other two they do not overlap to each other, they…
Themba2023 Bhele
  • 43
  • 3
0
votes
0 answers

nav tab with order lists when clicked

I need some help, i have order list has nav-bar tab. When clicked it should populate div card styled with image inside. E.g step 1 if i click this tab must be able to see div card of this and this case must appear a div card with image. So forth. …
Themba2023 Bhele
  • 43
  • 3
0
votes
0 answers

Frustration getting Bootstrap cards to all look uniform

I am working on a shopping cart for a site using Bootstrap 5.2.3, and I have some code for a product page using Bootstrap cards. The problem is, I can't get the card sections (image, header, and body) to size to the same height. Here is the code: …
TC_Guy
  • 127
  • 9
0
votes
1 answer

Bootstrap 5 multiple cards in carousel

I'm using bootstrap 5 to create multiple cards in a carousel, but it just showing 1 card per slide, how can I make it so that it's showing 3 cards per slide? Should I use row and columns ? Or is there a way to combine bootstrap 4 and bootstrap 5…
user21099803
0
votes
1 answer

SOLVED - Why is this bootstrap card misaligned?

The image and text of this bootstrap card are supposed to be side by side, with the combo title + text centralized in relation to the image. But they are somewhat above the image. Image of how it looks: HTML:
user92837
  • 29
  • 6
1 2
3
…
9 10