IleNea IleNea - 2 months ago 20
CSS Question

Want display page the same no matter the screen size bootstrap

How can I style the page that the display to be the same on the small screen and also on the large screen? On the large screen everything is perfect, but if I move the page on a smaller screen, then the things start to mess up. The following code: (it is made with bootstrap and css)

<div class="list-group">
<ul class="panel-info col-lg-12 list">
<li class="list-group-item list__item col-lg-4" ng-repeat="entity in entitiesPaginated">
</li>
</ul>
</div>


I will not write here all the code because I think the most important part is the bootstrap part, what should I change on it in order that the display to be the same no matter the screen display? Thank you

Answer Source

set col classes also for the other viewports: col-md-,col-sm-,col-xs-*

Here an example:

<div class="list-group">
            <ul class="panel-info col-lg-12 col-md-12 col-sm-12 col-xs-12 list">
                <li class="list-group-item list__item col-lg-4 col-md-4 col-sm-4 col-xs-4" ng-repeat="entity in entitiesPaginated">
                </li>
            </ul>
</div>

You should read about the Bootstrap grid system