CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
FlyingCat
FlyingCat

Reputation: 14250

How to show ul items in my case?

I am trying to keep my list item in a div that has 20px padding in the div. I also want to make the div responsive so it shows 3 columns or 4 columns based on the browser width.

My code:

<div>
   <ul class="list-inline">
      <li>items1</li>
      <li>items2</li>
      <li>items3</li>
      <li>items4</li>
      <li>items5</li>
      <li>items6</li>
      <li>items7</li>
      <li>items8</li>
   </ul>
</div>

every item is a rectangle div that contains bunch of information.

I want to divide the item to show

 --------------------------
|   
|   item1  item2  item3
|
|
|

or 

 -------------------
|   
|   item1   item2
|
|   item3
|

Based on the browser width. I also want to keep the minimum 20px of padding in the div.

How do I do this in bootstrap?

Upvotes: 2

Views: 54

Answers (1)

Devin
Devin

Reputation: 7720

Remember that most classes in BS are re-usable and can be applied to different elements, so in your specific case, just treat the UL and LI elements as DIV and simply work with them using the regular Bootstrap grid. Like this:

<div class="container">
   <ul class="row list-inline">
     <li class="col-lg-3 col-xs-4">items1</li>
     <li class="col-lg-3 col-xs-4">items2</li>
     <li class="col-lg-3 col-xs-4">items3</li>
     <li class="col-lg-3 col-xs-4">items4</li>
     <li class="col-lg-3 col-xs-4">items5</li>
     <li class="col-lg-3 col-xs-4">items6</li>
     <li class="col-lg-3 col-xs-4">items7</li>
     <li class="col-lg-3 col-xs-4">items8</li>
     <li class="col-lg-3 col-xs-4">items9</li>
     <li class="col-lg-3 col-xs-4">items10</li>
     <li class="col-lg-3 col-xs-4">items11</li>
     <li class="col-lg-3 col-xs-4">items12</li>
   </ul>
</div>

See Bootply here

As you can see, no much more than that, not even additional CSS, Bootstrap will take care of everything with its default classes

Upvotes: 4

Related Questions