I'm trying to align a text next to an icon inside a card. The card is wrapped inside the Bootstrap "col" class which dynamically determines its size depending on how many items a row contains.
However if there isn't enough space the text gets wrapped and is displayed in a second row. Now what I'm trying to achieve is to keep the text next to the icon on one line and end it if there isn't enough space with an ellipsis (three dots).
This plunker shows my current setup
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<body>
<div class="row mx-1">
<div class="col" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Normal title
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I'm trying to achieve
An idea is to make your text out of the flow using absolute position and then add some CSS properties to crop the text:
.main-title {
flex: 1;
position: relative;
}
.main-title .title {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row mx-1">
<div class="col" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Normal title
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row d-flex">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
</div>
</div>
You can use the text-truncate class to automatically truncate (and add ellipsis) based on the available space in a column.
To achieve that you need to put your content into columns (which you should always do anyway because putting stuff directly into a row tends to lead to problems that require unnecessary css hacks).
In the following snippet, you see a much cleaner version of your code that achieves the desired result using the text-truncate class:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.grey-div {
width:50px;
height:50px;
background:gray;
display: inline-block;
vertical-align: top;
}
</style>
<div class="container-fluid">
<div class="row mx-1">
<div class="col px-0 mx-1" style="background:lightgray">
<div class="row">
<div class="grey-div"></div>
<div>
<div class="title">
Normal title
</div>
</div>
</div>
</div>
<div class="col px-0 mx-1 text-truncate" style="background:lightgray">
<div class="title text-truncate">
<div class="grey-div"></div>
Long title which should end with ellipsis
</div>
</div>
<div class="col px-0 mx-1 text-truncate" style="background:lightgray">
<div class="title text-truncate">
<div class="grey-div"></div>
Long title which should end with ellipsis
</div>
</div>
<div class="col px-0 mx-1 text-truncate" style="background:lightgray">
<div class="title text-truncate">
<div class="grey-div"></div>
Long title which should end with ellipsis
</div>
</div>
<div class="col px-0 mx-1 text-truncate" style="background:lightgray">
<div class="title text-truncate">
<div class="grey-div"></div>
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
Related
what is the best way to create a footer in Bootstrap where in the middle (horizontally) of the screen is a text with two lines and at the end of the screen (horizontally) is a text with one line, but centered vertically?
I try to create the footer with columns and offset columns - but is it the best way? Additional I don't figured out how to center the one line.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<footer class="bg-secondary py-0 mt-auto">
<div class="container-fluid px-5">
<div class="row">
<div class="col-6 offset-3 text-center">
<div class="m-0">First Line</div>
<div class="m-0">Second Line</div>
</div>
<div class="col-3 text-end">
<div class="m-0">One Line Centered</div>
</div>
</div>
</div>
</footer>
Edit:
The correct way to do this in modern browsers is to use Flexbox.
See this for details.
I'm updating my code:- [I'm adding a border in each div to clear your expectation]
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<style> div{ border: 1px solid green;} </style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<footer class="bg-secondary py-0 mt-auto">
<div class="container-fluid px-5">
<div class="row">
<div class="col-6 offset-3 text-center">
<div class="m-0">First Line</div>
<div class="m-0">Second Line</div>
</div>
<div class="col-3 text-end" style="display: table; overflow: hidden;">
<div class="m-0 text-center" style="display: table-cell; vertical-align: middle;">One Line Centered</div>
</div>
</div>
</div>
</footer>
I have this Stackblitz and the Stackblitz Url that has 2 bootstrap cards inside a page layout with columns.
Problem - With the Name (.card-title) of the card being greater than 11 characters longs (max 15), when I shrink the screen between 768px-1200px the name at the top of the card squishes the star/rating down to the next line.
Question - Is there a way to truncate the name (ex. AnneMariesPlace) between 768px-1200px with ellipses, so that the star/rating remains on the same line?
ex. AnneMari...
This would mean the max length would be 8 plus the ellipses (3 chars)
Can it be done with pure CSS using?
FYI - I tried a couple of things with text-overflow: ellipsis; and white-space: nowrap;
but I didn't have much luck.
Here is the code I'm using
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container my-3 my-xl-5">
<div class="row">
<div class="col-lg-3">
something here
</div>
<div class="col-lg-9">
<div class="row">
<div class="col">
<div class="mb-4">
</div>
<div class="row row-cols-1 row-cols-sm-2">
<div class="col mb-4">
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img class="yogaband-img img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_1450,h_1450/f_auto/v1569538700/mainpage/iStock-860080282_bkhfsu.jpg" alt="yogaband">
</div>
<div class="col-md-7">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<b class="card-title d-inline">AnneMariesPlace</b>
<span class="float-right center-star">
★3.43
</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Access</span>
<span class="float-right">Private</span>
</div>
<div class="col-12">
<span>Max Size</span>
<span class="float-right">10</span>
</div>
<div class="col-12">
<span>Events</span>
<span class="float-right">323</span>
</div>
<div class="col-12">
<span>Type</span>
<span class="float-right">Park</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img class="yogaband-img img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_1450,h_1450/f_auto/v1569538700/mainpage/iStock-860080282_bkhfsu.jpg" alt="yogaband">
</div>
<div class="col-md-7">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<b class="card-title d-inline">AnneiMaries</b>
<span class="float-right center-star">
★3.43
</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Access</span>
<span class="float-right">Private</span>
</div>
<div class="col-12">
<span>Max Size</span>
<span class="float-right">10</span>
</div>
<div class="col-12">
<span>Events</span>
<span class="float-right">323</span>
</div>
<div class="col-12">
<span>Type</span>
<span class="float-right">Park</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
To make ellipsis work you need conditions. First, the element must NOT be inline. Yours it is even with an !important condition (which I don't know why you set it), second it needs a width set (it does not matter if percent or fixed) and last, it needs overflow:hidden and white-space:nowrap (so the content won't ever take a second line).
Basically, and based on your example, you need this:
.d-inline {
display: inline-block;
overflow: hidden;
width: calc(100% - 44px);
white-space: nowrap;
}
Unfortunately, it looks like your "score" will never get more width space than 44px. Use a bit more to feel safe just in case (browser zooming and such.)
I want it as I shared in the picture below but I couldn't set it up. I am sharing the code I wrote below. How can I fix this problem?
my code:
#mybtn{
position: fixed;
bottom: 10px;
right: 10px;
}
<div class="row">
<div class="col-lg-8" style="position: relative;">
<p>this is my content</p>
<button id="mybtn">My Fixed Button</button>
</div>
<div class="col-lg-4">
<p>content area</p>
</div>
</div>
You can wrap button inside div and use d-flex justify-content-end on div
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-lg-8 bg-danger">
<p>this is my content</p>
<div class='w-100 d-flex justify-content-end'>
<button id="mybtn" class='btn btn-primary btn-sm'>Button</button>
</div>
</div>
<div class="col-lg-4">
<p>content area</p>
</div>
</div>
So I have this section which ocupies the whole width of the screen but the text in it is contained in a container and aligns properly.
The section below that one is divided in two columns, and im interested in putting a text in the left column that aligns with the text above it but so far have been unable to do so.
This is the result I'm getting:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="d-flex align-items-center bg-primary" style="min-height: 450px">
<div class="container">
<h1 class="">TITLE TEXT</h1>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row">
<div class="col-sm bg-secondary" style="min-height: 400px">
<div class="container">
<h3>TITLE</h3>
</div>
</div>
<div class="col-sm bg-warning" style="min-height: 400px"></div>
</div>
</div>
</section>
And the HTML I'm currently stuck with(The css was just added in the HTML for testing)
Tank you for any help provided and if you need anything more please just tell me.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="row bg-primary" style="min-height: 450px">
<div class="col-6 d-flex align-items-center">
<div class="container">
<h1 class="text-center">TITLE TEXT</h1>
</div>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row" style="min-height: 400px">
<div class="col-6 d-flex align-items-center bg-secondary">
<div class="container">
<h3 class="text-center">TITLE</h3>
</div>
</div>
<div class="col-6 bg-warning"></div>
</div>
</div>
</section>
.text-to-center{ display:flex}
h1,h3{ margin:auto;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="row bg-primary" style="min-height: 450px">
<div class="col-12 d-flex align-items-center">
<div class="container text-to-center">
<h1 class="text-center">TITLE TEXT</h1>
</div>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row" style="min-height: 400px">
<div class="col-6 d-flex align-items-center bg-secondary">
<div class="container text-to-center">
<h3 class="text-center">TITLE</h3>
</div>
</div>
<div class="col-6 bg-warning"></div>
</div>
</div>
</section>
I feel like this should be easy, but I'm trying to get my .temp and .city divs to be side-by-side, but they're stacking vertically instead.
I've tried changing the size of the columns, but they always stack on top of each other. Any ideas?
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
</div>
You can wrap temp div and city div into 2 different columns. Check this Bootstrap4 Example.
.wind,
.temp,
.city {
height: 50px;
border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
</div>
<div class="col-lg" id="col3">
<div class="city"></div>
</div>
</div>
You can rearrange your html code to this format.
<div class="row">
<div class="col-lg" id="col2">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
You should edit your code to this, making the second row have two columns.
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col temp"></div>
<div class="col city"></div>
</div>
</div>