I have installed the twitter bootstrap rails gem and ran all the commands.
I have seen some basic style changes which leads me to some confidence. However with I use the following class
<div class="jumbotron masthead">
<h1>Test Heading</h1>
<p>Find me in app/views/pages/home.html.erb</p>
</div>
It does not do anything. According to the twitter bootstrap homepage and inspecting, this should work.
Am I missing something?
Are you sure the bootstrap gem uses the latest version of Bootstrap? I always include the CSS and JS files manually, so that I can always have the latest version. I haven't used the masthead, but it is included in the Bootstrap CSS files. https://github.com/twitter/bootstrap/blob/master/docs/assets/css/docs.css#L58
The jumbotron masthead was an extra addition on the Bootstrap GitHub doc pages that isn't included in the "proper" release of Bootstrap.
There's nothing to stop you pinching the code from here and adding it to your Rails project yourself though!
Related
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.
I have two filter dropdowns on this site which will only trigger the first time I press them. According to my studies it seems that it has to do with turbolinks, which I've disabled by adding data-no-turbolink to the body tag like so:
<body data-no-turbolink>
...
</body>
I've also tried adding this to all of the dropdown links and the link to open the dropdown.
<a href="some-link" data-no-turbolink>...</a>
It seems to work on development, but when I push to Heroku, it seems turbolinks are running again. Any suggestions?
If Turbolinks is an issue, it can be removed entirely from the project by following the instructions provided e.g. here:
remove gem 'turbolinks' from the Gemfile and run bundle update
remove //= require turbolinks from app/assets/javascripts/application.js
remove "data-turbolinks-track" => true from the stylesheet and javascript tags in the header of application.html.erb layout file.
Quoting Rails 4 In Action:
...it's our opinion that Turoblinks is great to speed up
mostly-server-side sites, but as soon as you start writing some
JavaScript, it causes more problems than it's worth.
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.
I'm switching from PHP to Ruby on Rails and I'm loving it, the only thing is I'm so used to Twitter Bootstrap for most of my designs and now I feel crippled without it, I followed some tutorials like adding bootstrap-sass and what not to my Gemfile, but I still appear to be missing important things like input-block-level I'm just curious if there is an updated version or a easier tutorial to follow? Thanks.
AFAIK, the easiest and most rails way to integrate the twitter bootstrap to rails is via
twitter-bootstrap-rails gem, they have a pretty good documentation too.
check these screen casts, and this (premium) to get an idea.
and welcome to Rails :)
To to the input-block-level in ERB do something like this
"input-block-level" => "hello_world"
Same as you, I'm coming from PHP and love RoR ;)
With bootstrap you need to import it in your manifest. Read a bit about the assets pipeline in RoR guide.
To import bootstrap, create a file in your app/assets/stylesheets directory, with the name you want, but with the extension .css.scss, and place in it the following line:
#import "bootstrap";
Also if you need to use the javascript helpers from bootstrap, you need to add the following line in your app/assets/javascript/application.js file:
//= require bootstrap
Just download the bootstrap ( CSS, JS ) file and make the updation in that file at regular interval from his official site : Bootstrap
For Bootstrap Tutorials : Click Here
Or you can refer the sample code for reference, because sometimes we dnt get the way to implement such functionality like tooltip.
I am using refinery branch 2.0-stable with twitter bootstrap and rails 3.1.
I've tried adding a bootstrap icon to a refinery page html using the following syntax:
<i class="icon-caret-left"></i>
When I save the page, the tags are overridden with tags.
Any ideas of a fix?
It turns out that the tag that the class is applied to doesn't really matter at all so I used
<span class="icon-caret-left></span>
Hopefully that will help someone