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">
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>
Media Query for bootstrap 4, unresponsive. I have two cards side by side in a section. When I get down to 576px I want to be able to display the cards side by side.
I've tried setting the parent containers to float: none and float: left. Also tried incorporating display: block on the Query.
<section id="recipeList">
<div class="recipeName"></div>
<div class="row">
<div class="col-sm-6">
<div class="card image-container">
<img class="card-img-top" src="./assets/images/Dish.svg"
alt="places restaurants png">
<div class="card-body ingredients" id="foodImage">
<p class="card-text"></p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card ingredients-card">
<img class="card-img-top"
src="./assets/images/Contents.svg" alt="places restaurants png">
<div class="card-body overflow-auto">
<h2 class="card-title"></h2>
<p class="card-text overflow-auto" id="facts"></p>
</div>
</div>
</div>
</div>
</section>
I would love for the two bootstrap cards to be responsive rather than just squeezing downwards
Hi I have this portion of my website Link here to broken portion and for some reason, the bottom of one of my sections is cut off. If I add a different margin or padding to the main class I just get white area added and the bootstrap card still can't be read. Any ideas?
Picture:
HTML Code:
<div class="main">
<div class="page-header" id="Services" style="background-image: url('./assets/img/background-grassfade.png'); background-color:#fff;">
<div class="filter"></div>
<div class="container-fluid">
<div class="motto">
<div class="row">
<div class="col-md-8 offset-md-2 text-center">
<div class="space-top"></div>
<h2 class="title">Services</h2>
</div>
<div class="container">
<div class="space-top"></div>
<div class="card" data-background="color" data-color="blue">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-car-mechanic"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Roadside Assistance</h4>
<p class="card-description">Jumpstarting, Tire changes, Fuel and fluid dilvery, Extrication/Pullout. </p>
<p class="card-footer align-self-end mt-auto">
<b>*Delivery of non-alcoholic refreshments upon request for an additional charge.</b>
</p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="green">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-people-carry"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Hauling</h4>
<p class="card-description">Including Rock, Sand, Mulch, Dirt, Feed, Hay, Plants, Trees, Firewood, Applicances, etc. Moving Services, Junk/debris cleanup, small buisness deliveries, post garage sale deliveries. </p>
<p class="card-footer align-self-end mt-auto">
<b>*Loading, transport and unloading covered.</b>
</p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="orange">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-home"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Residential Home Exterior</h4>
<p class="card-description">Including Snow removal (driveways and sidewalks only currently) , Lawn care, Tree and Bush pruning/trimming, Stump removal, Leaf removal, Gutter cleaning, yard debris and junk removal, Landscaping, Power washing (Homes, Concrete, vehicles),
Window washing, Light construction demolition, Fence demolition. </p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="brown">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-toolbox"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Residential Home Interior</h4>
<p class="card-description">Including Window washing, Batt insulation installation and removal, Drywall installation and removal, Indoor painting, Mild carpet and flooring cleanings, Maid services, Rearranging furniture, Drain cleaning, General home maintenance,
Baby proofing. </p>
</div>
</div>
</div>
</div>
<div class="card" data-background="color" data-color="yellow">
<div class="card-body text-center d-flex flex-column">
<div class="row">
<div class="col-md-4 align-self-center vcenter">
<div class="card-icon">
<i class="far fa-shopping-basket"></i>
</div>
</div>
<div class="col-md-8 venter">
<h4 class="card-title">Miscellaneous Services</h4>
<p class="card-description">Construction site clean up, Storm debris removal, Grocery pick up and delivery, vehicle hail dent repair, vehicle washing and detailing (we drive to you!), Dog walking, pet feces removal (outdoors only), Holiday lights/decoration installation.
Looking for something not on this list? Call for pricing/availability! </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The template is from Creative Tim: Creative Tim's Website and the CSS used is the included CSS with minimal changes and nothing that should touch any of this.
What I've tried:
Adding margin/margin-bottom to the main, container-fluid, motto and row as well as padding/padding-bottom
I have tried to change the margin-top of the section below it.
I have tried to add space using both <br /> and the provided space-top class.
I can include more of the HTML for the section below if needed. I included a link to the site currently, you should be able to use inspect element to sift around with grabbing CSS but I can include CSS if need be. I couldn't find anywhere that said I could not post a link to my page directly but if I cannot please let me know and I will remove it.
The page-header element inside paper-kit.css has a max-height:
.page-header {
max-height: 999px;
}
You content must be taller than that max-height (not sure why one would set a max-height on a div in a vertical layout but oh well). Comment it out in the web dev tools and all looks fine.
there is a max height of 999px in the class page-header, which is limiting the height remove it
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! 😉