Home/ Questions/Q 8127433
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T07:31:45+00:00

This is my first foray into Twitter Bootstrap. Take a look at this template

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0