Repositioning text onto a new row in CSS/Bootstrap when it surpasses the column's width limit

One of the columns in a row may have text longer than the available width, causing it to overflow into a new line below the other three elements. The layout should resemble:

Example: https://i.sstatic.net/a2ltj.png

If the first column with verylongtext would cause a line break,

<div class="row">
   <div class="col">verylongtext</div>
   <div class="col">1</div>
   <div class="col">2</div>
   <div class="col">3</div>
</div>

it should render as:

<div class="row">
   <div class="col">1</div>
   <div class="col">2</div>
   <div class="col">3</div>
</div>
<div class="row">
   <div class="col">verylongtext</div>
</div>

Is there a way to achieve this using bootstrap or other techniques?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To maintain a fixed column width, consider using "col-4" instead of just "col". This will help manage large blocks of text by allowing them to flow downwards if they are too lengthy.

Answer №2

If you want to accomplish this task using jQuery, the first step is to determine the number of characters that define a "very long text". For example, let's set it at 12 characters.

Below is a snippet of code that can help achieve this:

var longTextLength = 12;
$(document).ready(function(){
  $("div.col").each(function(){
    // Iterate through each element with the 'col' class
     if($(this).text().length >= longTextLength)
     {
      // If the text is very long, perform some logic
      // Create a new div and move the element inside it
      var customDiv = $("<div/>");
      customDiv.addClass("row");
      customDiv.html($(this).get(0).outerHTML);
      customDiv.insertAfter($(this).parent());
      $(this).remove()
     }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
   <div class="col">verylongtext</div>
   <div class="col">1</div>
   <div class="col">2</div>
   <div class="col">3</div>
</div>

Answer №3

To address this issue, I recommend utilizing the grid system from Bootstrap: try out different display sizes to identify where the text breaks. Then, conceal it on that particular screensize using responsive utilities and present an alternative layout for that size and smaller.

<div class="row">
   <div class="col d-none d-md-block">verylongtext</div>
   <div class="col">1</div>
   <div class="col">2</div>
   <div class="col">3</div>
</div>
<div class="row">
   <div class="col d-md-none">verylongtext</div>
</div>

Feel free to check out a live sample in thislink.

An alternative approach could involve using JavaScript to determine the vertical size of the first column and checking if it surpasses the line-height...if so, then relocate it. However, I believe the initial method is more efficient (no reliance on JS, no screen adjustments, etc.).

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

`Moving around age verification box with javascript`

I'm currently working on an Age Verification Splash page, but I'm feeling a bit lost. My script is set up to redirect users to Google if they are under 18, and to the main site if they are 18 or older. This is my first time dealing with splash ...

javascripthtmlcsssplash-screen

Exploring the functionality of buttons within jQuery Impromptu

My current project involves creating a survey composition tool. The main focus is on having a preview button that displays the values inputted by the user. <!doctype html> <html> <head> &l ...

javascriptjqueryhtml

What is the best way to display a variable in Angular that contains HTML without the need for an additional container?

Having trouble with this idea: <ng-container [innerHTML]="dataThatContainsHtml"></ng-container> The code that works, but adds an unnecessary html element: <div class="avoid me" [innerHTML]="dataThatContainsHtml"></div> Any sugge ...

htmlangularpipe

Troubleshooting IE's Compatibility Issue with Inline SVG as Background Image

My goal is to set the background-image CSS property to encoded data URI content, as demonstrated in this fiddle. Everything runs smoothly in all browsers I've tested, except for IE 9/10. For some reason, IE 9/10 doesn't display the contents. Ho ...

csssvgraphaelbackground-image

An issue with the n constructor has been encountered for the bs4.5.2 dropdown in combination with jQuery version 3.5.1

When looking at index.html, I have these scripts included: <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protectio ...

javascriptjquerybootstrap-4drop-down-menudropdown

Leverage the utility API provided by Bootstrap in my SCSS stylesheet

The Bootstrap documentation provides instructions on how to implement negative margins, but these are typically used when customizing Bootstrap. Even though I am using Bootstrap from a CDN, I still need access to those specific classes (e.g., mt-n1). I wo ...

twitter-bootstrapsassbootstrap-5scss-mixins

Guide on how to position the icon for the Ant Design datepicker before the input selector rather than after

Looking for a way to set the icon with or without a pseudo element for Ant Design, I've tried a method that isn't working. .ant-picker-input > input::before { content: url('../../public/assets/calendar.svg') !important; margin-r ...

cssreactjsant-design-pro

Creating CSS media queries for two specific breakpoint ranges can help to optimize the layout

My current design presents a challenge on larger screens (1400px+) where there is a wide content area with three side columns. As the screen size decreases, the number of aside columns reduces and the main content shrinks accordingly. This situation requir ...

cssmedia-queries

How can I set the end date value in JQuery datepicker to be empty

Solution: <html> <head> <script type="text/javascript"> $(function(){ $("#datepicker1").datepicker({ dateFormat: 'dd-mm-yy', onSelect: function(selected){ $("#datepicker2").datepicker("option" ...

phpjqueryhtml

I am looking to create a feature for my table that adjusts its color scheme based on whether the number is odd or even

My current code is designed to change the background color of td elements for odd and even rows. However, when a new high score is entered, a new td is added but it does not get colored automatically as intended. I am facing an issue where the code is not ...

htmlcss

Managing Events for a Menu Item That Cannot Be Selected

As I work on developing a form using Material UI React, my focus is on logging exercise sets to the database. To allow users to select the exercise they wish to log, I have incorporated a list of Material UI Menu Item components as options. Additionally, I ...

htmlreactjsmaterial-ui

Unable to interact with the <svg></svg> element and enter the desired value

The <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">...</svg> cannot be clicked and the value of <input class="opacity-0 absolute top-0 lef ...

pythoncssselenium-webdriverxpath

Sketch lines within the accordion

In my design, I have nested accordions and I am trying to create a graphical representation with vertical and horizontal lines connecting the elements. Here is the basic structure: <div id="accordion3" class="collapseblock"> <div class="cardsm ...

htmlcssbootstrap-4

Matching an apostrophe in an AutoHotkey script using regex

My autohotkey script is designed to search for a word in a bilingual dictionary when I double click on any word within a webpage. However, I am facing an issue where the script also copies the characters preceding the apostrophe when clicking on words like ...

htmlregexescapingautohotkeyapostrophe

utilizing jquery to trigger events based on scrolling

I am working with a HTML class that contains various elements. I want to add a new class to the first element when it reaches the top of those elements, and then continue adding the class to the subsequent elements as the page is scrolled. I've attemp ...

javascriptjqueryhtmlcss

Direct your attention towards the specific target div element using the get function

I need assistance with a webpage where items are listed using unique ids. I want the page to scroll up or down, depending on which link the user clicks, to find the element with the id specified in the address bar as foo=or2. Additionally, I would like the ...

jqueryhtmlcss

Inspecting element value on a website

On a marketplace website, I extracted the attribute (capacity_gold) from a table. Since the values are dynamic and constantly changing, I aim to develop a basic script that will notify me when the attribute value exceeds 100. The current value of the attr ...

javascripthtml

Using scope variables in AngularJS version 1.4.8 with ng-style

index.html: <script src="app.js"></script> <div ng-app="app" ng-controller="app" ng-style="{ color: thecolor }"> foo </div> app.js: angular.module("app", []) .controller("app", function() { $scope.thecolor = "red"; }); Fid ...

cssangularjsangularjs-scope

Encountering a z-index problem while viewing videos in 768 resolution on Safari and IE8

Currently, I am encountering a z-index problem with videos in IE8 and Safari browsers. Click here to visit the link Even after reducing the z-index, the video on this page appears on top at 760 resolution. It does not seem to respond to any properties. F ...

htmlipadcsssafari

Using Bootstrap to handle opening a link when a dropdown menu button is clicked

Utilizing Bootstrap in my main menu was essential for navigating through the numerous pages, subpages, and sub-subpages within my project. The dropdownmenu feature proved to be very helpful in this regard. However, my client now has a specific request - t ...

javascriptjquerycsstwitter-bootstrapdrop-down-menu