Bootstrap 3 Responsive Desktop and Mobile Layout

Bootstrap 3 responsive desktop and mobile layout

The row-fluid and container-fluid are deprecated from BS 3, so now you just use container and row

You can use the new "small" grid classes (col-sm-*) to prevent the layout from stacking on smaller display..

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-sm-3">
            <div class="well">

            </div>
        </div>
        <div class="col-lg-9 col-sm-9">

            <div class="col-lg-6 col-sm-6">
                <div class="well">

            </div>
            </div>

            <div class="col-lg-6 col-sm-6">
                <div class="well">

                 </div>
            </div>

        </div>
    </div>
</div>

Demo: http://bootply.com/71450

If you want it to never stack, even on the smallest displays, use the tiny col-xs-* grid classes.

Bootstrap 3 responsive desktop and mobile layout

The row-fluid and container-fluid are deprecated from BS 3, so now you just use container and row

You can use the new "small" grid classes (col-sm-*) to prevent the layout from stacking on smaller display..

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-sm-3">
            <div class="well">

            </div>
        </div>
        <div class="col-lg-9 col-sm-9">

            <div class="col-lg-6 col-sm-6">
                <div class="well">

            </div>
            </div>

            <div class="col-lg-6 col-sm-6">
                <div class="well">

                 </div>
            </div>

        </div>
    </div>
</div>

Demo: http://bootply.com/71450

If you want it to never stack, even on the smallest displays, use the tiny col-xs-* grid classes.

How to achieve this desktop/mobile layout with Bootstrap 3?

This is very simple and you can do it using the grid system already within bootstrap.

.blue {  background: blue;}.green {  background: green;}.red {  background: red;}
.row-500 {  width: 500px;  margin: 0 auto;}
@media screen and (max-width: 500px) {  .row-500 {    width: 250px;  }}

<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row-500">  <div class="col-md-6 blue">250px</div>  <div class="col-md-6 green">250px</div></div><div class="row-500">  <div class="col-md-12 red">500px unless under 500px then its 250px</div></div>

Bootstrap 3 - desktop view on a mobile device

You Just need to set the Viewport

Make a Link like you said, and this link is a reload of the page but with a ?desktop_viewport=true, then you can set a Session and as long as that session is set you write this

<meta name="viewport" content="width=1024">

Instead of this (Responsive version)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

In your <head>

Use this as a button

<a href="mywebsite.php?show_desktop_mode=true">I want desktop mode!</a>

And insert this at the top of your php-file (witch must be loaded on every page)

<?php
session_start();
if($_GET['show_desktop_mode'] == 'true') {
    $_SESSION['desktopmode'] = 'true';
}
?>

After doing that, you have to change the viewport according to the Sessionvalue by doing this in <head>

<?php
if($_SESSION['desktopmode'] == 'true') {
    /* DESKTOP MODE */
    ?>
    <meta name="viewport" content="width=1024">
    <?php
} else {
    // DEFAULT
    ?>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php
}
?>

How to show desktop version on mobile screens, in Bootstrap 3?

If you want to do this, you're going to have to dynamically change your viewport tag based on the width of the screen.

The viewport meta tag is what makes responsive design possible on mobile devices by forcing the browser to use the device-width as the width for the viewport. By removing this restriction, most mobile devices will lie about their width in order to get the full site. With javascript you can dynamically change it based on the page width

Start by including the tag in your HTML head element:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Then we'll listen to the resize event and change the viewport according to your business rules:

$(window).resize(function() {
    var mobileWidth =  (window.innerWidth > 0) ? 
                        window.innerWidth : 
                        screen.width;
    var viewport = (mobileWidth > 360) ?
                    'width=device-width, initial-scale=1.0' :
                    'width=1200';
    $("meta[name=viewport]").attr('content', viewport);
}).resize();

Here's a working Demo in Fiddle

Note: Desktop browsers ignore the viewport tag so this will not have any affect on your development machine. In order to test these changes, you can open up the chrome debugger tools and emulate a mobile device.

Here's a screenshot:

screenshot

That all being said, I would work with your user to advise against this.

Here's a quick article I just threw up on Adding a Desktop Mobile Toggle Button

It's generally not a good idea to prevent the end user from doing something that they want to do. Your first goal should be to develop a site that works well on small devices. If a user really wants to see a zoomed out view, then you can provide a toggle switch for them at the bottom of the page.

bootstrap 3 column responsive

Set all div's classes to col-xs-4:

<div class="col-xs-4">First</div>
<div class="col-xs-4">Second</div>
<div class="col-xs-4">Third</div>

bootstrap v3: creating two different rows for mobile vs. desktop view ports

It's valid, but it really depends on the specific layout you're trying to have for each (mobile and desktop). Normally the responsive utility classes are used as a "last resort" since they do require duplicate markup.

From the Bootstrap docs..

"Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation."

First try other responsive grid options that Bootstrap offers such as using different grid sizes/breakpoints, column wrapping, nesting, ordering etc..

For example, here's how you can create one version for both desktop and mobile. This uses multiple grid sizes/breakpoints and column ordering (push-pull).

How to make my website responsive for Desktop and phones?With media queries or bootstrap or anything

There are other things and frameworks other than media queries you might consider when making websites responsive.

1: Use Flexbox

The CSS3 Flexible Box, or more widely known as Flexbox, is a new and powerful layout mode in CSS3. It provides us with a box model optimized for laying out user interfaces. With Flexbox, vertical centering, same-height columns, reordering and changing direction is a breeze.

Resource: https://flexboxfroggy.com/

2: Use CSS-Media Queries

CSS Grid is the most powerful layout system available in CSS. It brings a two-dimensional layout tool to the web, with the ability to place items in rows and columns. The importance of grids in modern web design is high so this new spec solves a lot of age-old problems with laying out elements in-browser.

Resource: https://flexboxfroggy.com/

3: Use Bootstrap

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.
Bootstrap is completely free to download and use!
Bootstrap is a framework to help you design websites faster and easier. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, etc. ... Here are some additional reasons to use Bootstrap: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops.

4: Use Foundtation

Foundation is also counted among exceptional front-end frameworks. It is an ultra responsive framework that is used to create seamless designs to create websites, applications for the web and mobile and email templates. Foundation is the easiest framework to learn and thus it can easily be used by a new user. This exceptional framework has got a number of components including layouts, navigation, media, library containers and much more. Foundation has also got an exceptional list of plugins that offers extended choice to the developers to choose one accordingly.

Tip: When making a website, try to make it mobile first. i.e first make the website responsive for mobile views and then make it for desktop. The reason behind it is that if you make it mobile first, then it also looks good on desktop. But if you design desktop first, it won't look good on mobile.

Hope it helps

Bootstrap 3 Responsive Desktop and Mobile Layout

Bootstrap 3 responsive desktop and mobile layout

Bootstrap 3 responsive desktop and mobile layout

How to achieve this desktop/mobile layout with Bootstrap 3?

Bootstrap 3 - desktop view on a mobile device

How to show desktop version on mobile screens, in Bootstrap 3?

Here's a working Demo in Fiddle

Here's a screenshot:

bootstrap 3 column responsive

bootstrap v3: creating two different rows for mobile vs. desktop view ports

How to make my website responsive for Desktop and phones?With media queries or bootstrap or anything

Related Topics

Leave a reply