Utilizing Bootstrap 5 Grid to blend fixed and dynamic width elements within a single row

I am currently working on developing a grid system for my Blazor application that features small fixed-size columns with one large column. Instead of dividing the grid into 12 columns using col-xs-*, I have opted to set custom widths without using the col class. However, I have encountered an issue where a long word causes the last column to take up the full width in a new row despite using break-word overflow-wrap. My goal is to have everything rendered in a single row similar to the second row in the example below.

@import "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2c21213a3d3a3c2f3e0e7b607f607d">[email protected]</a>/dist/css/bootstrap.min.css";
<div class="container">
    <div class="row border">
        <div class="border" style="width:30px">X</div>
        <div class="border" style="width:40px">XX</div>
        <div class="col border" style="overflow-wrap: break-word;">tooLongForThisRooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooow</div>
    </div>
    <div class="row border">
        <div class="border" style="width:30px">Y</div>
        <div class="border" style="width:40px">YY</div>
        <div class="col border" style="overflow-wrap: break-word;">not too long not too long not too long not too long not too long not too long not too long not too long not too long not too long not too long</div>
    </div>
</div>

htmlcssbootstrap-5

Answer №1

To implement text wrapping, utilize the classes .text-wrap and .text-break. Ensure that columns are directly nested under rows. You can either incorporate .col-1, .col-1, .col-10 within the .row, or enclose all three elements inside a 12-column flexbox container .col-12.d-flex:

@import "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9aba6a6bdbabdbba8b989fce7f8e7fa">[email protected]</a>/dist/css/bootstrap.min.css";
<div class="container">
  <!-- flexbox -->
  <div class="row p-0">
    <div class="col-12 d-flex border p-0">
      <div class="p-2 border" style="width:30px !important;">X</div>
      <div class="p-2 border" style="width:40px !important;">XX</div>
      <div class="p-2 border text-wrap text-break">
        tooLongForThisRooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooow
      </div>
    </div>
  </div>
  <!-- grid -->
  <div class="row border">
    <div class="col-1 border" style="width:30px !important;">X</div>
    <div class="col-1 border" style="width:40px !important;">XX</div>
    <div class="col-10 border text-wrap text-break">
      tooLongForThisRooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooow
    </div>
  </div>
  <div class="row border">
    <div class="border" style="width:30px">Y</div>
    <div class="border" style="width:40px">YY</div>
    <div class="col border" style="overflow-wrap: break-word;">not too long not too long not too long not too long not too long not too long not too long not too long not too long not too long not too long</div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding content to an empty element will not produce the desired result

I'm trying to show each character of a string, which is stored in an array, one at a time. However, when I use threadsleep(a) with the code found here: http://jsfiddle.net/thefiddler99/re3qpuoo/, all the characters are displayed at once. There seems t ...

javascriptjqueryhtml

Creating square elements using only HTML and CSS

This is just a longer text to demonstrate multiple lines being centered. ...

htmlcss

What is the process for clicking a button in Selenium Python that lacks a "select" tag and only becomes clickable after fulfilling certain conditions?

Currently, I am working on automating the process of downloading files. To locate these files, I need to interact with two dropdown menus: one named 'Select Period' where I choose a date, and the other named 'Select File Type' where I s ...

pythonhtmlselenium-webdriverautomationwebdriver

Creating a dynamic CSS animation with multiple spans for typing effect

I have made some progress with this project. Here is the link to what I have so far: http://codepen.io/tacrossman/pen/GJglH However, my goal is to have the cursor blinking animation running after each new word (span) is written out. When I attempt to ad ...

htmlcssanimation

One problem with placing Bootstrap columns inside another column

Currently, I am in the process of working on a website that requires a description section. To achieve this, I decided to use two Bootstrap columns – one with a size of 8 and another with a size of 4, totaling up to 12 grid units. Inside the column sized ...

htmlcsstwitter-bootstrappositioncss-position

Struggling to align h2 in div using bootstrap

Hello everyone! Can anyone help me figure out what I'm doing incorrectly? <div class="col-4" style=""> <h2 class="text-center vertical-center">Insert text here</h2> </div> I've attempted ...

cssbootstrap-4bootstrap-5

