admin管理员组

文章数量:1417045

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

Is there a trick in bootstrap todo this?

remco

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

Is there a trick in bootstrap todo this?

remco

  • bootstrap-5
Share Improve this question edited Feb 20 at 12:03 Dylan 695 bronze badges asked Jan 31 at 11:34 RemcoRemco 6831 gold badge6 silver badges20 bronze badges 1
  • 1 No, as far as I know BS itself has not currently implemented this. You can do it yourself using your own CSS, go look into developer.mozilla./en-US/docs/Web/CSS/CSS_multicol_layout – C3roe Commented Jan 31 at 11:38
Add a comment  | 

1 Answer 1

Reset to default 1

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.

本文标签： bootstrap 5Show text in 3 columnsStack Overflow

版权声明：本文标题：bootstrap 5 - Show text in 3 columns - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745264797a2650534.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。