I have div like this:
<div class="card">
<div class="text-center" style="background-image: url('/public/images/nano.jpg');width:100%;height:100%;height: 115px;background-size: cover;background-repeat: no-repeat;">
<span class="styleRankingBlue px-2 text-white"></span>
</div>
<div class="card-img-overlay text-center d-flex flex-column justify-content-center">
<p class="card-text mb-0 pt-1">
<b>
</b>
</p>
</p>
<p class="card-text mb-0">
</p>
</div>
</div>
So I tried adding width:100%;height:100%; to the background image but it loads like this:
And if I say height: 115px; this will happen:
However I need to load it like this:
[![enter image description here][3]][3]
So how to properly do this with CSS?
Play with the height and width inside your img tag
<img src="https://i.stack.imgur.com/pdNEU.jpg" height="307px" width="309px">
Related
i have image and text like this image
When width logo image is correct Text is center , its is work
But when i have image box shape like bellow
TEXT not center, how to fixed text center without deppends image width ??
this is my code..
<div class="row">
<div class="col-12 mb4" style="display: flex; display: -webkit-box;margin-top:30px; ">
<th><img style="max-width: 100%; height: auto;" t-att-src="'data:image/png;base64,%s' % to_text(logo)"/></th>
<h4 style="margin-top:60px;margin-left:140px;font-size:40px;font-weight:bold;width:600px;text-align:center;"><th><span t-esc="nama_ou"/></th> </h4>
<!-- <h4 style="max-width:450px;margin-left:500px;overflow-wrap: break-word;font-size:30px;"> <th><span t-esc="operating_unit"/></th> </h4> -->
</div>
<div class="col-9 text-right" style="margin-top:22px;" name="moto"/>
</div>
Plis help, i stack about this, Thanks
You need to change in your html structure. Use below html and check it.
<div class="row">
<div class="col-12 mb4" style="display: flex; display: -webkit-box;margin-top:30px; ">
<div><img style="max-width: 100%; height: auto;" t-att-src="'data:image/png;base64,%s' % to_text(logo)"></div>
<h4 style="margin-top:60px;margin-left:140px;font-size:40px;font-weight:bold;width:600px;text-align:center;">
<span t-esc="nama_ou">
</h4>
<!-- <h4 style="max-width:450px;margin-left:500px;overflow-wrap: break-word;font-size:30px;"> <th><span t-esc="operating_unit"></th> </h4> -->
</div>
<div class="col-9 text-right" style="margin-top:22px;" name="moto"></div>
</div>
I am currently using bootstrap 4 for the cards. I would like to add a numbering beside my card. which is show in the image below.
I tried adding padding-top on the span text the same goes with the assigned col of the span text but the card beside it is adjusting as well. Can anyone help me with this one?
I want the numbering to be at the horizontal range of the card either at the top or at the middle, as you can see it's above the card.
<div class="container">
<div class="col-sm-2">
<span style="display:inline-block; padding-top: 15px;" >1</span>
</div>
<div class="col-sm-12">
<div class="card h-100" style="width: 15rem;">
<div>
<a class="fancybox" href="admin/files/Images/flutterfest.png">
<img class="card-img-top" src="admin/files/Images/flutterfest.png">
</a>
</div>
<div class="card-body">
<h5 class="card-title text-center">Library Management System</h5>
<p class="card-text">Date added: <span>May 23, 2021</span></p>
</div>
</div>
</div>
</div>
give column classes as col-sm-2 and col-sm-10. there are 12 columns max you can create in bootstrap. So you have given col-sm-12 to second div thats why it is going to next line
<div class="col-sm-2">
<span style="display:inline-block; padding-top: 15px;" >1</span>
</div>
<div class="col-sm-10">
I have been trying to make this layout even. How can I have a vertical equidistance between the text and have them contained in the card.
Here is the html code:
<div class="card text-center">
<p class="card-title"><small class="text-muted">Societal</small></p>
<div class="card-body">
<small class="card-text">Large involontary migration</small>
<div class="card-footer">
<small class="text-muted">10.5%</small>
</div>
</div>
</div>
Thanks
There are a few options for achieving this listed in the bootstrap documentation.
Bootstrap Website
I chose a slightly different card variation from bootstrap v4.5.
You can play around with the padding and margins to get it exactly how you'd like.
<div class="container">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title text-danger text-center mb-0 pb-0">Societal</h5>
<p class="card-text text-center mb-0 pb-0"><strong>Large-scale involontary migration</strong></p>
<p class="text-danger text-center">10.5%</p>
</div>
</div>
</div>
.card-body {
border: 20px solid #b19cd9;
}
code output
Code snippet
So I have this card with a div inside it. And the idea is that I want to show a icon to the left and then a text to the right of the icon indicating a username can be up to 32 characters long.
<div>
<h5 class="d-inline"><i class="icofont icofont-social-snapchat"></i></h5>
<p class="d-inline">rwmGhw9El8cBMeyvzQ18fmZP2EbLaQhY</p>
</div>
The issue is that when I start shrinking the page, the text gets places under the icon and it starts going outside of the card.
I'm actually not sure to why this happens or what the best way to fix this is.
How do I properly deal with something like this? Would adding ellipsis be a good idea?
Here is the markup for the card
<div class="col-xl-4 px-2">
<div class="card card-with-border mt-5 ">
<div class="card-body mb-0">
#foreach (var item in user.Tags)
{
<span class="badge badge-primary mt-3 ml-0">#item</span>
}
</div>
<div class="card-body socialprofile filter-cards-view pt-2">
<div class="media">
<div class="avatar ratio"><img class="b-r-8 height-50 mr-3 img-80" src=#user.Image alt="#"></div>
<div class="media-body">
<h6 class="font-danger f-w-600">Hello, World!</h6>
<div>
<h5 class="d-inline"><i class="icofont icofont-social-snapchat"></i></h5>
<p class="d-inline">rwmGhw9El8cBMeyvzQ18fmZP2EbLaQhY</p>
</div>
<span class="card-text"><h5><i class="icofont icofont-social-instagram"></i></h5><p></p></span>
<p class="card-text mt-2">Testing the text lets see what it looks like.</p>
</div>
</div>
<div class="social-btngroup d-flex">
<button class="btn btn-primary w-100">Like</button>
</div>
<div class="likes-profile text-center">
<h5> <span> <i class="fa fa-heart font-danger"></i> 884</span></h5>
</div>
</div>
</div>
</div>
Your element need to be in display: block or display: inline-block.
/* Limit size of media-body */
.media-body {
max-width: calc(100% - 2rem);
}
.ellipsis {
display: block !important;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div>
<h5 class="d-inline"><i class="icofont icofont-social-snapchat"></i></h5>
<!-- Add the class ellipsis where you want -->
<p class="d-inline ellipsis">rwmGhw9El8cBMeyvzQ18fmZP2EbLaQhY</p>
</div>
I've been trying to have two span elements, one with Bootstrap 4 class 'close' and the other with class 'badge', floated right. The thing is if I add float-right to the badge, they always end up right next to each other. Or, if I use clear: right, the badge falls to the end of the div.
This needs to be my outline:
Here's the HTML I have so far:
<div class="card">
<div class="card-header">
<span class="close">x</span>
<img src="image.png">
<h1 class="card-title d-inline">Title</h1>
<span class="badge badge-default d-inline">Badge</span>
<h2 class="card-subtitle">Subtitle</h2>
</div>
</div>
How can I achieve that with Bootstrap 4? Thank you!
You can use margin or padding (spacing utils) around the badge..
http://www.codeply.com/go/XEbOw2F29d
<div class="card">
<div class="card-header">
<span class="close">x</span>
<span class="badge badge-default float-right m-2">Badge</span>
<img src="//placehold.it/40">
<h1 class="card-title d-inline">Title</h1>
<h2 class="card-subtitle">Subtitle</h2>
</div>
</div>
EDIT
If you're looking for something like shown in your image, it's not a simple matter of float-right. You'll need to use the spacing utils to adjust the elements..
<div class="card">
<div class="card-header pt-0">
<div class="w-100 text-right close">x</div>
<img src="//placehold.it/60" class="float-left mt-2 mr-2">
<span class="badge badge-default float-right mt-2">Badge</span>
<h1 class="card-title my-0"> Title</h1>
<h2 class="card-subtitle d-inline-block">Subtitle</h2>
</div>
</div>
http://www.codeply.com/go/XEbOw2F29d
Why don't you try creating a new div and putting inside "Close" and "Badge"? Then you only need to float the div to the right.
Tell me if it works! 😉