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

How to show multiple entries in multiple bootstrap cards?

I want to show my tasks like this in bootstrap cards - Picture for reference Code that I'm using right now - HTML
AJAX var data = JSON.parse(httpRequest2.response); console.log(data); $.each(data,…
Dynamo
  • 67
  • 11
0
votes
0 answers

I don't understand the "mb-sm-0" part in cards (bootstrap 5)?

I did get what I expected but the thing is that I don't quite understand that part which says mb-sm-0
Special…
Ahmed Aishan
  • 1
  • 1
0
votes
1 answer

Cards are not getting of equal size in Bootstrap

I am trying to design a page in bootstrap. I have added 3 cards in a row but for some reason they are not getting of equal size. The data in the cards is getting random size along with the headings and image. Following is the code of the cards: …
ubaid qureshi
  • 15
  • 2
0
votes
3 answers

How to recolor bootstrap cards border color?

So, i was using bootstrap cards to make like my webpage look neat and stuff. The default color for bootstrap cards is white. With a navbar you can just set the color options at the top as navbar-dark or something, but in here you can't do that, so i…
Avi Ball
  • 29
  • 6
0
votes
2 answers

dispaly list of cards in react

new with react i want to know why my cards are not showing up in the body when i pass them some minimal data. so this is my code: import CardsList from "./cardsList"; function allCards() { const cardsArr = [ { id: 1, image: …
NMP
  • 1
  • 1
0
votes
0 answers

Bootstrap card group with same size cards

I'm using a card group of bootstrap, however at 576px there is a switch in the layout that I don't like (because all the nine cards are on the same line and are too little) thus I inserted min-width:250px to each card, but in this way the odd cards…
Nick
  • 1,439
  • 2
  • 15
  • 28
0
votes
0 answers

How to transition a background-image inside a div from background-size:cover to background-size:120%?

I have a bootstrap-card with a background-image and some content over it. Now I want to have a zoom-in-effect on the background-image when I hover over the card. I can do this with an initial background-size of 100% and then transition to a…
Nick Schepers
  • 1
  • 6
0
votes
0 answers

Trying to Filter Bootstrap Cards of database records with JavaScript

I'm building a kind-of replica of IMDB for a project and I have a sort of central actor landing page that shows Actors Profiles (Picture, Name, Etc) details from a Database in the form of Bootstrap Cards. As soon as I create a new record in the…
TheGasMan
  • 13
  • 4
0
votes
1 answer

bootstrap cards get shrink in a single row when resize in small and medium screen

I am new to front end and struggling when resizing the screen . I am using 4 cards(Performance,Quality,Availability,Availability) in a card-group class and wants to place two cards in a row when screen is on medium and 1 card in a row when screen is…
Alok Sharma
  • 95
  • 1
  • 12
0
votes
1 answer

Problems with cards and scrolling

Im making an ecommerce simulation for a course im taking and after succesfully creating a featured section with cards im having some trouble when it comes to scrolling. I have my navbar position set to sticky and when I scroll down the cards overlap…
Elisa Correa
  • 3
  • 2
0
votes
1 answer

Rows and colums with bootstrap not working

So im trying to display multiple cards in a row I followed the documentation but for some reason my cards keep displaying in a single colum. Can anyone see what im doing wrong??

Recomendaciones…

Elisa Correa
  • 3
  • 2
0
votes
1 answer

How can I increase-decrease the slidesPerView according to the window size of a Swiper slider?

My motive is when the display size will be small then the slidesPerView will be 1. I tried the below way, it's working when I refresh the page. But I want it will work automatically. When the window size will increase automatically the slidesPerView…
Mossaddak
  • 379
  • 1
  • 14
0
votes
1 answer

Why my bootstrap card gap in react does not work?

so i am using bootstrap in react and i am trying to have a gap between my cards. It usually works fine. But in this, i have no idea why it doesnt work. I have tried adding g-4 in the className to make gap. Whats probably wrong in my code?
sylvia_fe
  • 51
  • 6
0
votes
1 answer

BootStrap 5 React Js 4 products in a row not getting displayed

I'm a beginner in React Js, and I'm using React Js with BootStrap 5.2.0 My product cards are not getting displayed in a row I want to display 4 product cards in a row. Adding Codes: Home Page code:
…
user14111271
0
votes
0 answers

Bootstrap 5 how to show/hide button on a card with css

I have a row of cards and when I mouse over one of the cards, I want a "Shop Now" button to appear on the card. Is there a way to do it with just CSS? This is the part of the card with the button:
1 2 3
…
9 10