I am using a Bootstrap-4 card in my web page.
I want the text in card-body to grow from bottom to top.
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white color4 o-hidden h-100">
<div class="card-body">
<div class="mr-5"><span class="float-left"
style="min-width:280px;font-size:17px;">Tool</span>
</div>
<p>Contents i want this text to grow from bottom
to top.</p>
</div>
<div class="card-body-icon">
<i class="fa fa-cogs" aria-hidden="true"></i>
</div>
</div>
</div>
I am not sure what you mean. I guess you want to grow your text?
You can use:
p {
font-size: 60px;
}
or even better
your-div-name p {
font-size: 60px;
}
Related
I have a div which has a background image and some text and I want the content of div to stop overlapping from a part (ribbon part) of the backgrounf image. Please check images so that it's clear to you what I am willing to do.
This is how it should appear on all screens (except phones)
This is not how I want it to be. I want the text to stay away from ribbon for all screen sizes
Html:
<div id="overview1" class="col-md-4">
<div class="row d-flex align-items-center height-33">
<div class="col-lg-4 col-md-5 d-sm-block d-none"></div>
<div class="benefits col-lg-8 col-md-7">
<h3 class="text-uppercase overview1-heading ms-3">
<span class="overview1-text">2023</span>
<span class="overview1-text">benefits</span>
overview
</h3>
</div>
</div>
</div>
css:
#overview1 {
background-image: url("ribbon.jpg");
background-position: 10% 100%;
background-size: cover;
background-repeat: no-repeat;
color: white;
}
I would do it a bit differently if I were you. Instead of setting the background-image on the #overview-1, I would make two columns (put the image inside the left column and put the text inside the right column).
It would be easier to help you if you edit your question and add more HTML & CSS. Also, having a similar image (at least) would be very helpful to test the snippet.
Something like this:
<div id="overview1" class="col-md-4">
<div class="row d-flex align-items-center height-33">
<div class="col-lg-4 col-md-5 d-sm-block d-none"></div>
<div class="benefits col-lg-8 col-md-7">
<div class="row">
<div class="col-6">
<!-- Image here -->
</div>
<div class="col-6">
<h3 class="text-uppercase overview1-heading ms-3">
<span class="overview1-text">2023</span>
<span class="overview1-text">benefits</span> overview
</h3>
</div>
</div>
</div>
</div>
</div>
I am facing a problem in which I want the content which is written on the left half of the screen should be written on the image which is on the right side when decreasing the screen size.
for reference, check the image as I want this problem image
to be like this Solution image when I decrease the size of my screen, But my screen looks like this at present. I need the solution as soon as possible.
Note: I used mostly pre-defined classes of bootstrap4 for this.
code is-
<div class="row">
<div class="col p-0 col-6 bg-creame" style="height: 100vh;">
<div class="h-100 d-flex flex-column justify-content-start pt-5">
<div class="m-5 pt-5 pr-5">
<h1 class="mb-5"><b style="font-weight: 900;"><b>Contact</b></b></h1>
<p class="m-0" style="font-weight: 900;font-size: 18px;">Email Address</p>
<p><a style="color: inherit !important;font-size: 23px;" href="mailto:support#regid.ca">support#XXX.com</a>
</p>
<p class="m-0 mt-5" style="font-weight: 900;font-size: 18px;">Mailing Address</p>
<p style="font-size: 23px;">
XXXXXX, 77 XXXX XXX X,
XXXXXX, XX XXX 6XX
</p>
<div class="d-none d-lg-block">
<button class="text-uppercase btn pr-5 pl-5 color-creame bg-orange"
style="border-radius: 50px; letter-spacing: 1px;font-size: 20px;">
Contact Us
</button>
</div>
</div>
</div>
</div>
<div class="col p-0 col-6 bg-orange" style="height: 100vh;">
<div style="position: absolute; bottom: 0; right: 0;">
<div class="h-50 bg-orange d-flex flex-column justify-content-end" style="padding-top: 14rem;">
<div class="text-center p-4">
<i class="fas fa-arrow-up bg-black" style="font-size: 2rem;"></i>
</div>
</div>
</div>
<div class="d-flex flex-column h-100">
<img height="100%" width="100%" src="./assets/img/Rectangle 8 (2).png" class="img img-responsive">
</div>
</div>
</div>
You could use z-index to push the image behind the text and do something like this
#media (max-width: 600px) {
img {
width: 100%;
z-index: -1;
}
div {
z-index: 1;
}
}
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 1 year ago.
I am trying to vertically center my text content in the right column with bootstrap. However when I do that, the height of the column collapse to the height of the content like this.
How can I make the height of the right column the same as that on the left while vertically centering my text?
This is my HTML code:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-md mt-5 d-grid">
<div class="row gx-0"> <!--gx sets the gutter btw columns to 0-->
<div class="col-sm-8">
<img src="https://www.syfy.com/sites/syfy/files/wire/legacy/edge_of_tomorrow-wide.jpg" alt="Edge of Tomorrow" class="img-fluid" href="featured.html">
</div>
<div class="col-sm-4 bg-light align-self-center text-center">
<h1>Edge of Tomorrow</h1>
<div class="rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<p>It leaves you on the edge, wishing for a tomorrow. An epic action movie with twists and turns along the way.</p>
<button class="featured-button">Read more →</button>
</div>
</div>
</div>
</div>
</div>
Update:
Now I have set it to flex to vertically center my content which works perfectly. It looks like this now:
With the updated code:
<div class="container-md mt-5 featured">
<div class="row gx-0"> <!--gx sets the gutter btw columns to 0-->
<div class="col-md-7"> <!--col adds up to 12-->
<img src="images/edge-of-tomorrow.jpg" alt="Edge of Tomorrow" class="img-fluid featured-img" href="featured.html">
</div>
<div class="col-md-5 h-100 bg-light d-flex flex-column align-items-center justify-content-center text-center featured-content">
<h1>Edge of Tomorrow</h1>
<div class="rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<p>It leaves you on the edge, wishing for a tomorrow. An epic action movie with twists and turns along the way.</p>
<button class="btn btn-warning">Read more →</button>
</div>
</div>
</div>
<!--other content-->
<!--grid of cards-->
<div class="container card-deck mt-5"> <!--card deck so that it's equal height and width-->
<div class="row">
<div class="col-md-4">
<div class="card h-100">
<img class="card-img-top" src="images/500-days-of-summer.jpg" alt="500 Days of Summer">
<div class="card-body">
<h5 class="card-title">500 Days of Summer</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>
But now the problem is when I minimise my screen, the content overlaps like this.
How can I prevent this from happening?
Instead of self-aligning the col-sm-4 to center, change it to a flex (column-wise). Then make everything center with: d-flex flex-column align-items-center justify-content-center. This will make it as you want.
Here's the fiddle (used a random image off the internet): JSFiddle
I added extra height to image just for the demo, you do not need to do that.
As a workaround, i would consider removing the img tag, and add a bg class to the div like this:
<div class="col-sm-8 bg"></div>
And in CSS Add:
.bg {
background-image: url("images/edge of tomorrow.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
object-fit: cover;
}
You can afterwards change the height of the image as you want, to display it in a proper way.
That worked for me, Hope this helped.
set the right column height to 100% with .h-100 bootstrap class.
Then set that right side column to position relative and wrap all the content inside a div(as u can see in my code).
-Than set that div to absolute and set it center with css as I did.
.content {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
<div class="container-md mt-5 d-grid">
<div class="row gx-0"> <!--gx sets the gutter btw columns to 0-->
<div class="col-sm-8">
<img src="https://images.unsplash.com/photo-1627850019941-9ca7769b314e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1868&q=80" alt="Edge of Tomorrow" class="img-fluid" href="featured.html">
</div>
<div class="col-sm-4 bg-light text-center h-100 position-relative">
<div class="content"><h1>Edge of Tomorrow</h1>
<div class="rating" style="
">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<p>It leaves you on the edge, wishing for a tomorrow. An epic action movie with twists and turns along the way.</p><button class="featured-button" style="
width: fit-content;
">Read more →</button>
</div>
</div>
</div>
</div>
</div>
</div>
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>