I am trying to create 3 simple image cards with captions in Bootstrap 4, but no matter how I attempt to do it, the image within the card takes up the entire card, covering the caption below it.
The cards should look just like the example as I am using the same code, just putting it in a row. The card text is there, but it is directly beneath the image. How can I get the card to be longer so that the images stay at the top and reveal the text below?
Here's Bootstrap's example card:
And here's what mine look like:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://imgur.com/n5SWWmR" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://imgur.com/n5SWWmR" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://imgur.com/n5SWWmR" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
Looks good to me.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://i.imgur.com/n5SWWmR.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://i.imgur.com/n5SWWmR.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md">
<div class="card" style="width: 17rem;">
<img src="https://i.imgur.com/n5SWWmR.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
Related
I have the following code and html (boostrap enabled) page which simply displays three bootstrap cards with images on the page.
I want
a) A margin from the left hand side to be included
b) The cards to display horizontally (across the screen one after the other) rather than vertically.
I have tried various things but to no avail. Could someone with a clear explanation for a beginner explain how to achieve these things.
Full code
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<h1>Website</h1>
<h2>Site with multiple horizontal cards</h2>
<!-- card 1-->
<div class="card" style="width: 14rem;">
<img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...>
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<!-- card 2-->
<div class="card" style="width: 14rem;">
<img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...>
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<!-- card 3-->
<div class="card" style="width: 14rem;">
<img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...>
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
Trinket
https://trinket.io/html/8fcb4c4f39?runMode=autorun
Current Display
Update:
I have understood that I could start again and try and implement everything inside this structure
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
But for teaching purposes, is there an easy way to just add to what I have to achieve the result and thereby teach the principles of what is being done.
Here is the code I modified from your posted Trinket Link
Make sure you read bootstrap documentation from official website or any tutorial about 12 grid system in bootstrap.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<h1>Website</h1>
<h2>Site with multiple horizontal cards</h2>
<div class="container">
<div class="row">
<!-- card 1-->
<div class="col-4">
<div class="card" style="width: 14rem;">
<img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<!-- card 2-->
<div class="col-4">
<div class="card" style="width: 14rem;">
<img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<!-- card 3-->
<div class="col-4">
<div class="card" style="width: 14rem;">
<img src="https://cdn5.vectorstock.com/i/1000x1000/23/24/ladybug-insect-small-icon-animal-vector-19752324.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
Changes
Currently i am working on a eCommerce site (i am newbie).
i am using bootstrap for basic styling.
the structure is given below.
The div Of class "nl-row" is dynamic.depending upon the no of items in the db it will increase.
so i am trying to dynamically center the divs in a ".container" div.
the "nl-row" is given the width of 300px, so if the ".container" had the width of 1000px, there should be 3 "nl-row" in a row and if the ".container" had the width of 700px there should be 2 "nl-row" in a row and should center themselves in the row.
-Please help Me with this issue.
<div id="nl-container-1" class="nl-container">
<div class="nl-row">
<div class="card" style="width: 18rem;">
<img src="img/250x180.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="nl-row">
<div class="card" style="width: 18rem;">
<img src="img/250x180.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="nl-row">
<div class="card" style="width: 18rem;">
<img src="img/250x180.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
For the parent use (display:flex;justify-content:center)for the children use :width 300px)
I am currently trying to learn and test bootstrap 4. I was trying to create cards but images wont show for them. I only have one image in the first card at this moment but the point is the image still wont render. Below is my code pen linked to view what I have written. Thank you for any help in advance
Code Pen: https://codepen.io/cody-blackwood/pen/ZVaMyo
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel = "stylesheet" href = "/stylesheets/main.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1 class="display-2 text-info ">Projects</h1>
<div class="row">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://imgur.com/gallery/A8eQsll" alt="">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</body>
</html>
Your image tag sources aren't pointing to actual image files. See the code example below:
<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel = "stylesheet" href = "/stylesheets/main.css">
</head>
<body>
<div class="container">
<h1 class="display-2 text-info ">Projects</h1>
<div class="row">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://i.imgur.com/A8eQsll.jpg" alt="">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="https://i.imgur.com/A8eQsll.jpg" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="https://i.imgur.com/A8eQsll.jpg" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="https://i.imgur.com/A8eQsll.jpg" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</body>
</html>
In my simple design I use cards to show some products. However some product titles wrap 2 lines while others wrap only 1 line.
I would like to have the body text vertically aligned (and the price buttons too)..
<div class="container">
<div class="row">
<div class="col-12">
<div class="card-group">
<div class="card text-center" >
<img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/1/4/7/9/9200000037279741.jpg" height="200px" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">AKRACING Nitro Gaming Racestoel - Wit</h5>
<p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
€ 279,-
</div>
</div>
<div class="card text-center" >
<img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/2/4/2/4/9200000076564242.jpg" height="200px" width="25%" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">MSI Gaming GS Rugzak</h5>
<p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
€ 151,-
</div>
</div>
<div class="card text-center" >
<img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/3/2/4/9/9200000088829423.jpg" height="200px" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">DJI Mavic Air Onyx Zwart - Drone</h5>
<p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
€ 753,91
</div>
</div>
<div class="card text-center" >
<img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/1/7/0/9/9200000063589071.jpg" height="200px" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">BenQ TH683 - Full HD Beamer</h5>
<p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
€ 589,-
</div>
</div>
</div>
</div>
</div>
</div>
working code snippet can be found here: https://www.codeply.com/go/zzm764UnFU
edit added code also inline
As #Paulie_D mentioned there's really no simple way to align the items within the cards since those items have different parent cards.
The best you can do is push the buttons and descriptions to the bottom (using mt-auto) so that the buttons align to the bottom...
<div class="card text-center">
<img class="card-img-top mx-auto d-block" style="max-width: 100%;">
<div class="card-body d-flex flex-column align-items-center">
<h5 class="card-title">AKRACING Nitro Gaming Racestoel - Wit</h5>
<p class="mt-auto">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
€ 279,-
</div>
</div>
https://www.codeply.com/go/vQPUwL7GLY
I am using Bootstrap 4 Beta to set up a series of cards that must look like following layout:
As the second image at the bottom depicts, I am having issues to make the cards in the middle column responsive to the height of the parent container. As you can see, the bootstrap card body of the 2 little cards at the top disappear and the image in the card at the bottom stretch by itself. I don't know what I am doing wrong. I would appreciate any help:
My code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="./assets/hands.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-md-4 flex-column flex-wrap">
<div class="d-inline-flex h-50 ">
<div class="card w-50">
<img class="card-img-top" src="./assets/hands.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card w-50">
<img class="card-img-top" src="./assets/hands.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="d-flex flex-column h-50">
<div class="card align-self-stretch">
<img class="card-img-top" src="./assets/hands.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top img-fluid " src="./assets/hands.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
Style:
.col-md-4{
max-height: 357px;
}
See jsfiddle in Here