Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP


Customizer includes responsive and non-responsive in same CSS #1981

tmchow opened this Issue · 10 comments

8 participants

Trevin Mark Otto Mike Rankin Merg1255 Raul Baldner Junior Marshall Upshur Thomas Beverley Cory Deppen

The default download has the responsive and non-responsive as separate files, but the customizer combines them into a single file. They should have the same file structure, so the customize should give you the responsive layouts in a separate bootstrap-responsive.css. Will make it less confusing as to whether you have a bootstrap file that has responsive layouts or not.

Mark Otto

Right, we should keep them as separate files from the custom builder.

Mike Rankin

This is particularly important considering the adjustment to body padding that needs to be made between the two, although it seems like that could be worked into the consolidated file somehow. Maybe a less variable for the body padding when using the fixed navbar.


yep, that's right, it's better to have them as different files.

Mark Otto

After chatting with Jacob more, we're going to punt on this. For those who customize BS, having a single file to us makes more sense. Fewer requests, few files, etc.

Mark Otto mdo closed this
Raul Baldner Junior

@markdotto what about , which states:

"When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS."



Without support for separate responsive file through customizer, what's the recommended way to exclude items like the default icons, but still getting separate responsive and non-responsive files?

It seems I'm forced to either:

  1. Use the default download, and manually remove the icons OR
  2. Use the customizer and exclude the icons, but then manually remove the responsive support.

Or is there a better way?

Marshall Upshur

I ran into this same issue today, but ended up creating some additional media queries to only add the padding based on the width. It seems Bootstrap's fixed navbar stops (being fixed or collapses) at around 980px body width, so you can do something like (in LESS):

@media (min-width: 1200px) {
    body {
        padding-top: 60px;
@media (min-width: 980px) and (max-width: 1199px) {
    body {
        padding-top: 60px;

This worked for me, although I spent far too much time fighting the customizer before settling.

Thomas Beverley

@marshallbu worked for me too. Thanks very much (:

Cory Deppen

If having the responsive styles in a single file with the non-responsive styles is known to cause issues with the fixed navbar, I'm confused why the customizer isn't being modified to create separate files. I'm sure there will be more folks that want to exclude the icons and utilize the fixed navbar while using responsive styles. Having to hack BS to force this seems unnecessary.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.