3

I am trying to figure out the best way to create vertical multi-column lists in a grid framework like Bootstrap or Foundation. I already know how to do this in a couple of ways, but the way I want it I am not sure is possible to do with just CSS. I need the li tags to come directly after the ul tag without a col-*-* divs between.

To best describe what I want, I'll first show most people would roughly go about a 3 column list:

<ul class="row">
    <li class="col-sm-4">A</li>
    <li class="col-sm-4">B</li>
    <li class="col-sm-4">C</li>
    <li class="col-sm-4">D</li>
    <li class="col-sm-4">E</li>
    <li class="col-sm-4">F</li>
</ul>

The problem here is that the output will not be vertically read, and that is what I want. This would produce more of a horizontal list where the columns are not in the desired order like this:

A    B    C
D    E    F

Now here is my solution (not good enough):

<div class="row">
    <div class="col-sm-12">
        <div class="row">
            <ul>
                <div class="col-sm-4">
                    <li>A</li>
                    <li>B</li>
                    <li>C</li>
                    <li>D</li>
                    <li>E</li>
                    <li>F</li>
                    <li>G</li>
                </div>
                <div class="col-sm-4">
                    <li>H</li>
                    <li>I</li>
                    <li>J</li>
                    <li>K</li>
                    <li>L</li>
                    <li>M</li>
                    <li>N</li>
                </div>
                <div class="col-sm-4">
                    <li>O</li>
                    <li>P</li>
                    <li>Q</li>
                    <li>R</li>
                    <li>S</li>
                    <li>T</li>
                    <li>U</li>
                </div>
            </ul>
        </div>
    </div>
</div>

This way I get the desired order result of:

A    H    O
B    I    P
C    J    Q
D    K    R
E    L    S
F    M    T
G    N    U

But it's not good enough for me because the li tags do not immediately follow after the ul tag.

Is there any way I can accomplish this 3 column list without separating groups of li tags from one another?

Note: I'd also like to point out the benefit of doing it like example #1 which would give you automatic columns so that's great if you're working on an app or with PHP. I would hopefully like to keep that functionality if possible.

Thank you in advance to any assistance. This is tough to describe so please ask me a question to clarify if you don't understand. Thanks!

Improve this question
2
  • Unless you have some specific need for all the <li> tags to be children of the same <ul>, I would just have one <ul> per col-sm-4 div Commented Nov 13, 2015 at 18:50
  • This is pretty much what I am doing in the second code example, without having to define multiple ul elements. However your method could still be a solution because what I really want to do is use the CSS selector ul > li and my example would not allow that because the li's are no longer direct children. Commented Nov 13, 2015 at 19:54

1 Answer 1

Reset to default
1

I believe this is what you're trying to do or hopefully it helps you figure out exactly what you're trying to do.

Example 1: columns as the unordered list class and your content inside the list items.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <ul class="col-sm-4 list-unstyled">
      <li class="alert alert-info">A</li>
      <li class="alert alert-info">B</li>
      <li class="alert alert-info">C</li>
      <li class="alert alert-info">D</li>
      <li class="alert alert-info">E</li>
      <li class="alert alert-info">F</li>
      <li class="alert alert-info">G</li>
    </ul>
    <ul class="col-sm-4 list-unstyled">
      <li class="alert alert-danger">H</li>
      <li class="alert alert-danger">I</li>
      <li class="alert alert-danger">J</li>
      <li class="alert alert-danger">K</li>
      <li class="alert alert-danger">L</li>
      <li class="alert alert-danger">M</li>
      <li class="alert alert-danger">N</li>
    </ul>
    <ul class="col-sm-4 list-unstyled">
      <li class="alert alert-warning">O</li>
      <li class="alert alert-warning">P</li>
      <li class="alert alert-warning">Q</li>
      <li class="alert alert-warning">R</li>
      <li class="alert alert-warning">S</li>
      <li class="alert alert-warning">T</li>
      <li class="alert alert-warning">U</li>
    </ul>
  </div>
</div>

Example 2: A nested grid with rows as the unordered list class and columns as list items with your content inside.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <div class="col-sm-4">
      <ul class="row list-unstyled">
        <li class="col-sm-12">
          <div class="alert alert-info">A</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-info">B</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-info">C</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-info">D</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-info">E</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-info">F</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-info">G</div>
        </li>
      </ul>
    </div>
    <div class="col-sm-4">
      <ul class="row list-unstyled">
        <li class="col-sm-12">
          <div class="alert alert-danger">H</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-danger">I</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-danger">J</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-danger">K</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-danger">L</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-danger">G</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-danger">N</div>
        </li>
      </ul>
    </div>
    <div class="col-sm-4">
      <ul class="row list-unstyled">
        <li class="col-sm-12">
          <div class="alert alert-warning">O</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-warning">P</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-warning">Q</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-warning">R</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-warning">R</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-warning">T</div>
        </li>
        <li class="col-sm-12">
          <div class="alert alert-warning">U</div>
        </li>
      </ul>
    </div>
  </div>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.