Bootstrap 3 only for mobile

Question

I have a site 1600px wide and I want to make that fit nicely on mobile only  How can I do with Bootstrap 3  I tried to use col-sm-   but also effects on larges screens because existing site is not coded as per Bootstrap grid  Is there any way I can use Bootstrap without effecting large screen

User · Answer

You can create a jQuery function to unload Bootstrap CSS files at the size of 768px, and load it back when resized to lower width. This way you can design a mobile website without touching the desktop version, by using col-xs-* only

function resize() {
if ($(window).width() > 767) {
$('link[rel=stylesheet][href~="bootstrap.min.css"]').prop('disabled', true);
$('link[rel=stylesheet][href~="bootstrap-theme.min.css"]').prop('disabled', true);
}   
else {
$('link[rel=stylesheet][href~="bootstrap.min.css"]').prop('disabled', false);
$('link[rel=stylesheet][href~="bootstrap-theme.min.css"]').prop('disabled', false);
}
}

and

$(document).ready(function() {
$(window).resize(resize);
resize();   

if ($(window).width() > 767) {
$('link[rel=stylesheet][href~="bootstrap.min.css"]').prop('disabled', true);
$('link[rel=stylesheet][href~="bootstrap-theme.min.css"]').prop('disabled', true);
}
});

User · Answer

I found a solution wich is to do    lt span class  visible-sm  gt  your code without col  lt  span gt   lt span class  visible-xs  gt  your code with col  lt  span gt    It s not very optimized but it works  Did you find something better  It really miss a class like col-sm-0 to apply colons just to the xs size

User · Answer

If you re looking to make the elements be 33 3  only on small devices and lower   This is backwards from what Bootstrap is designed for  but you can do this    lt div class  row  gt       lt div class  col-xs-4 col-md-12  gt  col-xs-4  col-md-12 lt  div gt       lt div class  col-xs-4 col-md-12  gt  col-xs-4  col-md-12 lt  div gt       lt div class  col-xs-4 col-md-12  gt  col-xs-4  col-md-12 lt  div gt   lt  div gt    This will make each element 33 3  wide on small and extra small devices but 100  wide on medium and larger devices   JSFiddle  http   jsfiddle net jdwire sggt8 embedded result   If you re only looking to hide elements for smaller devices   I think you re looking for the visible-xs and or visible-sm classes  These will let you make certain elements only visible to small screen devices   For example  if you want a element to only be visible to small and extra-small devices  do this    lt div class  visible-xs visible-sm  gt You re using a fairly small device  lt  div gt    To show it only for larger screens  use this    lt div class  hidden-xs hidden-sm  gt You re probably not using a phone  lt  div gt    See http   getbootstrap com css  responsive-utilities-classes for more information

[twitter-bootstrap] Bootstrap 3 only for mobile

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3