How can I effectively update Bootstrap 4 in a Rails environment?

After attempting to update my Rails 5 project from Bootstrap 4 Alpha 6 to the final version 4.0.0, I confirmed that the v4.0.0 gem was installed (with the alpha version gem uninstalled). However, upon running my project in development mode, I discovered that the generated Bootstrap CSS files were still based on the Alpha version.

gem 'bootstrap', '~> 4.0.0'

Aside from removing the old gem and installing the updated Bootstrap gem, is there anything else I should do to complete the upgrade? Should I manually download the v4.0.0 files and replace the existing files in my project?

Answer ā„–1

If you're looking to update a single gem conservatively, check out this helpful article:

How to update a single gem conservatively

Method 1

This method works when all dependencies for the update are already met.

  1. Determine the version you want to update to

  2. Change it directly in Gemfile.lock

  3. Run bundle install and verify if it was successful

Method 2

This approach is suitable when the gem has no shared dependencies with other gems.

  1. Identify the version you wish to update to.
  2. Add that specific version explicitly to the Gemfile like so: '=1.2.3'
  3. Execute bundle install
  4. Remove the explicit version number afterward
  5. Run bundle install one more time

Method 3

This method should always deliver results.

  1. Execute bundle update GEMNAME
  2. Check the changes using git diff Gemfile.lock and manage any unwanted updates
  3. Undo undesired changes to Gemfile.lock, leaving only the desired updates
  4. Verify by running bundle install

Method 4

There have been speculations about updating a single gem via bundle update --source GEMNAME. However, this feature is not officially documented in Bundler and might be unstable due to potential dependency mismatches.

Exercise caution when using this method and review your Gemfile.lock changes carefully.

Method 5

Bundler >= 1.14 introduces a --conservative flag. Enabling this flag during bundle update GEM ensures that only the specified gem gets updated without affecting its dependent gems.

Credits To Author: Henning Koch

Answer ā„–2

Consider organizing your Ruby dependencies in the Gemfile and keeping JS/CSS dependencies elsewhere, such as with Node+Yarn.

If you haven't already done so

brew install yarn

Next, navigate to config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join('node_modules')

Now you can easily add packages using Yarn:

yarn add bootstrap

This command will create a node-modules directory if it doesn't already exist. After that, simply include bootstrap in your JS/SCSS files

JS

//= require bootstrap/js/src/index

CSS

@import "bootstrap/scss/bootstrap";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to accessing the sibling of each selector with jQuery

Imagine you have the following HTML structure: <div class="parent"> <div class="child"></div> <div class="sibling">content...</div> </div> <div class="parent"> <div class="child"></div> <div ...

Choose class based on the retrieved information

Good morning, I am working on dynamically setting the class of a td element based on data fetched from a database to reflect any changes or updates. One of the fields returned has four possible options, and I need to modify the CSS class of that field acc ...

`Positioning of inline-block elements`

I am encountering an issue with the display CSS attributes set for three tags: a - inline-block img - block span - inline <a id="first"> <img/> <span> A first line of text B second line of text </span> </a> <a id="secon ...

Utilizing conditionals for CSS minification with C# Regular Expressions

Hi there, I'm currently developing an application using C# in Visual Studio that focuses on minifying CSS code. Recently, I encountered a specific piece of code that removes all prefixes for the # ID selector. strCSS = Regex.Replace(strCSS, @"[a-zA-Z ...

Why isn't my lightbox able to read this specific property?

A gallery was created using both lightgallery and cycle2. Cycle is a carousel plugin while lightgallery is a lightbox gallery. Clicking on an image in the carousel opens it in the lightbox. Everything worked perfectly until a category in the carousel was ...

Text alignment and block dimensions

I attempted to organize three buttons within a block. <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" rel="stylesheet"/> <div class="grid grid-cols-1 md:grid-cols-3 text-center place-content-center"> ...

What is the best way to align three images horizontally using bootstrap?

While working on my JavaScript class and creating one-page web apps, I had the idea to create a central hub to store and link them all together. Similar to Android or iOS layouts, I designed a page with icons that serve as links to each app. I managed to ...

Modal overlays should consistently appear behind the loading animation

When processing something and using overlays for loading, everything works fine until I use it for a modal. The issue arises when the overlays appear behind the modal instead of in front. Is there a way to bring the overlays to the front of the modal? Bel ...

Step-by-step guide to implementing a sticky header while scrolling

How can I implement a fixed header on scroll, like the one seen on this website: www.avauntmagazine.com Here is the HTML for my header: <div class="bloc bgc-wild-blue-yonder l-bloc " id="bloc-1"> <div class="container bloc-sm"> &l ...

Get rid of the folder from the URL using an <a> tag

I have both an English and French version of my website located at: *website.com/fr/index.php *website.com/index.php Currently, I have a direct link to switch between the two versions: -website.com/fr/index.php -website.com/index.php. However, I ...

Using CSS to style the footer with a body height set to 100%

I am currently working on an angularJS web app with a basic template structure: <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body id="top"> <!-- Templates with vi ...

Tips for effectively utilizing the page-break property within CSS

I am faced with an issue on my HTML page where multiple angular material cards are being displayed: ... <mat-card class="mat-card-98"> <mat-card-header> <mat-card-title>THIS IS MY TITLE</mat-card-title> < ...

Can someone help me transform this LESS code into SCSS?

Currently, I am working on adapting a theme from [www.bootswatch.com][1] that is originally in less format to scss for my rails application. Although I am not well-versed in either SCSS or LESS, I have been researching the variances and have identified so ...

troubleshoot clientWidth not updating when CSS changes are made

Summary: When I adjust the size of a DOM element using CSS, its directive fails to acknowledge this change even with a watch on the size. Aim I have multiple custom directives (simple-graph) each containing an svg. My goal is to enlarge the one under the ...

Remove the active class after it has been clicked for the second time

Currently, I am working on a menu/submenu system where I want to toggle active classes when clicked. However, I encountered an issue - if the same menu item is clicked twice, I need to remove the active class. Initially, I tried using jQuery's toggleC ...

Building an AJAX form with error validation intact using simple_form

Seeking assistance from the experienced rails community, I present a challenging question that has left me stuck for days. In an effort to learn more about rendering, I am working on a dummy app based on this ajax/jquery tutorial. Following the guide, I s ...

Utilizing flexbox, absolute positioning, and 100% height in web design

While experimenting with a flexbox inside an absolute box within a div of defined height, I encountered a problem. Let me explain the issue step by step. Here is a link to a fiddle demonstrating the problem: https://jsfiddle.net/8ub9tyub/ When hovering o ...

Desktop display issue: Fontawesome icon not appearing

Having trouble getting the fontawesome icon to display properly on my website. It appears in inspect mode, but not on the actual site itself. Any suggestions on how to fix this issue? import React, { Fragment, useState} from "react"; import { Na ...

CSS - Tips for affixing footer to the bottom of a webpage

Currently, I am working on a small personal project to brush up my HTML & CSS skills, and I am encountering some difficulties in fixing the footer of my website to the bottom of the page. You can view the site here. I have researched online and discovered ...

CSS: Including an item in a list causes the <div> to expand upwards on the page instead of stretching downwards

Iā€™m currently facing an issue with my list where, upon reaching a certain number of items (in this case 5), the list starts moving up the page instead of extending downwards as expected. I suspect that this problem is related to my use of CSS grid-templa ...