How can I fix my cards to be responsive using bootstrap?How to horizontally center a <div>?How to make div not larger than its contents?How can I know which radio button is selected via jQuery?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How to check whether a checkbox is checked in jQuery?How to make a div 100% height of the browser windowHow can I transition height: 0; to height: auto; using CSS?How to disable resizable property of textarea?How do I vertically center text with CSS?
Why did House of Representatives need to condemn Trumps Tweets?
Why would anyone ever invest in a cash-only etf?
How can I kill my goat?
Summoning A Technology Based Demon
Why is it considered acid rain with pH <5.6?
Nested keyval proper parsing
Wand of the War Mage spellcasting focus and bonus interaction with multiclassing
Why would the Apollo Lunar Module pressure dump (to space?) valve have a bacterial filter?
If Trump gets impeached, how long would Pence be president?
Finding the Maximum of a Continuous Function over a Closed Interval
How to include a table in the footnote environment
How to access HTML input values from Twig and vice versa
How many oliphaunts died in all of the Lord of the Rings battles?
Is this photo showing a woman standing in the nude before teenagers real?
ECDSA: Why is SigningKey shorter than VerifyingKey
Assuring luggage isn't lost with short layover
Why didn’t Christianity spread southwards from Ethiopia in the Middle Ages?
How to store my pliers and wire cutters on my desk?
8086 stack segment and avoiding overflow in interrupts
Struggling with cyclical dependancies in unit tests
When I cite content from a book, should I say "section 2.3.2.1 of book... " or "section 2.3.2.1 of `the` book ..."?
Irreducible factors of primitive permutation group representation
Do the books ever say oliphaunts aren’t elephants?
How likely is fragmentation on a table with 40000 products likely to affect performance
How can I fix my cards to be responsive using bootstrap?
How to horizontally center a <div>?How to make div not larger than its contents?How can I know which radio button is selected via jQuery?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How to check whether a checkbox is checked in jQuery?How to make a div 100% height of the browser windowHow can I transition height: 0; to height: auto; using CSS?How to disable resizable property of textarea?How do I vertically center text with CSS?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
1
I am having some issues to make bootstrap cards responsive to the width range of 460px to 700px. I would like to make them one under another using bootstrap command col-12 or col-sm-12 but they are not working.
<!--FEATURE-->
<div id="features" class="container-fluid features-container">
<h1 class="features">Features</h1>
<div class="card-deck">
<div class="card">
<img src="assets/images/user-images/gym-girl.jpg" class="card-img-top" alt="gym-girl">
<div class="card-body">
<h5 class="card-title">CARDIO</h5>
<p><strong class="price">$49.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="assets/images/user-images/gym-guy.jpg" class="card-img-top" alt="gym-guy">
<div class="card-body">
<h5 class="card-title">STRENGTH</h5>
<p><strong class="price">$24.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="assets/images/user-images/gym-team.jpg" class="card-img-top" alt="gym-team">
<div class="card-body">
<h5 class="card-title">PILATES</h5>
<p><strong class="price">$39.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>html css
edited Mar 26 at 21:06
FedeSc
1,15911 silver badges29 bronze badges
asked Mar 26 at 19:37
Elias PradoElias Prado
446 bronze badges
add a comment |
1
I am having some issues to make bootstrap cards responsive to the width range of 460px to 700px. I would like to make them one under another using bootstrap command col-12 or col-sm-12 but they are not working.
<!--FEATURE-->
<div id="features" class="container-fluid features-container">
<h1 class="features">Features</h1>
<div class="card-deck">
<div class="card">
<img src="assets/images/user-images/gym-girl.jpg" class="card-img-top" alt="gym-girl">
<div class="card-body">
<h5 class="card-title">CARDIO</h5>
<p><strong class="price">$49.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="assets/images/user-images/gym-guy.jpg" class="card-img-top" alt="gym-guy">
<div class="card-body">
<h5 class="card-title">STRENGTH</h5>
<p><strong class="price">$24.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="assets/images/user-images/gym-team.jpg" class="card-img-top" alt="gym-team">
<div class="card-body">
<h5 class="card-title">PILATES</h5>
<p><strong class="price">$39.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>html css
edited Mar 26 at 21:06
FedeSc
1,15911 silver badges29 bronze badges
asked Mar 26 at 19:37
Elias PradoElias Prado
446 bronze badges
add a comment |
1
1
1
I am having some issues to make bootstrap cards responsive to the width range of 460px to 700px. I would like to make them one under another using bootstrap command col-12 or col-sm-12 but they are not working.
<!--FEATURE-->
<div id="features" class="container-fluid features-container">
<h1 class="features">Features</h1>
<div class="card-deck">
<div class="card">
<img src="assets/images/user-images/gym-girl.jpg" class="card-img-top" alt="gym-girl">
<div class="card-body">
<h5 class="card-title">CARDIO</h5>
<p><strong class="price">$49.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="assets/images/user-images/gym-guy.jpg" class="card-img-top" alt="gym-guy">
<div class="card-body">
<h5 class="card-title">STRENGTH</h5>
<p><strong class="price">$24.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="assets/images/user-images/gym-team.jpg" class="card-img-top" alt="gym-team">
<div class="card-body">
<h5 class="card-title">PILATES</h5>
<p><strong class="price">$39.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>html css
edited Mar 26 at 21:06
FedeSc
1,15911 silver badges29 bronze badges
asked Mar 26 at 19:37
Elias PradoElias Prado
446 bronze badges
I am having some issues to make bootstrap cards responsive to the width range of 460px to 700px. I would like to make them one under another using bootstrap command col-12 or col-sm-12 but they are not working.
<!--FEATURE-->
<div id="features" class="container-fluid features-container">
<h1 class="features">Features</h1>
<div class="card-deck">
<div class="card">
<img src="assets/images/user-images/gym-girl.jpg" class="card-img-top" alt="gym-girl">
<div class="card-body">
<h5 class="card-title">CARDIO</h5>
<p><strong class="price">$49.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="assets/images/user-images/gym-guy.jpg" class="card-img-top" alt="gym-guy">
<div class="card-body">
<h5 class="card-title">STRENGTH</h5>
<p><strong class="price">$24.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="assets/images/user-images/gym-team.jpg" class="card-img-top" alt="gym-team">
<div class="card-body">
<h5 class="card-title">PILATES</h5>
<p><strong class="price">$39.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div><!--FEATURE-->
<div id="features" class="container-fluid features-container">
<h1 class="features">Features</h1>
<div class="card-deck">
<div class="card">
<img src="assets/images/user-images/gym-girl.jpg" class="card-img-top" alt="gym-girl">
<div class="card-body">
<h5 class="card-title">CARDIO</h5>
<p><strong class="price">$49.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="assets/images/user-images/gym-guy.jpg" class="card-img-top" alt="gym-guy">
<div class="card-body">
<h5 class="card-title">STRENGTH</h5>
<p><strong class="price">$24.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="assets/images/user-images/gym-team.jpg" class="card-img-top" alt="gym-team">
<div class="card-body">
<h5 class="card-title">PILATES</h5>
<p><strong class="price">$39.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div><!--FEATURE-->
<div id="features" class="container-fluid features-container">
<h1 class="features">Features</h1>
<div class="card-deck">
<div class="card">
<img src="assets/images/user-images/gym-girl.jpg" class="card-img-top" alt="gym-girl">
<div class="card-body">
<h5 class="card-title">CARDIO</h5>
<p><strong class="price">$49.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="assets/images/user-images/gym-guy.jpg" class="card-img-top" alt="gym-guy">
<div class="card-body">
<h5 class="card-title">STRENGTH</h5>
<p><strong class="price">$24.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="assets/images/user-images/gym-team.jpg" class="card-img-top" alt="gym-team">
<div class="card-body">
<h5 class="card-title">PILATES</h5>
<p><strong class="price">$39.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>html css
html css
edited Mar 26 at 21:06
FedeSc
1,15911 silver badges29 bronze badges
asked Mar 26 at 19:37
Elias PradoElias Prado
446 bronze badges
edited Mar 26 at 21:06
FedeSc
1,15911 silver badges29 bronze badges
asked Mar 26 at 19:37
Elias PradoElias Prado
446 bronze badges
edited Mar 26 at 21:06
FedeSc
1,15911 silver badges29 bronze badges
edited Mar 26 at 21:06
FedeSc
1,15911 silver badges29 bronze badges
edited Mar 26 at 21:06
FedeSc
1,15911 silver badges29 bronze badges
1,15911 silver badges29 bronze badges
asked Mar 26 at 19:37
Elias PradoElias Prado
446 bronze badges
asked Mar 26 at 19:37
Elias PradoElias Prado
446 bronze badges
asked Mar 26 at 19:37
Elias PradoElias Prado
446 bronze badges
446 bronze badges
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
I think the card class has some properties that may be interfering with the normal column break points. I've placed each card element within a div that contains the column classes, and I added the row class to the card-deck element. The snippet shows the row has 3 columns and then breaks to 1 column when smaller than 768px, which is the medium break point:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="features" class="container-fluid features-container">
<h1 class="features">Features</h1>
<div class="card-deck row">
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-girl.jpg" class="card-img-top" alt="gym-girl">
<div class="card-body">
<h5 class="card-title">CARDIO</h5>
<p><strong class="price">$49.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-guy.jpg" class="card-img-top" alt="gym-guy">
<div class="card-body">
<h5 class="card-title">STRENGTH</h5>
<p><strong class="price">$24.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-team.jpg" class="card-img-top" alt="gym-team">
<div class="card-body">
<h5 class="card-title">PILATES</h5>
<p><strong class="price">$39.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
<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>answered Mar 26 at 20:50
MichaelvEMichaelvE
2,0662 gold badges4 silver badges14 bronze badges
thank you very much. I was doing almost the same as you. However, I was setting the cols to the same place as the .card classes instead of wrapping and place them with another div. Cheers.
– Elias Prado
Mar 27 at 0:40
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55365050%2fhow-can-i-fix-my-cards-to-be-responsive-using-bootstrap%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I think the card class has some properties that may be interfering with the normal column break points. I've placed each card element within a div that contains the column classes, and I added the row class to the card-deck element. The snippet shows the row has 3 columns and then breaks to 1 column when smaller than 768px, which is the medium break point:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="features" class="container-fluid features-container">
<h1 class="features">Features</h1>
<div class="card-deck row">
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-girl.jpg" class="card-img-top" alt="gym-girl">
<div class="card-body">
<h5 class="card-title">CARDIO</h5>
<p><strong class="price">$49.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-guy.jpg" class="card-img-top" alt="gym-guy">
<div class="card-body">
<h5 class="card-title">STRENGTH</h5>
<p><strong class="price">$24.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-team.jpg" class="card-img-top" alt="gym-team">
<div class="card-body">
<h5 class="card-title">PILATES</h5>
<p><strong class="price">$39.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
<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>answered Mar 26 at 20:50
MichaelvEMichaelvE
2,0662 gold badges4 silver badges14 bronze badges
thank you very much. I was doing almost the same as you. However, I was setting the cols to the same place as the .card classes instead of wrapping and place them with another div. Cheers.
– Elias Prado
Mar 27 at 0:40
add a comment |
0
I think the card class has some properties that may be interfering with the normal column break points. I've placed each card element within a div that contains the column classes, and I added the row class to the card-deck element. The snippet shows the row has 3 columns and then breaks to 1 column when smaller than 768px, which is the medium break point:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="features" class="container-fluid features-container">
<h1 class="features">Features</h1>
<div class="card-deck row">
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-girl.jpg" class="card-img-top" alt="gym-girl">
<div class="card-body">
<h5 class="card-title">CARDIO</h5>
<p><strong class="price">$49.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-guy.jpg" class="card-img-top" alt="gym-guy">
<div class="card-body">
<h5 class="card-title">STRENGTH</h5>
<p><strong class="price">$24.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-team.jpg" class="card-img-top" alt="gym-team">
<div class="card-body">
<h5 class="card-title">PILATES</h5>
<p><strong class="price">$39.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
<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>answered Mar 26 at 20:50
MichaelvEMichaelvE
2,0662 gold badges4 silver badges14 bronze badges
thank you very much. I was doing almost the same as you. However, I was setting the cols to the same place as the .card classes instead of wrapping and place them with another div. Cheers.
– Elias Prado
Mar 27 at 0:40
add a comment |
0
0
0
I think the card class has some properties that may be interfering with the normal column break points. I've placed each card element within a div that contains the column classes, and I added the row class to the card-deck element. The snippet shows the row has 3 columns and then breaks to 1 column when smaller than 768px, which is the medium break point:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="features" class="container-fluid features-container">
<h1 class="features">Features</h1>
<div class="card-deck row">
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-girl.jpg" class="card-img-top" alt="gym-girl">
<div class="card-body">
<h5 class="card-title">CARDIO</h5>
<p><strong class="price">$49.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-guy.jpg" class="card-img-top" alt="gym-guy">
<div class="card-body">
<h5 class="card-title">STRENGTH</h5>
<p><strong class="price">$24.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-team.jpg" class="card-img-top" alt="gym-team">
<div class="card-body">
<h5 class="card-title">PILATES</h5>
<p><strong class="price">$39.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
<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>answered Mar 26 at 20:50
MichaelvEMichaelvE
2,0662 gold badges4 silver badges14 bronze badges
I think the card class has some properties that may be interfering with the normal column break points. I've placed each card element within a div that contains the column classes, and I added the row class to the card-deck element. The snippet shows the row has 3 columns and then breaks to 1 column when smaller than 768px, which is the medium break point:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="features" class="container-fluid features-container">
<h1 class="features">Features</h1>
<div class="card-deck row">
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-girl.jpg" class="card-img-top" alt="gym-girl">
<div class="card-body">
<h5 class="card-title">CARDIO</h5>
<p><strong class="price">$49.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-guy.jpg" class="card-img-top" alt="gym-guy">
<div class="card-body">
<h5 class="card-title">STRENGTH</h5>
<p><strong class="price">$24.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-team.jpg" class="card-img-top" alt="gym-team">
<div class="card-body">
<h5 class="card-title">PILATES</h5>
<p><strong class="price">$39.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
<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><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="features" class="container-fluid features-container">
<h1 class="features">Features</h1>
<div class="card-deck row">
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-girl.jpg" class="card-img-top" alt="gym-girl">
<div class="card-body">
<h5 class="card-title">CARDIO</h5>
<p><strong class="price">$49.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-guy.jpg" class="card-img-top" alt="gym-guy">
<div class="card-body">
<h5 class="card-title">STRENGTH</h5>
<p><strong class="price">$24.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-team.jpg" class="card-img-top" alt="gym-team">
<div class="card-body">
<h5 class="card-title">PILATES</h5>
<p><strong class="price">$39.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
<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><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="features" class="container-fluid features-container">
<h1 class="features">Features</h1>
<div class="card-deck row">
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-girl.jpg" class="card-img-top" alt="gym-girl">
<div class="card-body">
<h5 class="card-title">CARDIO</h5>
<p><strong class="price">$49.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-guy.jpg" class="card-img-top" alt="gym-guy">
<div class="card-body">
<h5 class="card-title">STRENGTH</h5>
<p><strong class="price">$24.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<img src="assets/images/user-images/gym-team.jpg" class="card-img-top" alt="gym-team">
<div class="card-body">
<h5 class="card-title">PILATES</h5>
<p><strong class="price">$39.99</strong>/Month</p>
<p class="card-text">Lorem ipsum dolor sit amet, regione viderer mel an, ex usu utinam prompta erroribus, ut fugit graeco regione qui. Et habemus dissentias sit, ea duis quidam sea, agam quando sit at..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
<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>answered Mar 26 at 20:50
MichaelvEMichaelvE
2,0662 gold badges4 silver badges14 bronze badges
answered Mar 26 at 20:50
MichaelvEMichaelvE
2,0662 gold badges4 silver badges14 bronze badges
answered Mar 26 at 20:50
MichaelvEMichaelvE
2,0662 gold badges4 silver badges14 bronze badges
answered Mar 26 at 20:50
MichaelvEMichaelvE
2,0662 gold badges4 silver badges14 bronze badges
2,0662 gold badges4 silver badges14 bronze badges
thank you very much. I was doing almost the same as you. However, I was setting the cols to the same place as the .card classes instead of wrapping and place them with another div. Cheers.
– Elias Prado
Mar 27 at 0:40
add a comment |
thank you very much. I was doing almost the same as you. However, I was setting the cols to the same place as the .card classes instead of wrapping and place them with another div. Cheers.
– Elias Prado
Mar 27 at 0:40
thank you very much. I was doing almost the same as you. However, I was setting the cols to the same place as the .card classes instead of wrapping and place them with another div. Cheers.
– Elias Prado
Mar 27 at 0:40
thank you very much. I was doing almost the same as you. However, I was setting the cols to the same place as the .card classes instead of wrapping and place them with another div. Cheers.
– Elias Prado
Mar 27 at 0:40
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55365050%2fhow-can-i-fix-my-cards-to-be-responsive-using-bootstrap%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
