What is the best way to wrap Bootstrap 5 columns according to the text inside them?

When using Bootstrap 5, is there a way for Bootstrap to arrange two rows with one column each if the text in one cell is wrapped and contains "My text" or "My other text"?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43212c2c37303731223303766d726d70">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <div class="row row-cols-2">
    <div class="col">My text</div>
    <div class="col">My other text My other text My other text My other text </div>
  </div>
</div>

csstwitter-bootstrapbootstrap-5

Answer №1

Avoid using traditional row and column classes in this case as they can complicate things. Instead, opt for a simpler approach with bare flex and set wrap for the row and nowrap for the column.

Try switching between standard and full page modes to see the difference.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2808d8d969196908392a2d7ccd3ccd1">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">
  <div class="d-flex flex-wrap">
    <div>My text</div>
    <div class="text-nowrap">My other text My other text My other text My other text My other text </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

A technique for postponing the addition of a class to a div

I am attempting to create a unique type of slider effect. Inside a single div named #slider, I have 9 items displayed in a line. Link to JsFiddle The slider is 1860px wide, but only 620px is visible at any given time due to the parent having an overflow: ...

javascriptjqueryhtmlcss

Issue with Firefox causing Bootstrap form to appear incorrectly

I recently created a customized form using Bootstrap, but unfortunately, I'm encountering an issue with Firefox. Despite functioning perfectly on other browsers, the radio buttons are being pushed off the edge of the page and aren't displaying pr ...

javascripthtmlcsstwitter-bootstrap

Encountering an issue that states that jQuery must be included before Bootstrap's JavaScript is causing an

I encountered the following exception: bootstrap.js:240 Uncaught TypeError: Bootstrap's JavaScript requires jQuery. Make sure to include jQuery before Bootstrap's JavaScript at Object.jQueryDetection (bootstrap.js:240) at bootstrap.js:255 a ...

jqueryangulartwitter-bootstrap

What is the best way to share CSS styles between React and React Native?

Is it recommended to use inline CSS styles in a React / Next.js app to maintain code consistency across projects? For example, like this: import {StyleSheet, Dimensions} from 'react-native'; const vw = Dimensions.get('window').width / ...

cssreactjsreact-nativenext.jsshared-libraries

"Angular 6: A Guide to Customizing Text Colors Based on Status

I have a view on angular just like this: https://i.sstatic.net/JimWN.png And this is my dashboard.component.ts: export class DashboardComponent implements OnInit { tablePresetColumns; tablePresetData; ngOnInit() { this.tablePresetColumns = [{id: ...

htmlcssangularlessangular6

Error: Definition Already Exists

I'm currently debugging a layout and encountering some peculiar errors. The page is being served as DTD XHTML 1.0 Strict. The error message looks like this: ID "OFFICENAME" already defined: div class="office" id="officename" ID "OFFICENAME" origin ...

htmlcss

Steps to creating a proper cascade using the label statement

I am currently customizing the appearance of a checkbox. The HTML code in the file called fin1.cfm is as follows: <td>Master Event:</td> <td> <input type = "checkbox" id = "cb_e" name = "datesumm" value = "" > <label f ...

htmlcss

Transform Java code into HTML format for a visually appealing display similar to that in an Integrated Development Environment

Is there a way to showcase my Java code on an HTML page to resemble an Integrated Development Environment (IDE)? I've been searching for existing solutions but haven't found anything satisfactory yet. Ideally, I am looking for something similar t ...

javahtmlcssformattingide

Accordion borders in Bootstrap do not appear at the top when accordion items are hidden

I am currently using a Bootstrap 5 accordion component on my website. Additionally, I have implemented a JavaScript code snippet that allows users to search and hide specific accordion items dynamically. However, I have noticed that when the top accordion ...

jqueryborderaccordionbootstrap-5

The CSS3 slideshow is displaying distorted and unfocused images

I have a CSS code that controls the timing of my slideshow with 3 images: .slideshow li:child(1) span { background-image: url(../../pic/bg1.jpg); } .slideshow li:child(2) span { background-image: url(../../pic/bg2.jpg); -webkit-animation-de ...

javascripthtmlcss

What is the best way to reveal the square's id value upon hovering over it exclusively?

In this assignment, I am refraining from using HTML and focusing on JavaScript to create functionality. Here's my progress so far: document.addEventListener("DOMContentLoaded", function () { let button = document.createElement('button' ...

javascriptcssdom

Tips for locating direct children of a non-root element using CSS selectors in Selenium

When working with a <table> element, I encountered the need to search for its descendants and direct descendants while avoiding wading through nested tables. The elements I seek lack reasonable IDs, so specific selectors are essential: <html> ...

c#cssselenium

Can HTML/CSS be used to specifically target handheld mobile devices?

I am looking to optimize my video display in HTML by only showing it on desktop browsers. The difference in bandwidth between desktop and mobile devices is affecting the performance of mobile browsers, so I want to target only desktop users. Is there a way ...

javascripthtmlcssvideomobile

Fluid div causing navigation to display improperly

I am currently working on a navigation design where I want to have an image above each list item instead of having individual images for each item. It looks great when the screen is at full size, but as soon as I minimize it, the list items start stacking ...

htmlcss

Some devices experience currency symbol overlap problem with Money-rails Gem

I am currently using the most recent version of money-rails. However, I am facing an issue where the currency symbol from the humanized_money_with_symbol helper is overlapping with the value, as illustrated in the image below: https://i.sstatic.net/g2bwG. ...

ruby-on-railsrubyrubygemsbootstrap-5money-rails

Tips for resizing the dimensions of two div elements to fit the screen dimensions

Take a look at this template. It's interesting how the left content div and right sidebar divs adjust themselves based on the browser window size, zoom level, or viewing device such as a mobile phone. When viewed on a mobile, only the content div is d ...

csshtml

Overlap caused by padding between two elements

I'm encountering an issue where adding padding to a block element is causing it to overlap with the padding of other elements. Below is the code snippet showcasing this problem. <section class="hero"> <h1>Studying REDEFIN ...

htmlcss

Unable to open modals in Bootstrap using jQuery script: modal not popping up

My attempt to create functionality for two buttons and two modals - reserve a campsite (id="reserveButton" should open id="reserveModal") and Log in (id="loginButton" should open id="loginModal") is not working. I ha ...

javascriptjquerybootstrap-5

Unable to configure slick carousel to a 12-column grid in Bootstrap

When attempting to set my carousel to col-xs-12, the columns do not align correctly within the slick carousel in Bootstrap. If I change it to col-xs-6, it works fine but then two grids appear in one row. I require more space for my carousel. Could I be ov ...

jquerycsstwitter-bootstrap

Tips for updating the color of the first td element in a table using a specific class

Below is the CSS code for my table: table.show-my-request-table { border: 1px solid black; margin-left:auto; margin-right:auto; border-collapse: collapse; } tr.show-my-request-table-header{ border: 1px solid black; } tr.show-my-requ ...

htmlcssimagehtml-tablecss-selectors