Giving width to div in bootstrap grid

Question

I am creating an inbox page, and need to give width to date column so it can display inline instead word break.

I tried white-space: nowrap but overflow hide it because of width.

I want name class and date class show inline width equal width like this.

Username, (date at end) 2 years 5 hours 30 min, 25 sec ago

Here is the code :

 $(".message-wrapper").click(function() { $(this).toggleClass("swipe-left"); });

 .messages-container { overflow-x: hidden; background: var(--bs-white); cursor: pointer; } .message-wrapper { all: unset; display: grid; grid-template-columns: 60px auto 10ch; transition: transform 0.3s; position: relative; } .message-wrapper .delete-btn { position: absolute; top: 0; bottom: 0; right: -80px; width: 80px; background: var(--bs-danger); display: flex; justify-content: center; align-items: center; color: white; } .message-wrapper .thumbnail { align-self: center; grid-row: 1/3; aspect-ratio: 1; border-radius: 50%; background: var(--bs-info); color: var(--bs-light); display: flex; align-items: center; justify-content: center; } .message-wrapper .name, .message-wrapper .message-text { overflow: hidden; word-break: break-word; } .message-wrapper .name { align-self: center; color: var(--bs-dark); } .message-wrapper .ago-time { justify-self: start; color: var(--bs-secondary); } .message-wrapper .message-text { grid-column: 2/4; color: var(--bs-secondary); } .message-wrapper.swipe-left { transform: translateX(-80px); }

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="messages-container mx-3"> <a class="message-wrapper border-bottom p-3"> <div class="thumbnail me-3"> N </div> <div class="name h5 m-0"> No One </div> <div class="ago-time small"> 30 min, 25 sec ago </div> <div class="message-text"> Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.</div> <div class="delete-btn"> <span class="material-icons-round">delete</span> </div> </a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Added inline-block as display on name and date containers, then specifically no wrap on the date.

 $(".message-wrapper").click(function() { $(this).toggleClass("swipe-left"); });

 .messages-container { overflow-x: hidden; background: var(--bs-white); cursor: pointer; } .message-wrapper { all: unset; display: grid; grid-template-columns: 60px auto 10ch; transition: transform 0.3s; position: relative; } .message-wrapper .delete-btn { position: absolute; top: 0; bottom: 0; right: -80px; width: 80px; background: var(--bs-danger); display: flex; justify-content: center; align-items: center; color: white; } .message-wrapper .thumbnail { align-self: center; grid-row: 1/3; aspect-ratio: 1; border-radius: 50%; background: var(--bs-info); color: var(--bs-light); display: flex; align-items: center; justify-content: center; } .message-wrapper .name, .message-wrapper .message-text { overflow: hidden; word-break: break-word; } .message-wrapper .name { display: inline-block; align-self: center; color: var(--bs-dark); } .message-wrapper .ago-time { display: inline-block; white-space: nowrap; justify-self: start; color: var(--bs-secondary); } .message-wrapper .message-text { grid-column: 2/4; color: var(--bs-secondary); } .message-wrapper.swipe-left { transform: translateX(-80px); }

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="messages-container mx-3"> <a class="message-wrapper border-bottom p-3"> <div class="thumbnail me-3"> N </div> <div class="name h5 m-0"> No One </div> <div class="ago-time small"> 30 min, 25 sec ago </div> <div class="message-text"> Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.</div> <div class="delete-btn"> <span class="material-icons-round">delete</span> </div> </a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

To achieve the behavior which accommodate a long date. You need to change the HTML structure like below.

<div class="d-flex align-items-center justify-content-between">
    <div class="name h5 m-0">
      No One
    </div>
    <div class="ago-time small">
      2 years 5 hours 30 min, 25 sec ago
    </div>
</div>

by wrapping the title and date into a flex container with justify between property. jsfiddle .

 $(".message-wrapper").click(function() { $(this).toggleClass("swipe-left"); });

 .messages-container { overflow-x: hidden; background: var(--bs-white); cursor: pointer; } .message-wrapper { all: unset; display: grid; grid-template-columns: 60px auto 10ch; transition: transform 0.3s; position: relative; } .message-wrapper .delete-btn { position: absolute; top: 0; bottom: 0; right: -80px; width: 80px; background: var(--bs-danger); display: flex; justify-content: center; align-items: center; color: white; } .message-wrapper .thumbnail { align-self: center; grid-row: 1/3; aspect-ratio: 1; border-radius: 50%; background: var(--bs-info); color: var(--bs-light); display: flex; align-items: center; justify-content: center; } .message-wrapper .name, .message-wrapper .message-text { overflow: hidden; word-break: break-word; } .message-wrapper .name { align-self: center; color: var(--bs-dark); } .message-wrapper .ago-time { justify-self: start; color: var(--bs-secondary); } .message-wrapper .message-text { grid-column: 2/4; color: var(--bs-secondary); } .message-wrapper.swipe-left { transform: translateX(-80px); }

 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <div class="messages-container mx-3"> <a class="message-wrapper border-bottom px-2"> <div class="thumbnail me-3"> N </div> <div class="d-flex align-items-center justify-content-between"> <div class="name h5 m-0"> No One </div> <div class="ago-time small"> 2 years 5 hours 30 min, 25 sec ago </div> </div> <div class="message-text"> Es ist ein lang erwiesener Fakt, dass ein Leser vom Text abgelenkt wird, wenn er sich ein Layout ansieht.</div> <div class="delete-btn"> <span class="material-icons-round">delete</span> </div> </a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>