bootstrap-cards

Embedded youtube videos showing up blank in Django card-columns page

由 拟墨画扇 提交于 2021-01-29 14:20:11
问题 I'm working in a django project and i've run into an issue using embedded videos with bootstraps card-columns. We have a django plugin, Media Player, that simply puts a div & iframe on the page, most of the JS comes from the websites. The videos in question are from youtube, but i've tried vimeo videos and same result. The issue is that some videos work fine, but others don't show up on the page, they are blank/white. However, the video is still there, it takes up space & i can hover over it

Allign bootstrap rows horizontally

由 |▌冷眼眸甩不掉的悲伤 提交于 2020-04-30 06:35:06
问题 I have created the following(in the image below) card layout using bootstrap the .card-columns class is adding my cards vertically so that i am loosing some part of the card. i want my cards alligned horizontally and exactly 3 cards per row without chaning the size of the card. here is my code. <body> <div class="card-columns"> <?php $conn=new mysqli("localhost","root","","dbname"); if(!$conn) { echo "connection_failed"; } else{ } $query= "select title,description,id from problems where

Bootstrap 4: Accordion does not collapse cards

由 江枫思渺然 提交于 2020-04-16 02:58:08
问题 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 collapse/close. <div id="accordion"> <div class="card"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

Bootstrap cards not showing like in examples

由 风流意气都作罢 提交于 2019-11-30 17:24:47
Why do my Bootstrap cards look weird? In the examples they look like cards with a border and white padding but mine look like text only without the padding and the white background. For example: I don't know if the code will help you but here it is: .container { left: 0; right: 0; bottom: -340px; text-align: middle; position: absolute; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="container"> <div class="row"> <div

Bootstrap cards not showing like in examples

由 旧街凉风 提交于 2019-11-30 16:45:33
问题 Why do my Bootstrap cards look weird? In the examples they look like cards with a border and white padding but mine look like text only without the padding and the white background. For example: I don't know if the code will help you but here it is: .container { left: 0; right: 0; bottom: -340px; text-align: middle; position: absolute; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384

How to make Bootstrap 4 cards the same height in card-columns?

由 梦想的初衷 提交于 2019-11-27 02:48:36
I am using Bootstrap 4 alpha 2 and taking advantage on cards. Specifically, I am working with this example taken from the official docs. As title says, how can I make all cards the same height? EDIT: All I can think by now is setting the following CSS rule: .card { min-height: 200px; } But that is just an hard coded solution that won't work in general case. The code in my view is the same as the one in the docs i.e: <div class="card-columns"> <div class="card"> <img class="card-img-top" data-src="..." alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title that wraps

How to make Bootstrap 4 cards the same height in card-columns?

由 萝らか妹 提交于 2019-11-26 12:20:12
问题 I am using Bootstrap 4 alpha 2 and taking advantage on cards. Specifically, I am working with this example taken from the official docs. As title says, how can I make all cards the same height? EDIT: All I can think by now is setting the following CSS rule: .card { min-height: 200px; } But that is just an hard coded solution that won\'t work in general case. The code in my view is the same as the one in the docs i.e: <div class=\"card-columns\"> <div class=\"card\"> <img class=\"card-img-top\
订阅 bootstrap-cards