Disabling responsiveness

Sometimes you may not want your site to be responsive at all, either because it targets only a single device or due to some other reason. In such cases, it is important that you know how you can disable responsiveness in Bootstrap properly.

Since the grid in Bootstrap 3 is responsive by default, you need to go through a bit more trouble than before in order to disable it. Disable responsiveness for your Bootstrap project by performing the following steps:

  1. Open index.html and remove the following line from within the <head> tag:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. Next, remove the responsive elements from the navbar element:
    <nav class="navbar navbar-default" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" 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="#">Blog</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Archive</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
</nav>
  3. Open custom-theme.less and add the following rule:
    .container {
  width: 970px !important;
}

    Note

    Usually, you may prefer to use the extra small columns, that is, the .col-xs-* classes instead of the other column types. However, the other columns work as well, so you do not have to change the column types.

  4. If you now recompile your styles and reload the page, you should notice that it does not stack the columns when your browser window gets smaller. This is all there is to disabling the responsiveness in Bootstrap.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.14.245.167