I want a banner like this:
When it is displayed in mobile
When it is displayed in desktop
For that I tried:
.card-body {
display: flex;
}
#media(min-width:768px) {
.card-title {
font-size: 3vw;
word-break: break-all;
}
}
#media(max-width:767px) {
.card-title {
font-size: 8.5vw;
word-break: break-all;
}
}
<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">
<div class="shadow card col-md-3 ml-4 mt-3 mb-3 mr-4" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="90">
<h5 class="card-title float-right">9999999999</h5>
</div>
<div class="card-body col-12 border p-0">
Get Details
</div>
</div>
</div>
But in the code above, the text is aligned left, but I am using float-right.
Use margin-left: auto
.card-body {
display: flex;;
}
.card-title {
margin-left: auto;
}
h5 {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#media(min-width:768px) {
.card-title {
font-size: 3vw;
word-break: break-all;
}
}
#media(max-width:767px) {
.card-title {
font-size: 8.5vw;
word-break: break-all;
}
}
<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">
<div class="shadow card col-md-3 ml-4 mt-3 mb-3 mr-4" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="90">
<h5 class="card-title float-right">99999952341624624629999</h5>
</div>
<div class="card-body col-12 border p-0">
Get Details
</div>
</div>
</div>
You can achieve this with existing bootstrap-4 class changes
changes ml-4 to ml-sm-4 and add new class ml-auto to card-title div
<div class="shadow card col-md-3 ml-sm-4 mt-3 mb-3 mr-4" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="90">
<h5 class="card-title ml-auto">9999999999</h5>
</div>
<div class="card-body col-12 border p-0">
Get Details
</div>
</div>
</div>
Related
What I want to achieve is that my DIV element is not cut off by the Print option. I have used the code BREAK-INSIDE: AVOID code and it doesn't work, in the end my DIV ends up sliced in half.
HTML
<block-ui></block-ui>
<div class="content-wrapper container-xxl p-0">
<div class="content-body">
<div class="card">
<div class="row">
<div class="col-xl-9 col-md-8 col-12">
<div class="row m-1">
<div class="m-1 dont-break" *ngFor="let QRID of printData.results">
<div class="d-flex align-items-center flex-column"
style="width: 4.5cm; height: 8cm; max-width: 4.5cm; border: 1px dashed #000000; padding: .25cm;">
<h6 class="mb-0" style="font-size: 10px;">Name:</h6>
<h6 class="mb-30">{{ QRID.proyecto }}</h6>
<img [src]="QRID.foto" style="height: 3.5cm; width: 3.5cm; margin-bottom: 7px;">
<ngx-qrcode-styling [config]="config" [type]="'canvas'" [shape]="'square'" [width]="110" [height]="110"
[margin]="0" [data]="QRID.qr">
</ngx-qrcode-styling>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-4 col-12 invoice-actions mt-md-0 mt-2">
<div class="card">
<div class="card-body">
<a class="btn btn-outline-secondary btn-block mb-75" href="javascript:window.print();" rippleEffect>
Print
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#media print {
div.dont-break {
break-inside: avoid !important;
page-break-inside: avoid !important;
-webkit-break-inside: avoid !important;
}
}
May I ask how to fix this? I need the second container to be at the bottom of the first container, and I do not know how to solve it. I have used display: flex but it seems it does not feel right and applicable in two containers, that is why I am having a trouble on how to fix it:
https://jsfiddle.net/0nv2oLqy/1/
.content {
display: flex;
}
aside {
border-right: 1px solid #000000;
}
aside {
height: 100vh;
width: 350px;
}
aside ul {
padding-top: 5%;
list-style-type: none;
text-align: center;
}
aside a {
text-decoration: none;
display: block;
font-size: 23px;
color: black;
margin: 40px;
font-family: $font1;
font-weight: lighter;
}
aside a:hover {
color: $color1;
}
.first {
margin: 50px;
}
.first a {
background-color: #ebe0dd;
padding: 4px;
}
.line {
padding: 8px;
border-bottom: 1px solid $color5;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<div class="content">
<aside class="d-none d-md-block">
<ul>
<li class="first">All</li>
<li>To Pay</li>
<li>To Ship</li>
<li>To Receive</li>
<li>Completed</li>
<li>Cancelled</li>
</ul>
</aside>
<div class="container-fluid p-3 m-5 item1" height="20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
<div class="container-fluid p-3 m-5 item2" height="20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
</div>
Just wrap them inside a new div
.content {
display:flex;
}
aside {
border-right: 1px solid #000000;
}
aside {
height: 100vh;
width: 350px;
}
aside ul {
padding-top: 5%;
list-style-type: none;
text-align: center;
}
aside a {
text-decoration: none;
display: block;
font-size: 23px;
color: black;
margin: 40px;
font-family: $font1;
font-weight: lighter;
}
aside a:hover {
color: $color1;
}
.first {
margin: 50px;
}
.first a {
background-color: #ebe0dd;
padding: 4px;
}
.line {
padding: 8px;
border-bottom: 1px solid $color5;
}
.rightDiv {
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--Link for Font awesome icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/styles/try.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
</head>
<body>
<div class = "content">
<aside class = "d-none d-md-block">
<ul>
<li class = "first">All</li>
<li>To Pay</li>
<li>To Ship</li>
<li>To Receive</li>
<li>Completed</li>
<li>Cancelled</li>
</ul>
</aside>
<div class='rightDiv'>
<div class="container-fluid p-3 item1" height = "20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
<div class="container-fluid p-3 item2" height = "20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
keep that .content {display: flex} but try to add a new container for that two price column or that two container you mentioned in question and then add this ruleset .your-class { display:flex; flex-direction: column; }
How can I make the hover to be equal in size despite the line difference in the paragraph? As of now the size of my hover in 'content' class is different since my p.../p in the second and third card is different in the first and fourth card. Is there a way to make my hover size to be equal in all cards? Please see below codes. Thank you
.card .content {
width: 100%;
background: #fff;
opacity: 0.65;
position: absolute;
bottom: -60%;
margin-left: -4px;
transition: all ease 0.5s;
border-radius: 4px;
box-shadow: 0px -3px 4px rgba(10, 10, 10, 0.09)
}
.card .content .category {
font-size: 17px;
font-weight: 600
}
.card .content .price {
font-size: 17px;
font-weight: 500;
color: #0d6efd
}
.card .content p {
font-weight: 500;
font-size: 12px;
text-align: center;
}
.card:hover .content {
bottom: 0%
}
.buttons button {
border-radius: 1px;
margin-bottom: 10px;
transition: all ease 0.3s
}
.content {
padding: 10px
}
hr {
border: 0;
height: 1px;
width: 60%;
position: relative;
margin: 15px auto;
}
.d-flex {
font-weight: 500;
font-size: 12px;
margin: 15px auto;
}
.fa-play-circle {
padding-right: 4px;
padding-top: 3px;
}
<body>
<div id="image">
<div class="row">
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-img-wrapper ">
<img src="assets\image_1.jpg" alt="">
<div class="content">
<hr>
<p>Get out your <br> Lederhosen!</p>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GARY GARI</h3>
</div>
<div class="card-img-wrapper ">
<img src="assets\image_2.jpg" alt="">
<div class="content">
<hr>
<p>The delicious <br> headquarters for all <br> your ginger related <br> needs!</p>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>IL PIATTO</h3>
</div>
<div class="card-img-wrapper ">
<img src="assets\image_3.jpg" alt="">
<div class="content">
<hr>
<p>Got wild finicky kids? <br> Head for Il Piatto for <br> kid-friendly Italian <br> Fun!</p>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>PIERRE PLATTERS</h3>
</div>
<div class="card-img-wrapper ">
<img src="assets\image_4.jpg" alt="">
<div class="content">
<hr>
<p>Smart talks, Smart <br> eats!</p>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
enclosed your <p></P> in content class inside a div give one custom class para and other bootstrap flex classes to justify and align center
and given css to .content
height: 280px !important;
and given css to .content .para
.content .para{ height: 100px !important; }
.card .content {
width: 100%;
background: #fff;
opacity: 0.65;
position: absolute;
bottom: -60%;
margin-left: -4px;
transition: all ease 0.5s;
border-radius: 4px;
box-shadow: 0px -3px 4px rgba(10, 10, 10, 0.09)
}
.card .content .category {
font-size: 17px;
font-weight: 600
}
.card .content .price {
font-size: 17px;
font-weight: 500;
color: #0d6efd
}
.card .content p {
font-weight: 500;
font-size: 12px;
text-align: center;
}
.card:hover .content {
bottom: 0%
}
.buttons button {
border-radius: 1px;
margin-bottom: 10px;
transition: all ease 0.3s
}
.content {
height: 280px !important;
padding: 10px;
}
.content .para {
height: 100px !important;
}
hr {
border: 0;
height: 1px;
width: 60%;
position: relative;
margin: 15px auto;
}
.d-flex {
font-weight: 500;
font-size: 12px;
margin: 15px auto;
}
.fa-play-circle {
padding-right: 4px;
padding-top: 3px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div id="image">
<div class="row">
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-img-wrapper ">
<img src="images/2.jpg" class="img-fluid" alt="">
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Get out your <br> Lederhosen!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GARY GARI</h3>
</div>
<div class="card-img-wrapper ">
<img src="images/3.jpg" class="img-fluid" alt="">
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>The delicious <br> headquarters for all <br> your ginger related <br> needs!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>IL PIATTO</h3>
</div>
<div class="card-img-wrapper ">
<img src="images/4.jpg" class="img-fluid" alt="">
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Got wild finicky kids? <br> Head for Il Piatto for <br> kid-friendly Italian <br> Fun!
</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>PIERRE PLATTERS</h3>
</div>
<div class="card-img-wrapper ">
<img src="images/2.jpg" class="img-fluid" alt="">
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Smart talks, Smart <br> eats!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js"></script>
Try this code in browser to see
enclosed your <p></P> in content class inside a div give one custom class para and other bootstrap flex classes to justify and align center
and given css to .content
height: 280px !important;
and given css to .content .para
.content .para{ height: 100px !important; }
and in card img used class img-fluid
.card .content {
width: 100%;
background: #fff;
opacity: 0.65;
position: absolute;
bottom: -60%;
margin-left: -4px;
transition: all ease 0.5s;
border-radius: 4px;
box-shadow: 0px -3px 4px rgba(10, 10, 10, 0.09)
}
.card .content .category {
font-size: 17px;
font-weight: 600
}
.card .content .price {
font-size: 17px;
font-weight: 500;
color: #0d6efd
}
.card .content p {
font-weight: 500;
font-size: 12px;
text-align: center;
}
.card:hover .content {
bottom: 0%
}
.buttons button {
border-radius: 1px;
margin-bottom: 10px;
transition: all ease 0.3s
}
.content {
height: 280px !important;
padding: 10px;
}
.content .para {
height: 100px !important;
}
hr {
border: 0;
height: 1px;
width: 60%;
position: relative;
margin: 15px auto;
}
.d-flex {
font-weight: 500;
font-size: 12px;
margin: 15px auto;
}
.fa-play-circle {
padding-right: 4px;
padding-top: 3px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div id="image">
<div class="row">
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-img-wrapper ">
<img src="assets\image_1.jpg" class="img-fluid" alt="">
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Get out your <br> Lederhosen!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GARY GARI</h3>
</div>
<div class="card-img-wrapper ">
<img src="assets\image_2.jpg" class="img-fluid" alt="">
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>The delicious <br> headquarters for all <br> your ginger related <br> needs!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>IL PIATTO</h3>
</div>
<div class="card-img-wrapper ">
<img src="assets\image_3.jpg" class="img-fluid" alt="">
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Got wild finicky kids? <br> Head for Il Piatto for <br> kid-friendly Italian <br> Fun!
</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>PIERRE PLATTERS</h3>
</div>
<div class="card-img-wrapper ">
<img src="assets\image_4.jpg" class="img-fluid" alt="">
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Smart talks, Smart <br> eats!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js"></script>
The numbers are going to the next line, how to adjust them to come in the same line without changing others size?
Run the below script in full screen:
.card-body {
display: flex;
}
.card-title {
margin-left: auto;
font-family: 'Yatra One', cursive;
}
#media(min-width:768px) {
.card-title {
font-size: 3vw;
word-break: break-all;
}
}
#media(max-width:767px) {
.card-title {
font-size: 10vw;
word-break: break-all;
}
}
.col-10 {
height: 65px;
}
.col-2 {
height: 65px;
}
.img-fluid {
height: 100%!important;
}
<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">
<link href="https://fonts.googleapis.com/css?family=Yatra+One&display=swap" rel="stylesheet">
<div class="row">
<div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="100">
<h5 class="card-title float-right">9700005243</h5>
</div>
<div class="card-body col-12 border p-0">
Get Details
</div>
</div>
</div>
<div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="100">
<h5 class="card-title float-right">9700005243</h5>
</div>
<div class="card-body col-12 border p-0">
Get Details
</div>
</div>
</div>
<div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="100">
<h5 class="card-title float-right">9700005218</h5>
</div>
<div class="card-body col-12 border p-0">
Get Details
</div>
</div>
</div>
<div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="100">
<h5 class="card-title float-right">9700005218</h5>
</div>
<div class="card-body col-12 border p-0">
Get Details
</div>
</div>
</div>
<div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="100">
<h5 class="card-title float-right">9700005218</h5>
</div>
<div class="card-body col-12 border p-0">
Get Details
</div>
</div>
</div>
<div class="shadow-self card col-md-3 ml-4 mt-3 mb-3 mr-4 border-0" style="background-color: #F0E78C">
<div class="row">
<div class="card-body col-12 border p-0">
<img src="https://i.imgur.com/ZyROdEa.png" width="100">
<h5 class="card-title float-right">1111111111</h5>
</div>
<div class="card-body col-12 border p-0">
Get Details
</div>
</div>
</div>
</div>
The numbers are going to the next line, how to adjust them to come in the same line without changing others size?
Also how to display numbers in the middle? (same space in top and bottom)
By default Boostrap wrote word-break: break-all; Changed to word-break: keep-all;
Read this
word-break w3 school
#media (min-width: 768px)
.card-title {
font-size: 3vw;
word-break: keep-all !important;
}
You can add margin: auto to center them and white-space: nowrap to prevent them from wrapping to the next line. Also, I'd suggest making font a bit smaller when resizing screen and/or making blocks bigger.
In case you want them to be absolutely centered and you don't care about overlapping the image, give them:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
I'm trying to list side by side an anime list with images and name on a card, but the DIV ends and the image ignores and continues, how can I solve this?
URL: Here
Image: The image
css:
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
min-width: 199px;
max-width: 200px;
float:left;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left:5px;
margin-top:10px;
}
HTML:
<div class="container">
<div class="card">
<button class="btn btn-success add" onclick="novoEpisodio(85)"><span class="fa fa-plus"></span> Adicionar Episódio</button>
<img onclick="escolherAnime(85)" src="https://4.bp.blogspot.com/-TYMOypUwSGI/WcqOASxepZI/AAAAAAAAK2w/-_V0RHPcEj8d0IO79AyUf2oUFTRRa3TjgCLcBGAs/s1600/Black-Clover-anime-poster-visual-v1.jpg" style="min-width:199px; max-width:200px; min-height:299px; max-height: 300px;">
<div class="container">
<h4><b>Black Clover</b>
</h4>
</div>
</div>
First of all, you're site's Bootstrap version is out of date with the HTML syntax you're using. Cards replaced panels from Bootstrap 3. You're using Bootstrap 3, view here which uses panels.
A lot of things changed between Bootstrap 3 and 4. I highly recommend you go with Bootstrap 4. Additionally, your HTML syntax doesn't line up with the traditional layout.
container > row > column > card
Here is a Codepen you can fork and play with.
Here is an example of what you need using Bootstrap 4.
/* Roboto Font */
#import url('https://fonts.googleapis.com/css?family=Roboto');
html, body {
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
}
/* Custom CSS */
.text-strong {
font-weight: bold;
}
.card-body {
padding: .5rem;
}
.card-title {
margin: 0;
}
.card {
border: 2px dashed black;
box-shadow: 0px 10px 20px rgba(150,150,150,.5);
}
.card:hover {
box-shadow: 0px 10px 20px rgba(60, 141, 188,0.5);
}
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js'></script>
<div class="container-fluid p-5">
<div class="row no-gutters">
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Bleach</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Black Clover</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Boku dake ga in...</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Dragon Ball Super</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Nanatsu no Taizai</h5>
</div>
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-2 d-flex align-items-stretch mb-2">
<div class="card">
<img class="card-img-top" src="https://www.anitube.site/wp-content/uploads/Bleach-dub.jpg">
<div class="card-body">
<h5 class="card-title text-strong">Naruto Shippuden</h5>
</div>
</div>
</div>
</div>
</div>