Updating Bootstrap Version Between 2.1 and 3

• Opt for the less version of bootstrap
• Adjust the @navbarCollapseWidth variable in variables.less
• Recompile the code.

Easier Update Method as of 2013:

• Go to http://getbootstrap.com/customize/#less-variables
• Edit @navbarCollapseWidth in the provided field
• Click on "Compile and Download".

(Credits to Archonic for the tip)

Update for Bootstrap 3.1.1 and 3.2 in 2014 (they have even included it in the documentation)

If you are personalizing or modifying .less variables, pay attention to:

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

To customize the drop-down behavior of the navbar, you can define a new @media query and adjust the necessary styles to fit your requirements. For instance:

CSS

/** Customized Responsive CSS **/

@media (max-width: 979px) {
    /* Styles for drop-down at 979px */
}

@media (max-width: 550px) {
    /* Styles for drop-down at 550px */
}

The above code snippet demonstrates how you can integrate both the original @media query for the 979px drop and a new query tailored to your desired 550px drop. By adapting the existing styles from the bootstrap-responsive css to the new query, you maintain consistency while achieving the specific drop point you need. This approach ensures that default styles remain intact for other elements in your document.

You can view a live demo with the media query set to drop at 550px here: http://jsfiddle.net/wU8MW/

Note: To prioritize the modified CSS, place the updated @media queries below the main stylesheet in your document.

Exciting news - the next version of bootstrap-sass (2.2.1.0) will introduce support for the $navbarCollapseWidth variable. This means you'll have full control to customize it as needed once the update becomes available!

In August of 2013, you could access a Bootstrap 3 "Customize and download" page by visiting http://getbootstrap.com/customize/

When working with Bootstrap 3, one important variable to consider is @grid-float-breakpoint.

To find more information on Bootstrap 3 Navbar Collapse, check out this Stack Overflow post: Bootstrap 3 Navbar Collapse

It is my belief (and anticipation) that this will be officially implemented soon. In the meantime, I have resorted to a simple css workaround by utilizing visible-phone for the dropdown button and visible-tablet for a secondary set of buttons placed in the navbar. Initially, the structure appeared as follows:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

And now it has been modified to look like this:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Keep in mind that the sequence of elements is crucial to prevent any layout issues where elements may wrap to the next line.

I decided to organize my SCSS file by listing all the partials required for Bootstrap separately. This allows me to easily toggle the partials on or off based on our site's specific needs. One particular benefit is that I can effortlessly override the breakpoint variable. Below is how I structured it:

// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

Take a look at my code snippet (After experiencing issues with funky scrollbars when the navbar dropped down, I made some modifications to prevent this). Since I couldn't share this on another response, I'll leave it here for everyone's benefit. My approach involves utilizing Rails alongside Bootstrap 3.0.

In your assets/stylesheets/framework and overrides file, include the following CSS adjustments (Feel free to adjust the max-width value to suit your specific requirements).

@media (max-width: 2500px) {
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-collapse.collapse.in {
    display: block!important;
}
.navbar-nav {
    float: none!important;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

Exploring Bootstrap 3.x

By utilizing LESS, it is possible to modify the @screen-small value according to your minimum size requirements.

For instance: @screen-small: 600px;

I implement this approach to transition to "tiny device" mode only when the width falls below 600px.

Customizing Bootstrap 3.x with SASS

If you want to customize the screen size breakpoints in Bootstrap 3.x, you can easily do so by modifying the $screen-sm variable in your SASS code.

For example, to set the minimum screen width for the small breakpoint to 600px, you would use: $screen-sm: 600px;

To apply this customization, make sure to include the new value of $screen-sm in your application.scss file before importing the Bootstrap stylesheets like this:

$screen-sm: 600px;
@import "bootstrap";

Note that in SASS, variables are denoted by "$" instead of "@" as used in Less, so remember to update any existing Less variable overrides accordingly.

For a complete list of customizable variables in Bootstrap, check out this resource.

Easy Customization with Bootstrap 4.x

Modifying collapse behavior in Bootstrap 4.x is a breeze. Here are 6 scenarios to consider:

1. Always keep the navbar expanded (no collapsing at any breakpoint):

   <nav class="navbar navbar-expand">...</nav>

2. Collapse at the sm breakpoint (576px):

   <nav class="navbar navbar-expand-sm">...</nav>

3. Collapse at the md breakpoint (768px):

   <nav class="navbar navbar-expand-md">...</nav>

4. Collapse at the lg breakpoint (992px):

   <nav class="navbar navbar-expand-lg">...</nav>

5. Collapse at the xl breakpoint (1200px):

   <nav class="navbar navbar-expand-xl">.../nav>

6. Always have the navbar collapsed (infinite breakpoint). :

   <nav class="navbar">...</nav>

   (Simply remove the navbar-expand-* class. Follows the mobile-first approach of Bootstrap 4.x)

Credit goes to Carol Skelly for her article on customizing Bootstrap 4 navigation bars: https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a

If you're looking to enhance the functionality of your Bootstrap CSS files, consider utilizing the LESS version. The steps to do so are outlined below.

Even better would be to contribute this enhancement as a pull request on Github, benefiting the entire community and potentially having your customization incorporated into future versions of Bootstrap.

• Start by adding a variable to variables.less that dictates when the navbar should collapse. For example: @navCollapseWidth: 979px
• Next, make adjustments in responsive-navbar.less...
  • Update @media (max-width: 979px) to

    @media (max-width: @navCollapseWidth)

    at the top
  • Change @media (min-width: 980px) to

    @media (max-width: @navCollapseWidth - 1)

    at the bottom

Remember to compile the LESS code using one of the recommended methods.

Expanding on Tyler's suggestion, you can enhance the collapsible navigation bar by incorporating a visible-phone and a hidden-phone class to selectively display certain items even in the phone navbar.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="visible-phone">
        <ul class="nav">
          <li>Navigation 1</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="hidden-phone">Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Copy and paste this code snippet into your personalized style.css file to see it in action:

@media (min-width: 768px) and (max-width: 991px) {
        .navbar-collapse.collapse {
            display: none !important;
        }
        .navbar-collapse.collapse.in {
            display: block !important;
        }
        .navbar-header .collapse, .navbar-toggle {
            display:block !important;
        }
        .navbar-header {
            float:none;
        }
        .navbar-nav {
            float: none !important;
            margin: 0px;
        }
        .navbar-nav {
            margin: 7.5px -15px;
        }
        .nav > li {
            position: relative;
            display: block;
        }
        .navbar-nav > li {
            float: none !important;
        }
        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }
        .navbar-collapse {
            padding-right: 15px;
            padding-left: 15px;
            overflow-x: visible;
            border-top: 1px solid transparent;
            box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
        }
        .nav {
            padding-left: 0px;
            margin-bottom: 0px;
            list-style: outside none none;
        }
    }