Using AJAX in Laravel Blade to bypass the specified div class

As a beginner in AJAX JavaScript, I have been trying to filter data in Laravel 10 without refreshing the page using AJAX, but so far I haven't had much success. Below is the code snippet from my blade view: <script src="https://code.jquery.co ...

javascripthtmlajaxlaravellaravel-blade

Grab the table headings from an HTML table and store them in variables after accessing the DOM

Looking to modify the structure of the DOM. Wanting to display table content using paragraphs instead. To achieve this, I need to extract data from each row in the table. How can I accomplish this task? <table style="width:300px"> <tr> ...

javascriptjqueryhtmldom

How can I style the inner div by adding a class to the first div?

In my project, I have a list of elements that are generated dynamically, all styled the same way but with different content. The first element has a specific styling, and if it doesn't render, I want the second element to inherit that styling. < ...

javascriptjqueryhtmlcss

Is there a way to obtain the "rotated" coordinates of a mouse click within a canvas element?

Exploring New Features Within my image editing software, there is a canvas where users can draw shapes. These shapes are sent to a server and added to an XML file, which is then returned to the client for display. Now, I am looking to enhance the program ...

javascripthtmlcanvasrotation

Employing negative margin to connect div1 to the left side of div2

Is there a way to attach a dismiss button to the left of a contact in a sidebar? I am trying to achieve a layout similar to the one shown in this image: https://i.sstatic.net/jJE3h.png I attempted using margin-left: -50px; or left: -50px;, but the dismiss ...

htmlcssmargin

Using the "this" keyword in JavaScript to access the "rel"

Take a look at the JSFIDDLE , where you will notice that the rel attribute in the alert is shown as 'undefined' : var ItemTypeArray = $('input[name^=ItemType]:checked').map(function(){ alert(this.id + ' , r= ' + this.rel) ...

javascriptjqueryhtml

Adjust the flexslider to transition to a new slide when hovering over the thumbnails

I have a flexslider with thumbnails like this ; https://i.stack.imgur.com/9bfC2.jpg I am looking to change the slide when the user hovers over the thumbnails. How can I achieve this functionality? Here is the jQuery code I am currently using to set up th ...

javascriptjqueryhtml

Navigating Websites in Google Search

Whenever I search for keywords related to my website on Google, the search results show my website's content and address. However, when I click on the link, it redirects me to a different unrelated website. Click here to view an image ...

htmlgoogle-search

Unpredictable jQuery modal form activation occurring twice

I have integrated Dropzone.js into my website for uploading images, and everything works smoothly during the upload process. However, I encounter a strange issue when attempting to delete the images. Occasionally, when clicking on the "trash" icon to delet ...

jquerybootstrap-modalbootstrap-5

The ability to rate the product in Livewire:Laravel is exclusively reserved for buyers

I have integrated the Livewire rating system into my Laravel e-commerce platform. Currently, all users can rate and comment on any product. However, I want to restrict this privilege to only buyers. ProductRatings.php class ProductRatings extends Componen ...

javascriptphpcsslaravellaravel-livewire

Display navigation bar upon touch or lift

In the mobile version of a website, there is a fixed navigation bar at the top. The positioning of this navbar is achieved using position:absolute: .navbar-fixed-top{position:absolute;right:0;left:0;z-index:1000; The goal is to make the navbar invisible ...

javascriptjquerycss

Issue resolved: Mysterious fix found for background images not displaying in NextJS React components

I am having trouble displaying a background image on an element in NextJs using Typescript and Tailwind. I do not believe it is a TypeScript issue since I am not receiving any errors or IntelliSense warnings. Below is the code I am working with: var classn ...

cssreactjstypescriptnext.jstailwind-css

Ways to switch out event listener when button is deactivated

I find myself in a situation where I need to switch all unauthorized controls on my UI from a hidden state to a disabled state. Additionally, I want to add a tooltip with unauthorized text and have the control display this text when clicked. While I am ab ...

javascriptjqueryhtmlasp.netonclick

The issue of font icons not displaying seems to be affecting all users

I have developed my own website that functions similar to fontawesome. However, after uploading it to an online server, I encountered a problem where others are unable to use my custom font icon. In order for someone to utilize the font icon from my websi ...

htmlcss