I'm modifying a CSS template based on bootstrap, in order to obtain a responsive simple website.
The page provides a list of events. Since show_date and show_shop have fixed width, when the website is opened on a smartphone (smaller screen) the class flex-row allows the show_name and show_location to be disposed in column to save space.
The problem is that when the text in show_name and show_location is too long, the text wrap out of the box in vertical.
How can I force the text in show_name and show_location to use only a single line (one for each one), truncating the text with ...?
I tried overflow: hidden with text-overflow: ellipsis but it doesn't work (I think due to the flex width of the div).
Thanks for help.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="col-lg-8 order-lg-1 order-2 shows_list_col">
<div class="shows_list_container">
<ul class="shows_list">
<li class="d-flex flex-row align-items-center justify-content-start">
<div>
<div class="show_date">18/07</div>
</div>
<div class="show_info d-flex flex-md-row flex-column align-items-md-center align-items-start justify-content-md-start justify-content-center">
<div class="show_name">Electric Castle Festival</div>
<div class="show_location">Cluj, Romania</div>
</div>
<div class="ml-auto">
<div class="show_shop trans_200">Buy Tickets</div>
</div>
</li>
<li class="d-flex flex-row align-items-center justify-content-start">
<div>
<div class="show_date">20/07</div>
</div>
<div class="show_info d-flex flex-md-row flex-column align-items-md-center align-items-start justify-content-md-start justify-content-center">
<div class="show_name">Ultra Music Festival</div>
<div class="show_location">Miami, USA</div>
</div>
<div class="ml-auto">
<div class="show_shop trans_200">Buy Tickets</div>
</div>
</li>
<li class="d-flex flex-row align-items-center justify-content-start">
<div>
<div class="show_date">25/08</div>
</div>
<div class="show_info d-flex flex-md-row flex-column align-items-md-center align-items-start justify-content-md-start justify-content-center">
<div class="show_name">Vikings Festival</div>
<div class="show_location">Oslo, Norway</div>
</div>
<div class="ml-auto">
<div class="show_shop trans_200">Buy Tickets</div>
</div>
</li>
</ul>
</div>
</div>
You could simply use the text-nowrap class on those divs and use spans inside. I've also removed some redundant div elements and combined classes.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="col-lg-8 order-lg-1 order-2 shows_list_col">
<div class="shows_list_container">
<ul class="shows_list">
<li class="d-flex flex-row align-items-center justify-content-start">
<div class="show_date mr-3">18/07</div>
<div class="show_info text-nowrap">
<span class="show_name">Electric Castle Festival</span>
<span class="show_location">Cluj, Romania</span>
</div>
<div class="show_shop trans_200 ml-auto">Buy Tickets
</div>
</li>
<li class="d-flex flex-row align-items-center justify-content-start">
<div class="show_date mr-3">20/07</div>
<div class="show_info text-nowrap">
<span class="show_name">Ultra Music Festival</span>
<span class="show_location">Miami, USA</span>
</div>
<div class="show_shop trans_200 ml-auto">Buy Tickets</div>
</li>
<li class="d-flex flex-row align-items-center justify-content-start">
<div class="show_date mr-3">25/08</div>
<div class="show_info text-nowrap">
<span class="show_name">Vikings Festival</span>
<span class="show_location">Oslo, Norway</span>
</div>
<div class="show_shop trans_200 ml-auto">Buy Tickets</div>
</li>
</ul>
</div>
</div>
Since show_date and show_shop have fixed width
You can easily achieve this with some few lines of CSS
#media (max-width: 767.98px){
.show_info {
width: calc(100% - 50px - 70px); /* where 50px and 70px are the width of .show_date and .show_shop respectively */
}
.show_name, .show_location {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
I've solved my problem following the bootstrap's way.
I can obtain the best result adding the class text-truncate to the classes show_info, show_name, and show_location.
Thanks for help!
Related
*Here is the code. With this code listing is done vertically.Here is the current output I want to make this vertically.
*This is the current code I written.
{% extends 'index.html' %}
{%block body_block%}
{%for p in carslist%}
<section class="py-5">
<div class="container px-4 px-lg-5 mt-2">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="{{p.carpic.url}}" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">{{p.carcompany}}</h5>
<p>{{p.carmodel}}</p>
<!-- Product price-->
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Price: {{p.carprice}}</li>
<li class="list-group-item">Kms: {{p.carkms}}</li>
</ul>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View Details</a></div>
</div>
</div>
</div>
</div>
</div>
</section>
{%endfor%}
For the parent element of each of your products, you need to write the properties: display: flex;
flex direction: row;
flex-wrap: wrap;
In tailwind - flex flex-row flex-wrap
simply remove all the row-cols classes and things should stack up vertically by default.
Classes to remove: row-cols-2 row-cols-md-3 row-cols-xl-4.
When you have a lot of cluttered html like that and you can't make sense of it anymore I find that the best way to go about it is to reduce the structure to the very minimum, and build from there.
Comment your code and rebuild it little step by little step. Then you can see the impact of each individual element or class that you add.
I am using Bootstrap 5 to create a two-column page using Cards, where the cards extend to the bottom of the page. This part is working fine.
Inside the right-hand Card are two Columns. The first column has a border along the right edge to visually separate the two.
Regardless of the height of the content inside the column, I want the border to extend to the bottom of the parent Card.
HTML
<div class="row">
<div class="col-2 d-flex flex-column flex-shrink-0 p-2 " style=" height: calc(100vh - 7.5rem); ">
<div class="card card-body flex-fill">
Menu items
</div>
</div>
<div class="col-10 d-flex flex-column flex-shrink-0 p-2 " style=" height: calc(100vh - 7.5rem); ">
<div class="card card-body flex-fill">
<div class="row">
<div class="col-2 flex-fill" style="border-right: 1px solid black;">
first column - the border line should extend to the bottom of the parent card
</div>
<div class="col-10 flex-fill">
second column
</div>
</div>
</div>
</div>
</div>
Here you go...
Use pseudo element ::before, see the snippet below.
.left_border::before {
content: '';
position: absolute;
width: 1px;
height: calc(100% - 32px); /* padding-top is 16px and padding-bottom is 16px (2 * 16px = 32px). */
display: block;
background: black;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row">
<div class="col-2 d-flex flex-column flex-shrink-0 p-2 " style=" height: calc(100vh - 7.5rem); ">
<div class="card card-body flex-fill">
Menu items
</div>
</div>
<div class="col-10 d-flex flex-column flex-shrink-0 p-2 " style=" height: calc(100vh - 7.5rem); ">
<div class="card card-body flex-fill">
<div class="row">
<div class="col-2 flex-fill">
first column - the border line should extend to the bottom of the parent card
</div>
<div class="col-10 flex-fill left_border">
<div class="ms-3">
second column
</div>
</div>
</div>
</div>
</div>
</div>
border right will only span the width or height of the element its applied to. Try inserting a hr element in between the columns or at the end/start of the 2.
https://www.w3schools.com/howto/howto_css_vertical_line.asp
I am struggling with stretched-link. I've wanted to make a div with class menu-button working as a link, but clearly I am doing something wrong. Can anyone explain to me how to do it properly?
Here is the code:
import {BsHouseDoor} from 'react-icons/bs';
const Menu = () => {
return (
<div className={"menu container-fluid"}>
<div className={"row h-100"}>
<div className={"col-4"}>
<div className="d-flex align-items-center h-100 pl-3">
<BsHouseDoor className={"logo-icon"}/>
<span className={"logo-title ml-3"}>Some name</span>
</div>
</div>
<div className={"col-5"}>
<div className={"d-flex justify-content-around h-100"}>
<div className={"menu-button d-flex position-relative w-100 justify-content-center align-items-center"}>
Home
</div>
<div className={"menu-button d-flex w-100 position-relative justify-content-center align-items-center"}>
About
</div>
<div className={"menu-button d-flex w-100 position-relative justify-content-center align-items-center"}>
Contact
</div>
</div>
</div>
</div>
</div>
);
}
export default Menu;
I want to put the <hr closer to the content in the header.
I try to use position-absolute but the disappears.
This is my first project with bootstrap.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Body -->
<header class="header row">
<div class="d-flex justify-content-between">
<div id="logo" class="pb-2 ps-2 pe-0 col-2">
<img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
<a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
<i class="fa-solid fa-angle-left py-4 pe-2"></i>
</a>
</div>
<div class="col-10 row">
<h2 class="col-9 px-0 text-primary d-flex align-items-center">CHƯƠNG TRÌNH REBATE</h2>
<div class="col-3 px-0">
<div class="float-end d-flex justify-content-between">
<i class="fa fa-bell me-lg-2 d-flex align-items-center"></i>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img class="rounded-circle " src="assets/img/aTu.png" alt="" style="width: 40px; height: 40px;">
<span class="d-none d-lg-inline-flex text-primary">TuNTC23</span>
</a>
<div class="dropdown-menu bg-transparent border-0">
My Profile
Settings
Log Out
</div>
</div>
</div>
</div>
</div>
</div>
<hr style="height:1px;color:#1968B2;">
</header>
<hr style="height:1px;color:#1968B2; margin-top: -4px">
you can adjust the margin top according to your usage
I suggest you do not use the <hr> tag but a new css class or ::after to do that.
<header class="header row hr-bottom">
.hr-bottom {
border-bottom: 1px solid black;
}
OR
.hr-bottom::after {
border-bottom: 1px solid black;
}
The fastest way add class to hr for example bar
<hr class="bar" style="height:1px;color:#1968B2;">
and in CSS add class:
.bar {
transform: translateY(-10px);
}
Values up to you It may take px or procentage
I know this question was probably asked some hundred times, but sadly no answer that I found in here really helped me.
I tried these answers for example:
Bootstrap footer not at bottom
Flushing footer to bottom of the page, twitter bootstrap
Height not 100% on Container Fluid even though html and body are
But I still have the problem that when my page content is to "small" and doesn't fill out the whole height of the body/page container the footer just floats somewhere above the end of the browser window.
This is the code for my footer:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<footer class="d-flex justify-content-center">
<div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
<div class="align-left">
<a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link2</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link3</a>
</div>
<div class="align-right small">
Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
</div>
</div>
</footer>
I'm using Bootstrap 4.1 and Chrome, here's also a codepen to my site:
https://codepen.io/anon/pen/oMZVxq
Note: you have to use the sidebar view in codepen to actually see that the footer is not at the bottom, as the view size in codepen is so small that it looks correctly.
You can use built-in bootstrap class to achieve this.
What you need is the container to be a column flex container . class to use are : d-flex flex-column
To set the container to height:100% you can apply the class h-100to html, body and the container or add to the container style height:100vh;
For the footer, a margin-top:auto will do, the class to use is : mt-auto;
example below to run in full page mode
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<html class="h-100">
<body class="h-100">
<!-- Page Container -->
<div id="page-container" class="container-fluid pr-0 pl-0 h-100 d-flex flex-column">
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light bg-light pt-3 pb-3 d-flex justify-content-center">
<div class="col-md-8 col-lg-8 col-sm-12 col-xs-12 d-flex justify-content-between">
<div class="d-flex justify-content-start align-items-center">
<a href="/" class="kf-links">
<span class="h5">
<i class="fas fa-paper-plane"></i>
<span class="h4 font-weight-bold kf-dark">
MyPage
</span>
</span>
</a>
</div>
<!-- Main Header Navigation -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
Link1
</li>
<li class="nav-item">
Link2
</li>
<li class="nav-item">
Link3
</li>
</ul>
</div>
<!-- END Main Header Navigation -->
</div>
</nav>
<!-- END Header -->
<!-- Main Container -->
<div style="background:#5c90d2">
<div class="col-md-12 text-center pt-5 pb-5">
<div class="pt-5 pb-5">
<h1>
<span class="main-text">
Login
</span>
</h1>
<p class="lead"><span class="main-text">
Login Now!
</span></p>
</div>
</div>
</div>
<!-- Content -->
<div class="d-flex justify-content-center fadeIn">
<div class="col-md-8 col-xs-12">
<div class="d-flex justify-content-center">
<div class="col-md-6 pt-5 pb-5 pr-0 pl-0">
<form class="form-horizontal" method="post">
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label for="id_username">E-Mail</label>
<input id="id_username" class="form-control" maxlength="254" name="username" value="" type="text" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label for="id_password">Password</label>
<input id="id_password" class="form-control" name="password" type="password" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<small class="float-right">
Forgot Password?
</small>
</div>
</div>
<div class="form-group mt-5">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 pl-0">
<button class="btn btn-sm btn-block btn-primary" type="submit">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END Content -->
<!-- END Main Container -->
<!-- Footer -->
<footer class="d-flex justify-content-center mt-auto">
<div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
<!-- Copyright Info -->
<div class="align-left">
<a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link2</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link3</a>
</div>
<div class="align-right small">
Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
</div>
<!-- END Copyright Info -->
</div>
</footer>
<!-- END Footer -->
</div>
<!-- END Page Container -->
</body>
</html>
codepen updated https://codepen.io/anon/pen/PBpgNN
reminder for boostrap classes https://getbootstrap.com/docs/4.5/utilities/flex/ about sizing see https://getbootstrap.com/docs/4.5/utilities/sizing/
If you want a fixed footer, just add the class fixed-bottom to the footer tag like shown below.
<footer class="fixed-bottom bg-dark">
<div class="text-center">
<p>Footer</p>
</div>
</footer>
First add display: flex; and flex-direction: column; to #page-container.
Now you have "set the stage" for aligning the footer to the bottom. Set its margin-top to auto (by adding the class mt-auto) and you are done;
<div class="d-flex justify-content-center mt-auto">
Content here
</div>
See this codepen.
So this helped me - if someone is still looking for an answer:
on your <HTML>, <body> and your container div add a class h-100 and your footer will stay on the bottom.
Important
One thing I did to remove the extra height is that on my container div I changed the h-100 styling to height: calc(100% - 200px) !important; (where -200px was the height of my navigation and footer)
if you are not using the bootstrap, here is the styling .h-100{height:100% !important}