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

Bootstrap 5 Card and image overlay with positioning control

I am trying to put a card with text overlaying an image. I am not able to put the card inside and over the image. I have tried card-img-overlay and nesting another card inside but to no avail. What is the best way to move the full card on top of the…
user3507584
  • 3,246
  • 5
  • 42
  • 66
1
vote
1 answer

Bootstrap 4 Cards

I'm a beginner at UI/UX and i was fidgeting with some gallery transitions which had hover attributes, and added Bootstrap cards in them, So As I Hover on the image (Which Appeared Blank Before) Now Has An Overlay And Shows the text Intended, with…
Hector Moone
  • 13
  • 4
1
vote
1 answer

Bootstrap 5 Cards Displayed Vertically

I have some cards on my webpage currently displayed horizontally in a row. I am wanting to make these move to display vertically on a smaller screen. At the moment, they just go off the page when the screen is shrunk. I still want the cards to be…
Pilot640
  • 61
  • 1
  • 1
  • 7
1
vote
1 answer

Making Bootstrap (4.4.1) Cards Have Body Text Wrap Around Them

I currently have a card like this on my home page to my site, I would want it to be aligned left and but not take up so much space horizontally. On top of that, I want the text to be wrapped around the card instead of separated entirely, similar to…
Ryan Hoshall
  • 31
  • 3
1
vote
1 answer

Display more content in a horizontal card along with a scroll bar if it extend the screen size

I would like to display a horizontal card that has more columns in it. If it exceeds the col-12 size the rest of the content also needs to be displayed within the card with a scrollbar enabled. My HTML Code:
R SUBASH
  • 41
  • 1
  • 1
  • 7
1
vote
2 answers

Bootstrap 4 Cards hiding fixed Header while scrolling

Below is an Html code with bootstrap 4. It has a fixed Header and Footer with scrollable bootstrap Cards in between. While scrolling, some of the Cards hides the Header. How to make the Cards scroll "behind" the Header ?
dosnetCore
  • 55
  • 9
1
vote
1 answer

How set cards in a row using react bootstrap

I want to add card using react-bootstrap in a project. I used Grid and CardDeck option from react-bootstrap. But all cards comes in a column (like this). But I want this cards comes with side by side, not in row.(I want my output like this…
noob_developer
  • 183
  • 3
  • 11
1
vote
4 answers

Bootstrap image card text overlay

Unable to set card footer as expected output Expected output: My Code:
Sid Sss
  • 129
  • 2
  • 13
1
vote
1 answer

Bootstrap 4 card, extend last card-footer to fill space

I am trying to extend the last card-footer to fill the rest of the space if it doesn't have any buttons. I am tried a number of flex combinations without much luck.
Mike Flynn
  • 22,342
  • 54
  • 182
  • 341
1
vote
2 answers

how to make card-text and horizontal list group items editable in a bootstrap card?

Using bootstrap card-text and horizontal list group I was able to show information in a bootstrap card, but I want them to be editable like bootstrap 4 form. So, how I will be able to do that? I have provided the code that is showing information in…
Shafiqul Islam
  • 93
  • 6
1
vote
1 answer

How to make bootstrap card card-tall responsive on mobile

so i am using bootstrap cards to display images in a sort of gallery way. I am also using the card-tall to style my images. These images are posters and as you may guess that means they take up a lot of space. On website this is how it looks: But…
Esther Ndung'u
  • 55
  • 11
1
vote
1 answer

Sticky header scrolls away after some scrolling on bootstrap V4.4.1

I'm trying to make this card with a sticky top and sticky bottom since they show some info and inputs that I would like to be always shown. The problem is that after scrolling some of the content inside, the top goes away and I don't want that. I…
BooterMan
  • 13
  • 1
  • 5
1
vote
1 answer

Bootstrap card with fixed width in a column (responsive)

I have a Bootstrap-card but there is a problem with its width. I'd like to that card will take a full with of the column which I set. Here is a piece of code that I use and screenshot which presents actual width and wanted (with blue background).…
Jan Testowy
  • 649
  • 3
  • 13
  • 32
1
vote
1 answer

Card header cannot strech to the card edge when using Bootstrap cards grid

I use bootstrap 4 in Laravel and write blade.php template files. Below is my code. The card grid looks good, but there are blank spaces between card titles and the car edges.
@foreach…
echo
  • 1,244
  • 1
  • 16
  • 40
1
vote
2 answers

How to implement search functionality in Bootstrap Card group/cards?

I have created a page that displays all the users in bootstrap cards. I would like to know how can I search a user in a search box that filters out only that user card and clearing it out should bring all the user cards back. Need help in…
Santhosh
  • 83
  • 1
  • 8
1
2
3
…
9 10