I want to put a div on the side of the cards, i tried to put a div on the cards <div class="col-lg-8"> and a col-lg-4 on the div that should float on the right of cards, but when i add the col-lg-8 and col-lg-4 the cards lose the inline layout, and the the div that should float on the right, does not appear.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="col-3">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<h4 class="card-title">Card title</h4>
</div>
</div>
<div class="col-3">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<h4 class="card-title">Card title</h4>
</div>
</div>
<div class="col-3">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<h4 class="card-title">Card title</h4>
</div>
</div>
<div class="col-3">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<h4 class="card-title">Card title</h4>
</div>
</div>
<div class="col-3">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<h4 class="card-title">Card title</h4>
</div>
</div>
<div class="col-3">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<h4 class="card-title">Card title</h4>
</div>
</div>
</div>
<div class="col-lg-4" style="background-color: blue">
</div>
</div>
</div>
How it should be:
Given block of code was
<div class="col-4">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<h4 class="card-title">Card title</h4>
</div>
</div>
In order to match the requirements, I added float-left class to <div class="col-4">.
The div to the right with blue background was also rendered.
Related
I want to place the two cards next to each other (horizontally) but currently they are vertically aligned. That is I want to place the Heading 1 card next to Heading 2 card even though I used some margin it shift only in the same place horizontally not vertically.
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heading 1</h5>
<p class="card-text">some text</p>
a button
</div>
</div>
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heading 2</h5>
<p class="card-text">some text</p>
a button
</div>
</div>
You can use Bootstrap’s grid to achieve this:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 d-flex justify-content-center">
<div class="card" style="width: 20rem;>
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heading 1</h5>
<p class="card-text">some text</p>
a button
</div>
</div>
</div>
<div class="col-sm-6 d-flex justify-content-center">
<div class="card" style="width: 20rem;>
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heading 2</h5>
<p class="card-text">some text</p>
a button
</div>
</div>
</div>
</div>
</div>
I want to have a a h5 "Posts" at left and the button "Btn" at right, however the "Btn" is not at right is at the left of the .col div, do you know how to proper position the button at right? With 'justify-content-end' is not working.
Also I want to have 4 cards with equal width in each row, but do you know why the cards appear so long? Is not possible that the card is more like a square and not a rectangle?
Example: http://jsfiddle.net/1b790tL5/
HTML:
<div class="container">
<div class="row">
<div class="col">
<h5 class="display-5 font-weight-bold text-dark">Posts</h5>
</div>
<div class="col justify-content-end">
Btn
</div>
</div>
</div>
<div class="container mt-4">
<div class="card-deck">
<div class="card p-0 shadow">
<img class="card-img-top border-bottom" src="https://via.placeholder.com/280" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-dark font-weight-bold">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content.</p>
</div>
</div>
<div class="card p-0 shadow">
<img class="card-img-top border-bottom" src="https://via.placeholder.com/280" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-dark font-weight-bold">Card title</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>
</div>
</div>
<div class="card p-0 shadow">
<img class="card-img-top border-bottom" src="https://via.placeholder.com/280" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-dark font-weight-bold">Card title</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>
</div>
</div>
<div class="card p-0 shadow">
<img class="card-img-top border-bottom" src="https://via.placeholder.com/280" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-dark font-weight-bold">Card title</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>
</div>
</div>
</div>
</div>
refer the image below. items take equal width when you use col class, in order to control the width add a number like col-1 to col-10 or 12 as per the framework.
I'm using bootstrap and I want to have 4 cards in a row ,each card occupying the same width. But with the code below is not working. Only 3 cards are appearing. It seems that the issue is because there is a lot of margin between each card. Do you know how to properly solve this issue?
Example: http://jsfiddle.net/h82w46Lz/1/
HTML::
<div class="container mt-4">
<div class="row">
<div class="col mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap">
<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>
Read
</div>
</div>
</div>
<div class="col mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap">
<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>
Read
</div>
</div>
</div>
<div class="col mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap">
<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>
Read
</div>
</div>
</div>
<div class="col mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap">
<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>
Read
</div>
</div>
</div>
<div class="col mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap">
<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>
Read
</div>
</div>
</div>
<div class="col mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap">
<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>
Read
</div>
</div>
</div>
<div class="col mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap">
<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>
Read
</div>
</div>
</div>
<div class="col mb-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="https://via.placeholder.com/286x180" alt="Card image cap">
<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>
Read
</div>
</div>
</div>
</div>
</div>
Close the row div for the first four cards and add "col-lg-3" class instead of "col" and do the same for the second four cards.
I am trying to put 4 cards in one row. When I put 2 cards, there is equal spacing. But when I put the third card in the same row, it overlaps the other despite using the same code. I tried changing the value to no avail. How do I go about resolving this without using custom css?
Try this
<div class="container-fluid">
<div class="row">
<div class="col-3">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
<div class="col-9">
<h4>Recently sold items</h4>
</div>
<div class="row">
<div clas="col-lg-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<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="col-lg-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<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="col-lg-3">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<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>
</div>
</div>
The first of the 3 card cols has a typo: clas= instead of class=.
https://www.codeply.com/go/fl6AA76Io0
<div class="container-fluid">
<div class="row">
<div class="col-3">
<ul class="list-group">
...
</ul>
</div>
<div class="col-9">
<h4>Recently sold items</h4>
<div class="row">
<div class="col-lg-3">
<div class="card">
..
</div>
</div>
<div class="col-lg-3">
<div class="card">
..
</div>
</div>
<div class="col-lg-3">
<div class="card">
..
</div>
</div>
<div class="col-lg-3">
<div class="card">
..
</div>
</div>
</div>
</div>
</div>
</div>
I have made a section with cards it works well on firefox chrome ie microsoft edge but it breaks on ie 11
on mozilla I get this result
and on ie11 I get this result
codepen link
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<section class="image2">
<div class="row no-margin no-padding">
<div class="col-md-6 col-lg-6 no-padding"><div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
<div class="card-img-overlay d-flex">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider 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></div>
<div class="col-md-6 col-lg-6 no-padding">
<div class="row no-margin no-padding">
<div class="col-md-6 col-lg-6 no-padding"><div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
<div class="card-img-overlay d-flex">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This </p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div></div>
<div class="col-md-6 col-lg-6 no-padding"><div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
<div class="card-img-overlay d-flex">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
</div>
</div>
</div></div>
<div class="col-md-6 col-lg-6 no-padding"><div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
<div class="card-img-overlay d-flex">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This </p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div></div>
<div class="col-md-6 col-lg-6 no-padding"><div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
<div class="card-img-overlay d-flex">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
</div>
</div>
</div></div>
</div>
</div>
</div>
</section>
Someone know why I have this pb on ie11 ?
Remove utility class d-flex from element with class .card-img-overlay
Remove utility class img-fluid from img element, you may create a new class and give it width:100% and height:100%
Note you are missing class .container as a parent which causing horizontal scrollbar to show.
img {width:100%; height:100%}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet" />
<section class="image2 container">
<div class="row no-margin no-padding">
<div class="col-md-6 col-lg-6 no-padding">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
<div class="card-img-overlay">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider 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>
</div>
<div class="col-md-6 col-lg-6 no-padding">
<div class="row no-margin no-padding">
<div class="col-md-6 col-lg-6 no-padding">
<div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
<div class="card-img-overlay">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This </p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 no-padding">
<div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
<div class="card-img-overlay">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 no-padding">
<div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
<div class="card-img-overlay">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This </p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 no-padding">
<div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
<div class="card-img-overlay">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>