How can I wrap Bootstrap 5 columns based on interior text wrap?

user_7938152 0
Viewed 362

With Bootstrap 5, assuming the following, is there a way to have Bootstrap lay out 2 rows with one column each if the text within one cell "My text" or "My other text" is wrapped?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>

bootstrap-5 twitter-bootstrap css
1 Answers

You probably don't need conventional row and column classes here. They bring some things to the table that get in the way for this. Just go with bare flex, and set wrap on the row and nowrap on the column.

Switch between standard and full page modes to see it work.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>

user_12648040
Related