How to get text to wrap over multiple columns in Bootstrap - flask

Question

I am building a site using Flask and Bootstrap and I have long lists of objects that I want to display on the page. I have a 6 column layout and I want the list spill over one column to the next. I know I can do this on the python side but I am wondering if there is a way that bootstrap or CSS can handle it?
UPDATE: better explanation --> I want a long list of names to be divided up in to six equal(ish) columns. I can divide the list on the backend but was hoping there is a way to do this on the front end.
UPDATE UPDATE: Duh! here is what I was looking for ...
'''Jinja
<div class="container">
<div class="row">
<div class="col-2">
<!--I want this part to flow over all 6 columns-->
{% for name in names %}
{{name.firstname}} {{name.lastname}} <br>
{% endfor %}
</div>
</div>
</div>
''''
Because the columns automatically wrap after 12 columns I don't need to code each column. That's what I was missing. Thank you everyone!

Answer 1

To make 6 even columns, you can create a single container, a single row then an element for each item in your list with the class "col-2" (these could be divs, links, list items, etc). Bootstrap will automatically make each element 1/6 of the screen wide. And even though you only have one "row" div, Bootstrap will make all of your elements flow into as many rows as needed.
The code below will give you 2 rows of 6 columns.
<div class="container-fluid">
<div class="row">
<div class="col-2">Element 1</div>
<div class="col-2">Element 2</div>
<div class="col-2">Element 3</div>
<div class="col-2">Element 4</div>
<div class="col-2">Element 5</div>
<div class="col-2">Element 6</div>
<div class="col-2">Element 7</div>
<div class="col-2">Element 8</div>
<div class="col-2">Element 9</div>
<div class="col-2">Element 10</div>
<div class="col-2">Element 11</div>
<div class="col-2">Element 12</div>
</div>
</div>

Answer 2

I think you can achieve what you want with simple bootstrap grid system.
<div class="row">
<div class="col-2"></div>
<div class="col-2"></div>
...
...
<div class="col-2"></div>
</div>

Answer 3

here is what I was looking for
'''Jinja
<div class="container">
<div class="row">
<div class="col-2">
<!--I want this part to flow over all 6 columns-->
{% for name in names %}
{{name.firstname}} {{name.lastname}} <br>
{% endfor %}
</div>
</div>
</div>
''''
I don't need to code each column separately! The for loop puts each item in a 2 column wide column that automatically wraps after 12 total columns. That's what I was missing. Thank you everyone!