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! 😉
Related
I have tried everything I can thing of. And searching Google has not turned up anything.
<div class="col-md-12">
<div class="card-header text-white" style="background-color:cornflowerblue">
<div class="col">
#if (User.Identity.IsAuthenticated && User.IsInRole("Admin"))
{
<a class="text-white float-right" asp-action="Edit" asp-route-id="#item.Id"><i class="bi bi-pencil-square"></i></a>
}
</div>
<div class="col">
<p class="card-text">
<h5 class="card-title">#item.Name</h5>
</p>
</div>
<p class="text-dark">#item.Price.ToString("c")</p>
</div>
</div>
<div class="col-md-6">
Basically what I want is for the bi-pencil-square to float to the right edge of the card header. I have tried Bootstrap float right and style="Margin-Right: 0px". I have tried setting styles on the a tag, on the enclosing div, and even on the i tag. Nothing works.
Does anyone have any suggestions?
I figured it out. I think the problem was that I should have put the 2 div's inside a row tag.
<div class="col-md-12">
<div class="card-header text-white" style="background-color:cornflowerblue">
<div class="row">
<div class="col-md-1 offset-11">
#if (User.Identity.IsAuthenticated && User.IsInRole("Admin"))
{
<a class="text-white" asp-action="Edit" asp-route-id="#item.Id"><i class="bi bi-pencil-square"></i></a>
}
</div>
<div class="col card-text">
<h5 class="card-title">#item.Name</h5>
</div>
</div>
<p class="text-dark">#item.Price.ToString("c")</p>
</div>
</div>
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">
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
I have the following html code to place an image next to div as in facebook comments:
<div className="row">
<div className="col-sm-1">
<img
className="img-thumbnail"
src="image.jpg" />
</div>
<div className="col-sm-11">
<div className="bg-light rounded p-1 pl-2">
<span className="font-weight-bold text-primary">content</span>
<div>
//buttons
</div>
</div>
</div>
</div>
However, this use of grid creates a space in the first div (col-sm-1) since the image size is smaller than the allotted width on the div. You can see the problem visually below. Any suggestions to mitigate this?
UPDATE
When using col-sm-auto, there is always a space left from the right because of col-sm-11, as you can see in the image:
You can use col-sm-auto instead of col-sm-1 which will shrink the column to the width of the content (the image). Also remove the left or right padding on the columns.
https://www.codeply.com/go/SLirjy4KDw
<div class="container">
<div class="row">
<div class="col-sm-auto pr-0">
<img class="img-thumbnail" src="//placehold.it/40">
</div>
<div class="col-sm-11 pl-0">
<div class="bg-light rounded p-1 pl-2">
<span class="font-weight-bold text-primary">content</span>
<div>
//buttons
</div>
</div>
</div>
</div>
</div>
You can use two div with d-inline as class. As these spaces will disappear
https://getbootstrap.com/docs/4.3/utilities/display/