CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
Jonathan S. Fisher
Jonathan S. Fisher

Reputation: 8837

Two Columns Bulleted Lists in responsive twitter bootstrap

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!

Upvotes: 7

Views: 19520

Answers (2)

Theo
Theo

Reputation: 2799

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>

Upvotes: 9

Caner
Caner

Reputation: 1498

this should help in case you have one ul an many li's

css

  @media (min-width:768px) { 
    .col2{ width:100%;}
    .col2 li{width:49%; float:left;}
  }

html(haml)

  .box-body      
    .row-fluid
      %ul.col2.clearfix
       [email protected] do |category|
         %li
         =category.title

Upvotes: 1

Related Questions