I need to make something like this on the picture (this rectangle with an arrow between two cards, but also overlapping them)
Any ideas, I will be very grateful
You can change your code similar this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body style="background-color:#eeeeee;padding:25px;">
<div class="card-columns">
<div class="card" style="width:200;height:200px;border:none;padding-right:20px;padding-left:20px">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
</div>
</div>
<div class="card" style="width:800px;height:200px;position:relative;border:none;padding-right:20px;padding-left:20px">
<div style="width:60px;height:60px;background-color:#eeeeee;position:absolute;top:70px;left:-40px;text-align:center;line-height:60px;"><i class="fas fa-arrow-right" style="font-size:22px"></i></div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
https://jsfiddle.net/BahmanMD/7o983feq/3/
Related
I am trying to follow along on Colt Steele's course and for some reason, my cards will not show up. Anyone know why my cards won't show up? I'm trying to do three image overlay cards that are decked with equal spacing between each other by using some basic bootstrap add-ins but they won't even show up.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="app3.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
#header {
background-image: url("imgs/header.jpeg");
}
</style>
<title>Pattern</title>
</head>
<body>
<nav class="navbar bg-dark navbar-dark">
<div class="container">
Quarantine Pal
</div>
</nav>
<section id="header" class="jumbotron text-center">
<h1 class="display-3">Best 90s Anime</h1>
<p class="lead">Lorem ipsum</p>
Add to List
Vote
</section>
<div class="card-deck">
<div class="card">
<img src="https://dw9to29mmj727.cloudfront.net/properties/2016/432-SeriesThumbnails_SM__400x320.jpg" class="card-img-top" alt="Sailor Moon">
<div class="card-body">
<h5 class="card-title">Sailor Moon</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="https://dw9to29mmj727.cloudfront.net/properties/2016/15-SeriesThumbnailsAnime_INY_400x320.jpg" class="card-img-top" alt="Inuyasha">
<div class="card-body">
<h5 class="card-title">Inuyasha</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="https://store-images.s-microsoft.com/image/apps.39852.14455250034361967.824623c3-91b6-402f-9a68-c66bfac9bc20.7bfae929-5b2a-4efe-9639-5ffd1e2de297?mode=scale&q=90&h=720&w=1280&background=%23FFFFFF" class="card-img-top" alt="Dragon Ball Z">
<div class="card-body">
<h5 class="card-title">Dragon Ball Z</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
Can you help me do a css for this sample?
I want to display the card in 1 column when it's view on tablet devices,
and 2 column if it's view on desktop.
Sample
Thanks!
You should use Bootstrap's grid system here. I have attached a sample code with just two divs. This is for your better understanding. Before you proceed to cards, first play around with the grid system and make yourself wise in it. This is as simple as it looks. A bootstrap row is divided by equal 12 columns. They can be represented using- lg- large device, md- medium device, sm- small device and xs- extra small device.
col-lg-6 col-md-12 -This implies that, the DOM elements should take 6 columns of a row when it is in Desktop view and 12 columns when it is in Tablet view.
Make sure you learn how media queries work, then proceed with bootstrap's grid system. Hope it helps!.. Happy coding.!!
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
#div1{
background: #0ef;
}
#div2{
background: #fe0;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="row">
<div class="col-lg-6 col-md-12" id="div1">div 1</div>
<div class="col-lg-6 col-md-12" id="div2">div 2</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Grid system - bootstrap 4
https://getbootstrap.com/docs/4.3/layout/grid/
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
It would be pretty simple using css grid.
Let’s say you have 4 divs. Put those in a container. Set that container to:
container {
display: grid;
grid-template-columns: auto auto;
}
This sets 2 automatically scaled columns normally.
and then set a media query for your selected width of a tablet
#media (max-width: 500px) {
container {
grid-template-columns: auto;
}
}
This means up to 500px, there will only be one column. No one else used css grid so I thought it would be cool to show.
I might have mixed up columns and rows cause I’m dumb but yea that’s it. I suggest you learn about media queries, and css grid/flexgrid/bootstrap
I'm relatively new with frontend so having a bit of problem in organizing a layout using bootstrap 4. I'm trying to build a banner for the landing page. I've attached the desired layout look please check it out. Below is my code which is all messing up the layout and coming on top of another.
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-12">
<img src="assets/images/logo.png" alt="">
</div>
<div class="col-sm-12 ml-auto">
<h1 class="presentation-title">COMPANY NAME IN H1</h1>
<div class="fog-low">
<img src="assets/img/fog-low.png" alt="">
</div>
<div class="fog-low right">
<img src="assets/img/fog-low.png" alt="">
</div>
<h2 class="presentation-subtitle text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</h2>
</div>
</div>
</div>
You can fiddle around with this example and come up with idea on how to align and for logo set image size when u enter it inside the card view maybe <img src="picname.jpg" alt="pic description" width="150" height="150"> to force resize so image don't break the view. Good Luck.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="row" style="margin:10px">
<div class="col-sm-4">
<div class="card" style="margin:10px">
<div class="card-body">
<h5 class="card-title">Logo</h5>
<p class="card-text">Can Add logo here</p>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="card" style="margin-bottom:10px">
<div class="card-body">
H1 HEADING
</div>
</div>
<div class="card">
<div class="card-body">
Small description in a paragraph.
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I'm in my beginning of Web development, and I built a simple HTML web page with bootstrap-4.
I want to display 2 card horizontally so the image card will be in the left to the text card. When the screen is small I want the image to be below the text card. But if the card in the left to the second card it automatically display above it.
My code is like that:
<div class="container">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Cranes_made_by_Origami_paper.jpg/220px-Cranes_made_by_Origami_paper.jpg" class="card-img-bottom" alt="...">
</div>
<div class="col-md-7">
<div class="card-body">
<p>The text card in the right to the image card.</p>
<p>In small page the text card below to the image card.<br>But I want to display it above the image card.</p>
</div>
</div>
</div>
</div>
</div>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Que</title>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Cranes_made_by_Origami_paper.jpg/220px-Cranes_made_by_Origami_paper.jpg" class="card-img-bottom" alt="...">
</div>
<div class="col-md-7">
<div class="card-body">
<p>The text card in the right to the image card.</p>
<p>In small page the text card below to the image card.<br>But I want to display it above the image card.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
The horizontal result is:
And the vertical result for small screen is:
I want to display the image in the bottom, below to the text card in small screens, but in the left in wide screens.
Thank you for your help!
Set order class order-1 ,order-2 and order-md-1, order-md-2 for changing position for desktop and mobile
Since Bootstrap 4 is flexbox, it's easy to change the order of
columns. The cols can be ordered from order-1 to order-12,
responsively such as order-md-12 order-2 (last on md, 2nd on xs)
relative to the parent .row, The responsive ordering classes are
order-first, order-last and order-0 - order-12.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Que</title>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-5 order-md-1 order-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Cranes_made_by_Origami_paper.jpg/220px-Cranes_made_by_Origami_paper.jpg" class="card-img-bottom" alt="...">
</div>
<div class="col-md-7 order-md-2 order-1">
<div class="card-body">
<p>The text card in the right to the image card.</p>
<p>In small page the text card below to the image card.<br>But I want to display it above the image card.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Scenario :
I have the following section which contain a card , when I click the card exapnds and shows the info (card-block) at the same time
Todo :
I want the width and height to increase,
Here is jsfiddle: http://jsfiddle.net/Mwanitete/5bwryt1g/3/
NOTE: it may not work in jsfidle but in my locahost works
HTML :
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-block">
card block
</div>
</div>
</div>
Current Scenario :
Right now t just expand and shows data but am not able to make the width and height increase.
What do I need to do get what I want?
Change Jquery.js order Above bootstrap.js
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
http://jsfiddle.net/5bwryt1g/8/