How to disable responsive feature of Twitter Bootstrap

Last update on August 19 2022 21:50:44 (UTC/GMT +8 hours)

Introduction

Twitter Bootstrap is responsive by default. It accommodates itself to various screen sizes. But you may want to disable this feature. Here is how you may do that. We will start with a simple responsive template built with Bootstrap and then will gradually omit features to end up with a nonresponsive template.

Code for the starter responsive template is as follows

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap responsive Template</title>

    <!-- Bootstrap -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
    <div class="container">
    <h1>Bootstrap responsive Template</h1>
    <div class="row">
    <div class="col-md-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
<div class="col-md-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
<div class="col-md-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
    </div>
 <h1>Bootstrap responsive Template</h1>
<div class="row">
    <div class="col-md-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
<div class="col-md-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
<div class="col-md-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
    </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Step 1

The viewport meta tag is added to make sure proper rendering and touch zooming. This needs to be omitted as the first step.

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

Step 2

Add new style on top of the deafult CSS of Bootstrap's container class with a single width. An example follows

width: 970px !important;

Step 3

Remove all collapsing and expanding features from navbar, if you are using one. From our starter template, it is shown below. which are to be removed

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
   <del>  <!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">--></del>
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
  <del> <!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">--></del>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
  <del> <!-- </div><!-- /.navbar-collapse --></del>
  </div><!-- /.container-fluid -->
</nav>

Step 4

Either replace or append col-xs-* for grids. So, in our example, code for new grid will look like following

<div class="container">
    <h1>Bootstrap responsive Template</h1>
    <div class="row">
    <div class="col-xs-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
<div class="col-xs-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
<div class="col-xs-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
    </div>
 <h1>Bootstrap responsive Template</h1>
<div class="row">
    <div class="col-xs-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
<div class="col-xs-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
<div class="col-xs-4">
    <p>Lorem ipsum dolor sit amet, aliquam explicari iracundia id nam, nam habeo constituam ea. Vel affert explicari an, te usu dolorem omittam forensibus. Ea agam oratio eleifend est, cum ad movet urbanitas intellegebat. Libris ancillae splendide eos ut, minim dolore lobortis ex nec.</p>
    </div>
    </div>
    </div>

You may view the final output of the non-responsive template here.

One note here, you need to keep the Respond.js which is used for IE8.

Previous: Responsive Web Design with Twitter Bootstrap
Next: Twitter Bootstrap Typography tutorial