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?

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


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.


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 class="col-lg-6 col-md-6 col-xs-12 col-sm-6">
    <!-- Your second column goes here -->
</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.