Rails 7.0.3 - Bootstrap Custom CSS - bootstrap-5

Standard Bootstrap 5.+ works fine with Ruby on Rails 7. I can't find where to customise Bootstrap. Where should I place the css/scss file with custom colours, fonts, etc?

Related

Extending Trix using rails actiontext with your favorit css icons set e.g. font-awesome

I am using rails action text --> trix.
I would like to extend trix with a button where the user can choose from a preset / selction of icons / smilies which are already included in the website stylesheet e.g. font-awesome.
Does anybody has an idea how to accomplish this?

Bootstrap not loading in some page

I am new to bootstrap and UI stuff.
Was trying implementation of grid by following this doc
https://getbootstrap.com/docs/4.1/layout/grid/
Came across this strange UI issue in my rails 5 app.
We use these gems 'bootstrap-sass'(3.3.7) and 'bootstrap_form' (2.7.0)
We have included boostrap admin.html.erb.
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type='text/css'>
However, in some admin pages bootstrap seems to be loading.
Whereas in some other admin pages, like the one below, bootstrap is just not loading.
Not able to figure out why.
First, Bootstrap 2.3.2 is no longer supported so I would recommend upgrading to a later version.
Second, you should really use one of the Bootstrap Gems, which comes with step-by-step instructions specific to Rails
For Bootstrap 2 and 3: Bootstrap Sass
For Bootstrap 4: Bootstrap Ruby Gem
Because you are new to Bootstrap, I would also recommend using Bootstrap 4 (unless you have a reason not to do so).
The admin part of my project is using bootstrapv2.3.2
Though my project includes 'bootstrap-sass'(3.3.7) in the Gemfile, it is rendered only in non-admin parts of my project.
The admin part renders under a different layout which uses bootstrapv2.3.2
bootstrap2.3.2 had custom styling for class name span, however it did not support col-md-*.
col-md-* was introduced in bootstrap 3 and used in higher versions as well.
That is why in pages where I have used span, bootstrap styling got applied.
When I tried using col-md bootstrap styling did not get applied.

How does Bootstrap work with Ruby on Rails?

I'm unfamiliar with how Bootstrap is implemented on a web app built on Ruby on Rails. I've been asked to create the front-end ,HTML/CSS for new pages. I strictly have been working with small, static sites so I don't know the way to go about this. I've seen that the CSS files only include the specific code that your page requires?
Does that mean that I will have to copy each component's Boostrap CSS to a separate CSS file for my page?
You can choose one of the following gems to get all the required components of bootstrap in your rails application:
Twitter Bootstrap Rails
Less Rails Bootstrap
Furthermore detailed info to implement it on pages can be get # http://www.gotealeaf.com/blog/integrating-rails-and-bootstrap-part-1

Simple form bootstrap for rails 4

I'm using 'bootstrap-sass' and 'simple_form' gems on Rails 4. When I run this generator: rails g simple_form:install --bootstrap I get a message that says:"Be sure to have a copy of the Bootstrap stylesheet available on your
application, you can get it on http://twitter.github.com/bootstrap."
Why do I need a copy of the Bootstrap stylesheet and what is THE stylesheet? Doesn't the 'bootstrap-sass' gem handle that? I went to the link provided but got a 404 error. If anyone can kindly explain what I need to do it would be greatly appreciated! I am fairly new to Rails, so apologize in advance if it's not a very good question. Thank you!
Here is the real link to Bootstrap. Yes, the bootstrap-sass gem will include Bootstrap's javascript, CSS, and fonts into your application, just make sure you include them.
In your javascripts/application.js (docs)
//= require bootstrap
Create a file, say master.css.scss and import the Bootstrap CSS and fonts like so (docs):
#import "bootstrap";
When you specified the extension --bootstrap when installing simple_form, you essentially said, hey I have bootstrap and want my forms to be styled the way bootstrap styles them. It will also add the appropriate HTML to the form and inputs to adhere to Bootstrap. So it automatically generated the file config/initializers/simple_form_bootstrap.rb. Now when you create a form using simple_form_for (please read their docs..they are very extensive), it will be styled like Bootstrap.
So, to sum it up, you need Bootstrap if you want your forms to be styled and set up, with Bootstrap html and css, like Bootstrap forms. If you didn't want Bootstrap, you could have just ran the simple_form generator like this: rails generate simple_form:install.
when you ran this code:
rails g simple_form:install --bootstrap
you are integrating simple_form with bootsrap. and therefore, what the message is telling you is to add bootstrap to your stylesheets folder of your application. The stylesheet folder is where you keep your css files. Here is it's directory structure:
app/assets/stylesheets
bootstrap download comes with css, javascripts, and fonts folders. the bootstrap files inside the css folder will go under app/assets/stylesheets.
of course, if you are not using bootstrap in your project, then you are running the wrong generator. you should simply run:
rails generate simple_form:install
and not append --bootstrap to the generator.

Devise not inherting Twitter Bootstrap Styling

I'm learning Rails and was trying out the Devise gem. I have the bootstrap-sass gem installed and have imported the bootstrap css and javascript files successfully. Bootstrap works fine with forms and buttons for resources that I create.
However, the forms and buttons generated by Devise don't inherit the Bootstrap styling and they retain their plain looks. In many tutorials I've read/watched, the Bootstrap style is automatically applied to Devise views. Wondering what I'm doing wrong here.
I'm using Rails 3.2, Bootstrap 3 and Devise 3.2.2. Thanks in advance!
Here's the screenshot http://i.imgur.com/9AW2T3H.png
I was following an outdated tutorial video. From what I have learned so far, Devise have to be stylized for Bootstrap just like we do other forms.

Resources