Center list elements on mobile with bootstrap

Center list elements on mobile with bootstrap


I am working on the wikipedia viewer page. After a user searches a term, the search results appear below. The search results center on desktop but not mobile. I’ve tried changing column sizing, and row alignment with no luck.

Would you please take a look and see why this might be? Thanks!

Here is the link to my codepen.


Remove the extra */ at the end from the following:

/* .ui-page-active { outline: none; } /*stop jquery mobile from putting a border around entire window*/ */

and add the following to your ul selector:

padding: 0;

On a side note, I would recommend getting rid of the col-md-4 and changing the col-xs-3 to col-xs-4 in the following line. The current code causes the results section to become very narrow on large screens.

<div class="col-xs-3 col-md-4">