bootstrap-5

Show text in 3 cols

i have large piece of text. The idea is that i want to show this tex in 3 cols of col-lg-4. Like a magazine user starts reading first col and second continues next to each other.

Is there a trick in bootstrap todo this?

remco

Solution

  • If I understand your question correctly, you want one large body of text that carries over into three columns if it's too big. I don't think this works because of how html works. If the text is in one of the col-lg-4 div, then it can't just continue over into a separate div. This is the next best option:

    <style>
.multi-column {
  column-count: 3; /* Number of columns */
  column-gap: 20px; /* Gap between columns */
}
</style>

</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="multi-column">
          <p>
            
          </p>
        </div>
      </div>
    </div>
  </div>
</body>

    The point of this code is to split the lg-12 bootstrap column into 3 parts that are all one div, allowing the text to overflow into the next column. I hope this helps even if it uses a little custom css.