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
Related
I've used trix editor before, but this time it isn't working as planned when deployed to heroku. The editor doesn't show up, and the input is reduced to a tiny square, not clickable.
Here is the expected behavior on localhost:
Trix editor showing up and working
But, on heroku, it shows like this:
Trix editor not showing and not clickable as well
On my rails Gemfile:
gem 'trix-rails', require: 'trix'
On application.scss:
*= require_tree .
*= require_self
*= require font-awesome
*= stub scaffolds
*/
#import "trix";
#import "font-awesome";
And on application.js:
//= require rails-ujs
//= require turbolinks
//= require_tree .
//= require trix
I have the following code on my _form.html.erb:
<div class="field" id="blog-editor">
<%= form.label :content %>
<%= form.trix_editor :content, id: :backoffice_blog_content %>
</div>
I can't find where the problem is. I've tried precompiling the assets so far, but I couldn't find any answers.
The console log present a series of errors about Jquery. It wasn't working properly because of an import order (I was using require tree and, in the alphabetical order, a file required another that was compiled after it). Basically, you shouldn't mix sprockets directives, sass and other forms of import in the same project. (it wasn't my fault, it's a legacy project)
But that's it, that resolved the problem.
I am trying to migrate to Bootstrap 4 in my Ruby on Rails project, following the github installation guide
It recommends that in my application.scss file, I remove *= require_tree
However, when I do this, none of my custom CSS files appear. If require_tree DOES tell the asset pipeline to include all of the specified files in the directory, how else would the asset pipeline know to do this?
I've been trying to find an answer to this problem and haven't found anything.
OK, you would try to work with css and scss at a time, Right? You can do this the several ways like if you need to use only one file like application.scss then you can rename the file again e.g application.css.scss then for scss you would follow this
#import "bootstrap";
...
then for custom css above in the #import variable
/*
*= require custom
*= require custom_another
*/
make sure this custom file is formatted with .css and it's inside assets/stylesheets folder.
For saas file will use #import & for css file will use *= require.
Now if you need to use separate files for css & scss then it would look like this application.css
/*
*= require custom
*= require_tree .
*= require_self
*/
you can leave that application.css and for scss you can create a custom file inside assets/stylesheets like custom.scss then
#import "bootstrap";
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 want to use a bootstrap-theme for my rails project, for example a theme from bootswatch: http://bootswatch.com/superhero/
Currently, bootstrap is integrated in my project via Bower:
Bowerfile:
asset 'bootstrap-sass-official'
Application.css
*= require 'bootstrap-sass-official'
The Documentation on Bootswatch says that to use a bootstrap theme, is to download the theme and to replace it with the existing bootstrap-file. Since I used bower to get bootstrap, there is no file to replace with.
What do I need to do, to use the Bootstrap-Theme?
EDIT:
I added superhero.css to stylesheets and added it to application.css:
*= require_tree .
*= require_self
*= require 'bootstrap-sass-official'
*= require 'superhero'
If your theme is having customised bootstrap then you can use bower. You need to download the bootstrap file from your theme and put in app/assests/stylesheets
and then call it in application.css
*= require 'bootstrap'
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.)