0

I am using bootstrap theme. I am trying to create responsive list items. When viewing the page in tablet, laptop, desktop, I would like to see items in two columns. When viewing the page in mobile, list should display in a single column. I entered the below code in body field but it is not working for me. I googled for some bootstrap classes but I could not find anything specific. Can you please advise how I can write the code to create responsive list items?

<table>
<tr> <td class = "col-lg-6 col-md-6 col-xs-12 col-sm-6"> 
<ul>
<li>Probate Problems</li>
  <li>Title Issues</li>
  <li>Foreclosure</li>
  <li>Liens</li>
  <li>Judgements</li>
  <li>Code Violations</li>
  <li>Job Transfer</li>
</ul></td>
<td class = "col-lg-6 col-md-6 col-xs-12 col-sm-6">  <ul>
  <li>Mold</li>
  <li>Divorce</li>
  <li>Tenants Issues</li>
  <li>Behind on Taxes</li>
  <li>Fire Damage</li>
  <li>Foundation Problems</li>
  <li>Run-down Properties</li>
</ul></td></tr>


</table>

closed as off-topic by Clive Mar 13 '17 at 2:00

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on programming, PHP, SQL, etc. that do not relate directly to Drupal are off-topic here, but can be asked on Stack Overflow." – Clive
If this question can be reworded to fit the rules in the help center, please edit the question.

1

You might need to use the Bootstrap column classes with divs instead of table elements, inside of a "row" element, which must be inside a "container" element:

<div class="container">
<div class="row">
  <div class="col-lg-6 col-md-6 col-xs-12 col-sm-6">
    <!-- Your first column goes here -->
  </div>
  <div class="col-lg-6 col-md-6 col-xs-12 col-sm-6">
    <!-- Your second column goes here -->
  </div>
</div> <!-- End row -->
</div> <!-- End container -->

There is more information about using the Bootstrap grid system in the main Bootstrap page.

  • You can also use container-fluid class instead of container if you want fluid layout. Also col-lg-6 and col-md-6 are not required in this example. – Ash U Mar 12 '17 at 23:26

Not the answer you're looking for? Browse other questions tagged or ask your own question.