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>


1 Answer 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 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
    Commented Mar 12, 2017 at 23:26

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