Tips for shifting text from the first column to the second column after completing the content in the first

Question

Tips for shifting text from the first column to the second column after completing the content in the first

Is there a way to continue text in the second column after filling up the first column vertically? I experimented with white space but it didn't work. Any suggestions?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e5878a8a919691978495a5d1cbd3cbd4">[email protected]</a>/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
  <div class="row w-50">
    <div class="col bg-light ml-5">
      <div>
        <p>a</p>
        <p>b</p>
        <p>c</p>
        <p>d</p>
        <p>e</p>
        <p>f</p>
        <p>g</p>
      </div>
    </div>
    <div class="col bg-secondary"></div>
  </div>
</div>

</body>
</html>

.col{
        height: 200px;
    }

This is what the current output looks like https://i.sstatic.net/zsjPV.png

This is how we want the output to look like https://i.sstatic.net/ccUZS.png

html css bootstrap-4 flexbox overflow

Answer 1

Answer №1

The simplest method to achieve this is by using the column-count property along with column-fill: auto. Unfortunately, there is no documentation indicating that Bootstrap has implemented this feature themselves.

div {
  column-count: 2;
  column-fill: auto;
  height: 200px;
}

<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

Answer 2

The simplest method to achieve this is by using the column-count property along with column-fill: auto. Unfortunately, there is no documentation indicating that Bootstrap has implemented this feature themselves.

div {
  column-count: 2;
  column-fill: auto;
  height: 200px;
}

<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

Answer 3

Answer №2

If you're looking for a more versatile approach, consider using the "flex" property.
Simply add "display:flex; flex-direction:column" to the container div and utilize the "flex-wrap:wrap" attribute (similar to "wrap text" in Excel).

    .flex-container{
        display:flex;
        flex-direction:column;
        flex-wrap:wrap;
        height:200px
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8984849f989f998a9babdfc5ddc5da">[email protected]</a>/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
  <div class="row w-50">
    <div class="col bg-light ml-5">
      <div class="flex-container">
        <p>a</p>
        <p>b</p>
        <p>c</p>
        <p>d</p>
        <p>e</p>
        <p>f</p>
        <p>g</p>
      </div>
    </div>
    <div class="col bg-secondary"></div>
  </div>
</div>

</body>
</html>

Answer 4

If you're looking for a more versatile approach, consider using the "flex" property.
Simply add "display:flex; flex-direction:column" to the container div and utilize the "flex-wrap:wrap" attribute (similar to "wrap text" in Excel).

    .flex-container{
        display:flex;
        flex-direction:column;
        flex-wrap:wrap;
        height:200px
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8984849f989f998a9babdfc5ddc5da">[email protected]</a>/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
  <div class="row w-50">
    <div class="col bg-light ml-5">
      <div class="flex-container">
        <p>a</p>
        <p>b</p>
        <p>c</p>
        <p>d</p>
        <p>e</p>
        <p>f</p>
        <p>g</p>
      </div>
    </div>
    <div class="col bg-secondary"></div>
  </div>
</div>

</body>
</html>

Answer 5

Answer №3

I gave this a shot and it actually does the job.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  .col50 {
    display: inline-block;
    vertical-align: top;
    width: 48.2%;
    margin: 0;
  }
</style>
<script>
  $(document).ready(function() {
    var columns = 2;
    var size = $("#data > p").size();
    var half = size / columns;
    $(".col50 > p").each(function(index) {
      if (index >= half) {
        $(this).appendTo(".col50:eq(1)");
      }
    });
  });
</script>
<div id="data" class="col50">
  <!-- data Start -->
  <p>This is text 1. </p>
  <p>This is text 2. </p>
  <p>This is text 3. </p>
  <p>This is text 4. </p>
  <p>This is text 5. </p>
  <p>This is text 6. </p>
  <p>This is text 7. </p>
  <p>This is text 8. </p>
  <p>This is text 9. </p>
  <p>This is text 10. </p>
  <p>This is text 11. </p>
  <p>This is text 12. </p>
  <p>This is text 13. </p>
  <p>This is text 14. </p>
  <p>This is text 15. </p>
  <!-- data End-->
</div>
<div class="col50"></div>

Answer 6

I gave this a shot and it actually does the job.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  .col50 {
    display: inline-block;
    vertical-align: top;
    width: 48.2%;
    margin: 0;
  }
</style>
<script>
  $(document).ready(function() {
    var columns = 2;
    var size = $("#data > p").size();
    var half = size / columns;
    $(".col50 > p").each(function(index) {
      if (index >= half) {
        $(this).appendTo(".col50:eq(1)");
      }
    });
  });
</script>
<div id="data" class="col50">
  <!-- data Start -->
  <p>This is text 1. </p>
  <p>This is text 2. </p>
  <p>This is text 3. </p>
  <p>This is text 4. </p>
  <p>This is text 5. </p>
  <p>This is text 6. </p>
  <p>This is text 7. </p>
  <p>This is text 8. </p>
  <p>This is text 9. </p>
  <p>This is text 10. </p>
  <p>This is text 11. </p>
  <p>This is text 12. </p>
  <p>This is text 13. </p>
  <p>This is text 14. </p>
  <p>This is text 15. </p>
  <!-- data End-->
</div>
<div class="col50"></div>

Tips for shifting text from the first column to the second column after completing the content in the first

Answer №1

Answer №2

Answer №3

Similar questions

Troubleshooting: How to Fix Missing Sum Display in HTML Input Fields

Is there a way for me to retrieve the header values of a table when I click on a cell?

Tips for handling external CSS dependencies in a Create React App project

A bar graph fails to display on d3 visualization

Insert a new store into an existing IndexedDB database that is already open

Challenges encountered in retrieving 'text' with Selenium in Python

Customizing CSS float labels for individual inputs

Ensuring Bootstrap Cards (version 4.4.1) Blend Seamlessly with Body Text for a Cohes

"Stylish navigation bar overlaying a stunning background image in Bootstrap 4.0

Randomly choose one of 5 pages and insert an HTML element at different intervals using JavaScript, jQuery, MySQL, or PHP

Tips for displaying three divs in one row and three divs in another row

Improving iframe functionality in AngularJS

Troubleshooting strange behavior with Silex and Twig CSS caching issues

Tips for ensuring that a span element outside of an anchor functions as though it were inside of it

The JSON.parse function encountered an unexpected character 'o' in the JSON data at position 1

Dash that serves as a barrier between two words to avoid them from breaking onto

Why does my dialog box only open the first time and not the second time?

Executing unique calculations on Kendo UI Grid Columns

Grid items displaying incorrectly due to text alignment issues

When the menu mobile is open, I successfully disable scrolling on the body, but I am facing an issue where the desktop page always jumps back to the top