Two Columns Bulleted Lists in responsive twitter bootstrap

css, html, responsive-design, twitter-bootstrap

Solution

I would use a fluid grid system inside the span4 div tag. Check out the fluid grid system here... http://getbootstrap.com/css/#grid

Using this method, the lists will stack on each other again when the screen is small.

Here's an example...

<html>
<head>
    <title></title>
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
        <div class="container">
            <div class="row">
                <div class="span4">
                    <h4>Column 1</h4>
                    <div class="container-fluid">
                        <div class="row-fluid">
                            <div class="span6">
                                <ul>
                                    <li>Item 1</li>
                                    <li>Item 2</li>
                                    <li>Item 3</li>
                                </ul>
                            </div>
                            <div class="span6">
                                <ul>
                                    <li>Item 4</li>
                                    <li>Item 5</li>
                                    <li>Item 6</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="span4">
                    <h4>Column 2</h4>
                </div>
                <div class="span4">
                    <h4>Column 3</h4>
                </div>
            </div>
        </div>
</body>
</html>

Problem

This is my first foray into Twitter Bootstrap. Take a look at this template here: http://twitter.github.com/bootstrap/examples/hero.html Underneath one of the headings, I'd like to break a long `ul` into two columns: *item1 *item4 *item2 *item5 *item3 *item6 It can be two separate `<ul>`s in the code, it just needs to look like two bulleted columns next to each other. Can someone recommend a method to me? My problem so far is keeping it responsive to screen size so on narrows screens the two separate lists somewhat stack on each other again. Thanks!

Original source