Bootstrap 4 - Column breaking onto a fresh line

Question

Bootstrap 4 - Column breaking onto a fresh line

I am facing a challenging issue with bootstrap 4.

Here is the problem: I have a row with two columns in the code snippet below. The first column contains an extremely long text without any spaces, while the second one is a small column specified as "col-auto".

<html>

    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    </head>

    <body>
        <div style="background-color: red; width: 500px;" class="container">
            <div class="row">
                <div class="col">
                    THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
                </div>
                <div class="col-auto">
                    RIGHT
                </div>
            </div>
        </div>
    </body>

</html>

The issue arises when my columns are displayed on two separate lines, rather than wrapping around as desired.

Please refer to the example image here:

https://i.sstatic.net/iMaP8.png

What I want is for the text to wrap properly, and look like this (without additional spaces):

https://i.sstatic.net/mtlDE.png

Can anyone advise if this is achievable? If so, which CSS property should be applied to which tag? I've tried using the width:auto attribute but haven't been successful.

Thank you

css bootstrap-4

Answer 1

Answer №1

Utilize break-word feature:

Given that col delegates grid management to bootstrap, achieving this outcome with col alone is not feasible. The solution involves adding the break-word property to the col class to prevent text overflow within the parent div.

.col {
  overflow-wrap: break-word;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div style="background-color: red; width: 500px;" class="container">
    <div class="row">
      <div class="col">
        THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
      </div>
      <div class="col-auto">
        RIGHT
      </div>
    </div>
  </div>
</body>

</html>

Implementing bootstrap col-x-x:

Alternatively, you can accomplish this using col-6 and applying it to both child div elements in order to signify two columns of equal height within the same row. However, due to the lengthy text, including break-word in the respective div is still necessary to avoid layout issues. For a more thorough understanding of Bootstrap's grid system and discovering tailored solutions, I recommend consulting the official Bootstrap documentation from here or exploring the W3Schools guide on Bootstrap grids at here. Here is the code snippet to achieve the desired result:

div.row>div:first-of-type.col-6 {
  overflow-wrap: break-word;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div style="background-color: red;" class="container">
    <div class="row">
      <div class="col-6">
        THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
      </div>
      <div class="col-6">
        RIGHT
      </div>
    </div>
  </div>
</body>

</html>

NOTE: To prevent further complications, removing width: 500px; from the parent element is advisable.

Answer 2

Utilize break-word feature:

Given that col delegates grid management to bootstrap, achieving this outcome with col alone is not feasible. The solution involves adding the break-word property to the col class to prevent text overflow within the parent div.

.col {
  overflow-wrap: break-word;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div style="background-color: red; width: 500px;" class="container">
    <div class="row">
      <div class="col">
        THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
      </div>
      <div class="col-auto">
        RIGHT
      </div>
    </div>
  </div>
</body>

</html>

Implementing bootstrap col-x-x:

Alternatively, you can accomplish this using col-6 and applying it to both child div elements in order to signify two columns of equal height within the same row. However, due to the lengthy text, including break-word in the respective div is still necessary to avoid layout issues. For a more thorough understanding of Bootstrap's grid system and discovering tailored solutions, I recommend consulting the official Bootstrap documentation from here or exploring the W3Schools guide on Bootstrap grids at here. Here is the code snippet to achieve the desired result:

div.row>div:first-of-type.col-6 {
  overflow-wrap: break-word;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div style="background-color: red;" class="container">
    <div class="row">
      <div class="col-6">
        THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
      </div>
      <div class="col-6">
        RIGHT
      </div>
    </div>
  </div>
</body>

</html>

NOTE: To prevent further complications, removing width: 500px; from the parent element is advisable.

Answer 3

Answer №2

To ensure text breaks correctly, utilize bootstrap's .text-break when dealing with plain text.

.text-break {
  word-break: break-word !important; // IE & < Edge 18
  overflow-wrap: break-word !important;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div style="background-color: red; width: 500px;" class="container">
    <div class="row">
      <div class="col text-break">
        THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
      </div>
      <div class="col-auto">
        RIGHT
      </div>
    </div>
  </div>
</body>

</html>

If the text is preformatted, using text-break won't apply. In such cases, where bootstrap lacks a preformatted text wrapping class, custom CSS is necessary.

.pre-text-wrap  {
  white-space: normal !important;
  word-break: break-all;
}

.pre-text-wrap {
  white-space: normal !important;
  word-break: break-all;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div style="background-color: red; width: 500px;" class="container">
    <div class="row">
      <div class="col">
        <pre class="pre-text-wrap">
                     THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</pre>
      </div>
      <div class="col-auto">
        RIGHT
      </div>
    </div>
  </div>
</body>

</html>

Alternatively, you can make use of bootstrap's .text-wrap along with word-break: break-all; to facilitate text wrapping.

.text-break-all {
   word-break: break-all;
}

Answer 4

To ensure text breaks correctly, utilize bootstrap's .text-break when dealing with plain text.

.text-break {
  word-break: break-word !important; // IE & < Edge 18
  overflow-wrap: break-word !important;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div style="background-color: red; width: 500px;" class="container">
    <div class="row">
      <div class="col text-break">
        THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
      </div>
      <div class="col-auto">
        RIGHT
      </div>
    </div>
  </div>
</body>

</html>

If the text is preformatted, using text-break won't apply. In such cases, where bootstrap lacks a preformatted text wrapping class, custom CSS is necessary.

.pre-text-wrap  {
  white-space: normal !important;
  word-break: break-all;
}

.pre-text-wrap {
  white-space: normal !important;
  word-break: break-all;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div style="background-color: red; width: 500px;" class="container">
    <div class="row">
      <div class="col">
        <pre class="pre-text-wrap">
                     THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</pre>
      </div>
      <div class="col-auto">
        RIGHT
      </div>
    </div>
  </div>
</body>

</html>

Alternatively, you can make use of bootstrap's .text-wrap along with word-break: break-all; to facilitate text wrapping.

.text-break-all {
   word-break: break-all;
}

Bootstrap 4 - Column breaking onto a fresh line

Answer №1

Answer №2

Similar questions

Guide on triggering a bootstrap modal by clicking on the image within an AngularJS application

Discover the current style being applied using JavaScript

Transferring a selection from a dropdown menu

Stylish date picker in CSS

A rightward sliding submenu that appears upon clicking a button

How to Style Bootstrap 4 Tables with Rounded Borders

Customizing the Mui Theme in a Unique Way

The font face feature does not seem to be functioning properly in the IE browser

Firefox is having trouble keeping <select> tags within their designated borders

Conceal a text field depending on the value within a hidden field that was populated automatically by a JavaScript function

What are the steps for enlarging the display containing components with the 'position: absolute' style?

jQuery neglecting events of child elements

Creating personalized labels with Vue.js and Element UI radio button components

Guide to adding an icon within an HTML `<input>` element

What could be causing my animation element to not be aligned in the center?

Entering text into the input field with the string "Foo"<[email protected]> is not functioning correctly

Preserve text input from a multi-line textarea

List of prices with a dotted line separating the price and product, adjusting its width based on

Need inspiration for testing web content with Protractor?