Title: Twitter Bootstrap: navbar button not showing or toggling collapse
Tags: twitter-bootstrap;collapse;navbar;twitter-bootstrap-rails
Question: I'm adapting Twitter's Bootstrap to my Ruby on Rails tutorial project (By Michael Hartl) and the upper navigation isn't collapsing.
I'm currently getting this:
My end goal is this:
I've copied and pasted the start_template.html into mine, ensured that all the right bootstrap.css and js files are referenced, and don't know how else to tackle this issue.
My home.html is pasted below (apologies if it's too much code):
<title&gt; Project Name</title&gt;
<meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet"&gt;
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet"&gt;
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
<link href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" type="text/css" /&gt;
<meta content="authenticity_token" name="csrf-param" /&gt;
<meta content="khAXbodB/h2ghLK1iZlFZIU6RtxF1kv//qsyrJVszlE=" name="csrf-token" /&gt;
<div class="navbar navbar-inverse navbar-fixed-top"&gt;
<div class="navbar-inner"&gt;
<div class="container"&gt;
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
<span class="icon-bar"&gt;</span&gt;
<span class="icon-bar"&gt;</span&gt;
<span class="icon-bar"&gt;</span&gt;
</button&gt;
<a class="brand" href="#"&gt;Project Name</a&gt;
<div class="nav-collapse collapse"&gt;
<ul class="nav"&gt;
<li&gt; <a href="/"&gt;Home</a&gt; </li&gt;
<li&gt;<a href="/about"&gt;About</a&gt;</li&gt;
<li&gt; <a href="/help"&gt;Help</a&gt; </li&gt;
<li&gt; <a href="#"&gt;Sign In</a&gt; </li&gt;
</ul&gt;
</div&gt;
</div&gt;
</div&gt;
</div&gt;
<div class="container-fluid"&gt;
<div class="center hero-unit"&gt;
<h1&gt;Project Name</h1&gt;
<h2&gt;Subheader and more info</h2&gt;
<a href="#" class="btn btn-large btn-primary"&gt;Sign Up Now!</a&gt;
</div&gt;
<script src="/assets/jquery.js?body=1" type="text/javascript"&gt;</script&gt;
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"&gt;</script&gt;
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"&gt;</script&gt;
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"&gt;</script&gt;
<script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"&gt;</script&gt;
<script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"&gt;</script&gt;
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"&gt;</script&gt;
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"&gt;</script&gt;
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"&gt;</script&gt;
<script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"&gt;</script&gt;
<script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"&gt;</script&gt;
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"&gt;</script&gt;
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"&gt;</script&gt;
<script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"&gt;</script&gt;
<script src="/assets/bootstrap.js?body=1" type="text/javascript"&gt;</script&gt;
<script src="/assets/static_pages.js?body=1" type="text/javascript"&gt;</script&gt;
<script src="/assets/application.js?body=1" type="text/javascript"&gt;</script&gt;
</div&gt;

Here is the accepted answer: The Bootstrap code seems to work fine.. http://bootply.com/60444
My guess is that something in /assets/custom.css or /assets/application.css is messing up the Bootstrap 'navbar-fixed-top'.
You could try putting 'bootstrap-responsive.css' after those and see if that makes a difference.

Here is another answer: I know one should not add a comment, after an acceptable answer has been submitted. But I really would like to share the way I solved the problem in case this might be useful to someone in the future.
For some reasons using class "container" would forbid displaying the button in collapsed state, while using the class="container-fluid" made this button appear.
Really, weird.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2013:00:05/01/13', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<twitter-bootstrap><collapse><navbar><twitter-bootstrap-rails>', 'Title': 'Twitter Bootstrap: navbar button not showing or toggling collapse', 'ViewCount': 14267, 'id': 16326225, 'user_AboutMe': '<p>My interests span HCI, UI/UX, and medical informatics.</p>\n', 'user_AccountId': 299386.0, 'user_DisplayName': 'Matthew', 'user_Reputation': 1995.0, 'user_Views': 286.0, 'user_id': 605948.0}}