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
0
votes
1 answer

nested cards, fitting cards within a card - bootstrap cards

I am trying to do nested cards in my project, so basically I have three cards. The parent one Research Dashboard, the second one which holds the category ex. Recently Added Research and lastly, the third one or the third card which contains the…
Mike
  • 27
  • 1
  • 5
0
votes
1 answer

Making card items align with other cards

I have a problem wherein the items inside cards does not align with each other when I add other text/s. as you can see in the image below the items from books and recommended books are matched/aligned.. and here's the image when I am adding the…
Mike
  • 27
  • 1
  • 5
0
votes
2 answers

How to resize and crop an image with CSS, inside a Bootstrap Card?

Following problem: I have some Bootstrap card elements with pictures, and some pictures have different sizes/ratios, like the one in the middle (see attached screenshot). Therefore my card elements are not in one row. That's not very nice. Now I…
jonasmautner
  • 3
  • 3
0
votes
2 answers

Dynamically resize bootstrap cards title to align image

As you can see, the title of the second card pushes the image down. How can i dynamically resize the card title in order to align all the image? Thank you. Bootstrap Card
andrea
  • 396
  • 2
  • 12
0
votes
1 answer

Cards not appearing in Bootstrap 5

I've been trying to connect my bootstrap card deck to a mongo database using ejs. No errors, but the cards aren't appearing when I render the website. Does anyone know what might be wrong? Here's the code:
Rowan
  • 9
  • 2
0
votes
3 answers

How to remove an outline from a selected Card Bootstrap 5

I have to make a website using the Bootstrap 5 framework, so I've been messing around with "Bootstrap Cards". When I click on a card a border appears. Thought I might fix it overwriting it using the pseudo element :focus .card:focus {outline: 0…
lukramon
  • 43
  • 1
  • 8
0
votes
1 answer

Bootstrap Cards Filter PHP/AJAX Problems

I have a page of a website which has bootstrap cards on. The cards are generated dynamically, but I wanted to add a filter section. I am trying to use AJAX to acheive this, I have got to a point where when you select a checkbox it triggers the…
mattyt81
  • 11
  • 4
0
votes
1 answer

Wrap Text Around Fixed Column Width React Bootstrap Layout

I have created a React Bootstrap Card with four columns as per the grid system layout. I'm not the greatest at styling or CSS but I would like the text to be wrapped if it is too long- so for instance, in the image below, "BosniaAndHerzegovina" has…
clattenburg cake
  • 1,096
  • 3
  • 19
  • 40
0
votes
3 answers

How to style multiple bootstrap cards using css - point out the error

I have the following boostrap cards and I want to style them (override the existing style) by using some css. Card code
Compoot
  • 2,227
  • 6
  • 31
  • 63
0
votes
1 answer

bootstrap - how to add a margin and make these cards display horizontally

I have the following code and html (boostrap enabled) page which simply displays three bootstrap cards with images on the page. I want a) A margin from the left hand side to be included b) The cards to display horizontally (across the screen one…
Compoot
  • 2,227
  • 6
  • 31
  • 63
0
votes
0 answers

Bootstrap4 Cards Arranged in Specific Order

What is the best way to arrange 3 bootstrap cards in the following orders: Card1 on the left side Card2 and Card3 are on the right side Card2 has a fixed height Card3 is flexible depending on the size of Card2 Card3 has a custom scroll bar Cards…
Kogelet
  • 395
  • 5
  • 14
0
votes
1 answer

Bootstrap4 card-deck - how to have card-deck fits content

I try to use card-deck with cards inside this way : card-deck is centered in a column card-deck fits content width (actually, it's always 100% width, width: auto doesn't change anything) cards inside the card-deck are left-align I build a simple…
Matavai
  • 1
  • 1
  • 1
0
votes
1 answer

Bootrsrap card realtime search using javascript/jquery

I wanted to create a real-time search bar for bootstrap cards that don't use a database. I was able to get the real-time search done but it kept the spaces between invisible ones and filtered ones. This is the script I used to filter the cards…
Dulan Pabasara
  • 47
  • 9
0
votes
3 answers

How can i achieve this bootstrap layout using cards in one row?

I'm trying to create a bootstrap card layout like this in a row: What I've tried so far is this:
…
Niels
  • 145
  • 1
  • 11
0
votes
2 answers

Bootstrap 4 card height stretching

For some reason, when I try to use Bootstrap 4's card columns, the height of the shorter card will end up stretching to be equal with the one beside it. This only happens if I apply the 'row' class to the parent div. However, if I remove the 'row'…
Pooja CL
  • 61
  • 2
  • 9
1 2 3
…
9 10