Bootstrap 3 responsive desktop and mobile layout

css twitter-bootstrap responsive-design twitter-bootstrap-3

28,799

Solution 1

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.

Solution 2

Looking through their documentation regarding the grid system (http://getbootstrap.com/css/), it would seem they have break points at <768, 768-992, 992-1200 and >1200 pixels, so you're now falling into the 'medium devices' category.

You could modify the bootstrap.css file to change the break points for your particular case.

@media (min-width: 992px) {

on lines 1002 and 4595.

Solution 3

In you main.css (or whatever name you placed), do something like code below:

@media(max-width:1024px) {
  body {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  #heading > .container {
    padding: 0 15px;
  }

  #main-content > .container {
    padding: 0 15px;
  }

  #footer > .container {
    padding: 0 15px;
  }
  #heading h1 {
    font-size: 50px;
    line-height: 55px;
  }
  #heading h4 {
    font-size: 20px;
    line-height: 25px;
  }
}

28,799

Author by

Mohamed Nagy

Full stack developer, has solid knowledge in PHP (Laravel Framewrok), Javascript(Jquery, Angularjs) ,HTML, CSS and Bootstrap

Updated on July 09, 2022

Comments

Mohamed Nagy almost 2 years

Using bootstrap 3 to design my responsive website, I'm having trouble getting the layout to work below a desktop width resolution of 1366px v 786px. When the layout is decreased down to 1024px, it is considered the mobile breakpoint.

How can I control when the layout switched from desktop to mobile layout? 1366*768 resolution 1024*768 resolution

this is my html

<body>
<div class="container-fluid">

    <div class="container-fluid header">
        <div id="container">        
        </div>
    </div>

    <div class="row-fluid">

        <div class="col-lg-3">
            <div class="well">

            </div>
        </div>

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

            <div class="col-lg-6">
                <div class="title">
                    <h3>title 1</h3>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="title">
                    <h3>title 2</h3>
                </div>
            </div>

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