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

Trying to put marker on top of the image

A bit lost. Trying to put marker over an image (x,y coordinates within 0 to 256). I know usually its done by creating a container like here: https://stackoverflow.com/a/29304089/11933719 But since in my case i use img-fluid class, and image…
Danza
  • 23
  • 4
0
votes
0 answers

how to make my blog cards (posts) responsive to adapt to smaller screen (tphones) in Django templates?

here is my html code using boostrap4 to make cards in my home page :
{% for i in post %}
{% if i.image_url %}
Qwert
  • 1
  • 1
0
votes
0 answers

Bootstrap-4 Cards align in a row to vertical

In bootstrap 4, have created cards in 4 columns: image 1 Trying to set the alignment to vertical, problem is how to create cards for each title and dispose them vertically. And so it appears the cards ordered by the title in small devices: image…
Miguel Fernandes
  • 1
  • 1
0
votes
1 answer

Bootstrap 5 navbar dropdown links don't work on small screens <576px

I'm new to this. I have a working navbar with dropdown that has 3 links. After expansion, the dropdown links display a card upon clicking (cards show contact info), and all works fine...except for when I go to mobile view below <576px. I've used a…
FOSS_Learner
  • 3
  • 3
0
votes
2 answers

Can't style my login form to be at the center with a beautiful card

I'm trying to make a login form like This one using Bootstrap5, but i can't, is anybody who can help me to make a login form like the one i mentioned here ? Actually I'm begineer in bootstrap and css. my template:
Bamagujen_Bahaushe.
  • 66
  • 1
  • 16
0
votes
1 answer

Bootstrap Card image enlargement

I want the pictures in the card to enlarge when clicked. I couldn't do it anyway. I tried a lot but I couldn't. I can enlarge normal photos with Lightbox. However, when I click on the cards, the picture does not enlarge. The codes are a bit…
takix
  • 27
  • 6
0
votes
0 answers

Using bootstrap collapse cards in python and streamlit

I have a streamlit app that i want to display the returned result as cards using bootstrap cards for this i am using st.markdown(). The problem is that once the user click the button the cards displayed are not collapsed and are always expanded. So…
DevLeb2022
  • 653
  • 11
  • 40
0
votes
3 answers

Bootstrap Cards carousel with php

I'm trying to get the custom posts image gallery images into bootstrap cards with carousel and so far I'm able to get the images but they are displaying one by one underneath each instead of a carousel please correct me what am I doing wrong…
Imran Irshad
  • 97
  • 7
0
votes
2 answers

How to mapping restful api in react app via bootstrap

I want to consume restful api in react application via bootstrap. But I can't mapping correctly. I believe that the problem is brackets. But I couldn't figure out. (ignore my div part if I can mapping, I will update that part.) My restful api:…
hammer89
  • 343
  • 1
  • 5
  • 13
0
votes
0 answers

Equal height elements in Bootstrap 3.3.7 cards using Flexbox

I'm trying to create a card group template to use on our Bootstrap 3.3.7 website. This card group template would have rows set up where they would always be the same height across all three or four cards. For example, this is one way it might be…
linnse
  • 415
  • 4
  • 21
0
votes
1 answer

How to use if statment inside div tags with streamlit (bootstrap card)

How to use if statement inside div tags with streamlit ? I am using bootstrap card with streamlit to display info from dataframe . What i need is to be able to display the content inside the bootstrap card when its not empty and hide the info when…
DevLeb2022
  • 653
  • 11
  • 40
0
votes
2 answers

Why is my Boostrap-Card header not filling entire width of the card?

I am new to Bootstrap and Django. I am trying to style a card, but card header (background) does not fill entire width of the card. Here is an example: Here is the code:
{%…
Heikki
  • 341
  • 2
  • 18
0
votes
1 answer

Size card to viewport in Bootstrap 4.6

I'd like create a bootstrap card whose height and width consume the entire viewport. The card-header and card-footer must each be 15% the viewport height with the remaining 70% allocated to the card-body. If card-body's content exceeds 70%, it needs…
Steve Kramer
  • 107
  • 6
0
votes
2 answers

Bootstrap class "text-right or text-end" not working on element

I am trying to use text-right or text-end classes for the anchor element at the end but somehow it's not working for me. I even tried to use style="text-align:right !important;"but it doesn't seem to give the necessary outcome.
Anshi Kothari
  • 31
  • 3
0
votes
3 answers

How do I ensure that a click event is limited only to a card I have clicked?

I am using two Bootstrap cards in my application. I conceal one of the cards (which is blue in colour) behind a card (which is white in colour) as illustrated below: ...and use the following code to reveal the concealed blue card behind the white…
SirBT
  • 1,580
  • 5
  • 22
  • 51
1 2 3
…
9 10