How to Disable the "Responsive" Grid in Bootstrap

How do I disable the responsive grid in bootstrap?

Removing the bootstrap-responsive.css should provide you the behavior which you desire. All the span* classes are explicit width in regular Bootstrap as long as you are using row and not row-fluid in the parent containers. The row class does not provide any width constraints, and none are made on the <body> either. However, the container class does have an explicit width of 940px in standard bootstrap.css.

How to remove responsive features in Twitter Bootstrap 3?

To inactivate the non-desktop styles you just have to change 4 lines of code in the variables.less file. Set the screen width breakpoints in the variables.less file like this:


// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs:                  1px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  2px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md:                  3px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg:                  9999px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min;

This sets the min-width on the desktop style media query lower so that it applies to all screen widths. Thanks to 2calledchaos for the improvement! Some base styles are defined in the mobile styles, so we need to be sure to include them.

Edit: chris notes that you can set these variables in the online less compiler on the bootstrap site

Disabling responsiveness and Column ordering

Also read http://getbootstrap.com/getting-started/#disable-responsive and /or try maybe. https://github.com/bassjobsen/non-responsive-tb3. Using the col-xs-* classes seems right (cause they never stack). The xs grid don't have pull, push and offset classes.

Add an float right seems a solution in your case:

<div class="container" style="background-color:white;">
    <div class="row">
    <div class="col-xs-9" style="background-color:red;float:right;">Right</div>
    <div class="col-xs-3" style="background-color:yellow;">Left</div>
    </div>
    <div class="row">
    <div class="col-xs-9" style="background-color:green;">Right</div>
    <div class="col-xs-3" style="background-color:blue;">Left</div>
    </div>
</div>

How to disable the responsive temporary

Well, remove the class names that indicate that it should be a different column layout on smaller screens.

.row {  background: #f8f9fa;  margin-top: 20px;}
.col {  border: solid 1px #6c757d;  padding: 10px;}
#block{  background:red;  min-width:1000px;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/><!--   Bootstrap docs: https://getbootstrap.com/docs--><div id="block">
<div class="container">  <div class="row">    <div class="col-6">      1 of 2    </div>    <div class="col-6">      2 of 2    </div>  </div>  <div class="row">    <div class="col-4">      1 of 3    </div>    <div class="col-4">      2 of 3    </div>    <div class="col-4">      3 of 3    </div>  </div>  </div></div>

non-responsive grid bootstrap

Just specify only the smallest width column, i.e. the col-xs for your divs:

<div class="overlayOptions" ng-show=overlayOptions>
            <div class="row">
                <div class="col-xs-4"><a class="watchButton"><span class="glyphicon glyphicon-plus"></span></a></div>
                <div class="col-xs-4"><a class="inventoryButton"><span class="glyphicon glyphicon-minus"></span></a></div>
                <div class="col-xs-4"><a class="storeButton"><span class="glyphicon glyphicon-pencil"></span></a></div>
            </div>
        </div>

How can I disable the responsive behaviour in Bootstrap 4?

While Bootstrap is not really made to be unresponsive, you can achieve something like that by altering the viewport meta-tag.

<meta name="viewport" content="initial-scale=0.1">

This will set the initial scale at 10% of the original scale.

Also see https://www.w3.org/TR/css-device-adapt-1/#translate-meta-to-at-viewport for more.

How to turn off the responsive feature completely from Twitter Bootstrap 3?

EDIT: My code below was written for v3.0.0RC2, but in v3.0.0 the docs got a section specifically about this question: http://getbootstrap.com/getting-started/#disable-responsive

Use the col-xs-X classes since they are constant percentage widths. Then the responsiveness comes from .container using max-width at different media sizes. You can define your own alternative to .container and use everything else like normal:

Fiddle for the example below: http://jsfiddle.net/xTePL/

HTML:

<!-- Don't use .container at all or you will have to
     override a lot of responsive styles. -->
<div class="container-non-responsive">
  <div class="row">
    <div class="col-xs-4">
      <h1>Welcome to Non-responsive Land</h1>
    </div>
    <div class="col-xs-8">
      <!-- More content, more content -->
    </div>
  </div>
</div>

CSS:

.container-non-responsive {
  /* Margin/padding copied from Bootstrap */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;

  /* Set width to your desired site width */
  width: 1170px;
}