How to override responsive features in Twitter Bootstrap 2?

Question

I have a site using twitter bootstrap and am using some of the responsive features. It works fine on the desktop and the mobile devices. Shrinking my window on the desktop cause the responsive grid to kick in, and the responsive grid is served to the mobile device appropriately.

However, is it possible for an iPhone user to access the 'non-responsive' version? It's usually safe for iPhone and android phones to access the 'full' version of most sites, so I'd like to offer that as an option for the mobile users.

Back before 'responsive' was the hottest thing, this was typically handled via client browser detection and the backend routed the clients to two completely different sites, pages, or themes to render the content, and there was usually some kind of link or button afforded to the user to allow them to visit the full-site instead. I'm trying to replicate that usage pattern.

score 2 · Accepted Answer · edited May 23 '17 at 12:29

If you don't want to reload your page after the change to the "desktop" version you could try to disable your repsonsive stylesheet(s). See: Removing or replacing a stylesheet (a <link>) with JavaScript/jQuery and https://stackoverflow.com/a/15824131/1596547. Also Removing the stylesheet seems to work.

Some proof of concept with removing the responsive stylesheet:

css:

<link href="bootstrap-responsive.css" rel="stylesheet" id="responsivecss">

javascript:

    var responsivecss = true;

    $('#switch').click(



    function ()
        {
            if(responsivecss)
            {
        $('#responsivecss').remove();
      $(this).text('Mobile version');           
              responsivecss = false;

            }
            else
            {
      $('head').append('<link href="bootstrap-responsive.css" rel="stylesheet" id="responsivecss">');
      $(this).text('Desktop version');
                responsivecss = true;
            }       



        }

    );

Try it: http://plnkr.co/LdOUquuYPMnOOd5UrBtZ

Twitter's Bootstrap 3

TB3 don't have a separate responsive CSS file. To do the same you will have to create a css file without the responsive features (see: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/) an switch these files on click.

How to override responsive features in Twitter Bootstrap 2?

1 Answers1

Twitter's Bootstrap 3