After cloning my git repo, my app was broken. I fixed it ( Deleted the bootstrap_and_overrides.css.less ) to the point where I can actually see the pages now but the drop down lists and tabs are broken. This makes me think the bootstrap-responsive, for some reason, isn't being loaded. Below is what I feel are the culprits.
Gemfile
gem 'rails', '~> 3.2.6'
gem 'bootstrap-sass', '~> 2.0.4.0'
gem 'less', '~> 2.2.0'
application.js
//= require bootstrap
//= require_tree .
//= require jquery_ujs
//= require jquery-ui
bootstrap_and_overrides.css.scss
$iconSpritePath: image-path('/glyphicons-halflings.png');
$iconWhiteSpritePath: image-path('glyphicons-halflings-white.png');
$navbarBackground: #555;
$navbarBackgroundHighlight: #888;
$navbarText: #eee;
$navbarLinkColor: #eee;
#import "bootstrap";
body { padding-top: 60px; }
#import "bootstrap-responsive";
Eek, help please?
uninstall old gem 'bootstrap-sass', '~> 2.0.4.0' and install the new version gem "bootstrap-sass", "~> 2.2.2.0"
If something of your app is broken, you must change the css code on your bootstrap_and_overrides.css something like:
// Set the correct sprite paths
$iconSpritePath: asset-url('glyphicons-halflings.png', image);
$iconWhiteSpritePath: asset-url("glyphicons-halflings-white.png", image);
#import "bootstrap";
/* new design.................................................................................*/
If you are customized this file previously, you have restore each error from bootstrap_and_overrides.css file
I'm thinking you're seeing that the bootstrap javascript components aren't working correctly.
This is because bootstrap's js components depend on jQuery, and those are being included after bootstrap, not before. Change your order of inclusion (and include jquery):
application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap
//= require_tree .
I finally found out the answer if anyone comes across this, hopefully it will help. What was going on was I had included the bootstrap-responsive.css which was being loaded twice. It's already included in my bootstrap_and_overrides.css.scss file. I deleted the extra css file that was not needed and blamo it works.
Related
With the bootstrap rails gem, we are able to customize which CSS to include like this:
#import "bootstrap/mixins";
#import "bootstrap/root";
#import "bootstrap/reboot";
#import "bootstrap/type";
#import "bootstrap/images";
But on the JS side, the following includes ALL of the Bootstrap components:
require bootstrap-sprockets
Is there a way to include some of Bootstrap's JS components and not everything to remove bloat?
Yes.. it is possible.
I have this gem installed
gem 'bootstrap-sass', '~> 3.2.0'
and the application.js
// Only require the bootstrap parts we need //= require bootstrap-sprockets
// Collapse and dropdown for nav
//= require bootstrap/modal
//= require bootstrap/collapse
//= require bootstrap/dropdown
I am working on using a bootstrap template to help a friend with a landing page. I am having a similar issue as others, but there solutions are not working for me. Everything works properly on my LocalHost, but when I push it to Heroku, the Bootstrap Dropdown toggle does NOT work...
I am a junior developer trying to learn and challenge myself here, so please explain your answer if applicable. Thank S.O
I have also ran these codes after I think I have a solution ...
heroku run rake assets:reset
heroku run rake assets:precompile
This is my Application.js file
//= require bootstrap
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
// Bootstrap core JavaScript
#import "jquery.min.js";
#import "bootstrap.bundle.min.js";
//Plugin JavaScript
#import "jquery.easing.min.js";
//Contact form JavaScript
#import "jqBootstrapValidation.js";
#import "contact_me.js";
//Custom scripts for this template
#import "js/agency.min.js";
Application.scss File.
*
*= require_self
*/
#import "bootstrap";
#import "font-awesome.css";
#import "bootstrap.min.css";
#import "agency.min.css";
#import "agency.css";
#import "font-awesome.css";
#import "font-awesome.min.css";
See this standard format, more explanation see the Rails Guide Asset Organization.
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery.easing
//= require jqBootstrapValidation
//= require contact_me
//= require js/agency.min
//= require turbolinks
//= require_tree .
Without these lines remove all from application.js file, look here is jquery.easing for this you need to install jquery.easing gem and the jqBootstrapValidation you need to install jqBootstrapValidation gem or if you have those original files then just import to the directory like app/assets/javascripts/jqBootstrapValidation.js and application.js the same which is now.
You don't need
#import "jquery.min.js";
#import "bootstrap.bundle.min.js";
because these have already in the asset pipeline. It should work.
There are already similar questions on SO, but not enough clear responses to understand the following issue.
My goal is to setup Rails 5 with Bootstrap using Bower.
Using Bower I installed Bootstrap in the the folder:
vendor/assets/bower_components/bootstrap-sass
Then, I updated initializers/assets:
Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
Then I added the gem 'sass-rails' to Gemfile and updated application.js:
//= require jquery
//= require bootstrap-sass/assets/javascripts/bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .
The assets for JS seem to be working well: if I load http://localhost:3000/assets/application.js
I can see that the Bootstrap JS part has been added there.
The problem is about Sass (SCSS):
I added bootstrap-sass/assets/stylesheets/bootstrap into application.css.scss but with no success:
/*
*= require_tree .
*= require_self
#import "bootstrap-sass/assets/stylesheets/bootstrap";
*/
in fact if I load http://localhost:3000/assets/application.css I see:
/*
#import "bootstrap-sass/assets/stylesheets/bootstrap";
*/
(the folder specified on the #import is containing many _*.scss files and a mixins folder)
The questions are:
Do you have any ideas why this is not working?
should not I see on assets/application.css all the CSS precompiled?
PS:
Any resource to understand the issue would be much appreciated.
Move the import, so it's outside the /* .. */
/*
*= require_tree .
*= require_self
*/
#import "bootstrap-sass/assets/stylesheets/bootstrap";
[Removed misleading instructions to use require instead of import, as I was wrong.]
In addition to the accepted answer, if you look into the bootstrap-sass/assets/stylesheets directory, you'll notice that there is no file bootstrap.scss but rather one prefixed with an underscore.
Also, usually it's better to import only modules you actually need from the bootstrap-sass/assets/stylesheets/bootstrap/ directory instead of the main _bootstrap.scss file.
I know this type of question has come up before on SO, and I have tried every solution I could find, but nothing seems to work. The javascript is working fine, but for some reason, I can't get the datepicker window to go in the right spot or format correctly. After testing multiple gems, I keep getting this:
There are no errors in my console. Here is what my related gems look like in my Gemfile:
gem 'jquery-rails', "~> 2.3.0"
gem 'bootstrap-sass'
gem 'bootstrap-datepicker-rails'
And here is my application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require bootstrap-datepicker
//= require_self
And my application.css has:
*= require bootstrap-datepicker
As for the actual html file, it looks like this (application#index.html)
<input type="text" data-behaviour='datepicker' >
<script type="text/javascript">
$(document).ready(function(){
$('[data-behaviour~=datepicker]').datepicker();
})
</script>
Any and all ideas are welcome.
UPDATE:
It seems like my bootstrap css files aren't loading at all. Do I need to use css.scss files? I can't seem to find a straightforward answer online. Manually inserting the css into my application.css file results in this:
Just for a sanity check give the standard jquery datepicker a shot. I generally use it with bootstrap.
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require jquery.ui.datepicker
//= require jquery.timepicker.js
//= require_tree .
app/assets/stylesheets/application.css
*= require jquery.ui.datepicker
*= require jquery.timepicker.css
*= require_self
*= require_tree .
app/assets/javascripts/your_model.js.coffee
jQuery ->
$("#div_id_here").datepicker dateFormat: "yy-mm-dd"
Since you're using bootstrap-sass, you can (and should) use #import statements instead of *= require statements for your css.scss files. This allows you to define and use variables, etc amongst all of your css.scss files, which allows for full customization of Bootstrap and its components. I'm not sure if there could be something else wrong with your configuration... but I'd suggest starting here anyway since none of your css is showing up. So your application.css.scss file would look like:
# #import any file that may contain variables you'd like to use in any libraries
# added below this point (e.g. `defines.css.css`)
#import "bootstrap_and_overrides";
#import "bootstrap-datepicker";
# #import "whatever other .css.scss files you have...";
Then in bootstrap.css.scss you'd individually import each of the desired bootstrap CSS components after "overriding" any variables. Here is what you need to start from:
variables (this is the basis your variable/style "overrides", placed at the tope of your bootstrap_and_overrides.css.scss file.)
bootstrap components (this is the core of your bootstrap_and_overrides.css.scss file.)
I have a ruby on rails application, and I am trying to have buttons inherit some of the styles from the bootstrap css library.
I already have the import of the css library defined elsewhere in the app, and it works.
Now I am using HAML and trying to render a link as a button like this:
=link_to((t "some_path"), some_url(disclosure), :class => "btn" )
but the btn isn't getting recognized. What do I need to do to reference the bootstrap.css
correctly?
In the other namespace where the twitter bootstrap css is being recognized, I have a manifes file which looks like this:
/*
* THIS IS THE MANIFEST FILE FOR THE LAYOUT
*= require_self
*= require bootstrap
*= require bootstrap-responsive
*= require bootstrap_overrides
*/
but i am not sure if I need it for the other code I am working on. And if I do, how do I configure it?
Thanks!
I like to use the bootstrap-sass gem
gem 'bootstrap-sass', '~> 2.0.0'
Then import bootstrap in application.css.scss
#import 'bootstrap';
Not part of your question, but I also include some JS elements from bootstrap into application.js
//= require bootstrap