I have been having issues setting up bootstrap carousels on rails. It took me days before I finally found a way out. At a point, all articles and videos are not helping even after following the whole steps religiously. Lets’s skip all that and get to work. Let create a new rails app: rails new carousels We wait for rails to finish the app creation. Once we are done with that, we go into our: app/assets/stylesheets then rename "application.css" to "application.scss" Once that is done, let us head over to the bootstrap website and copy the download the carousels sample code to our local system. Install bootstrap, jquery, and popper.js to our application. yarn add bootstrap jquery popper.js Also add the bootstrap link to the head tag of your . app/views/layout/application.htm.erb <%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" %> After that, go to , click on the download examples, then extract the file to your system. https://getbootstrap.com/docs/5.0/examples/ Go into the bootstrap extracted folder and locate the folder, not folder. Open the folder, copy the file and move it to your application stylesheet folder. carousel carousel-rtl carousel carousel.css Your folder should consist of the file and carousel.css file. app/assets/stylesheets application.scss Rename: app/assets/stylesheets/carousel.css to app/assets/stylesheets/carousel.scss Go into your and add import the to it by adding the code below to your file: app/assets/stylesheets/application.scss carousel.scss application.scss @import 'carousel'; Also, go into your and the import bootstrap. app/javascripts/packs/application.js import  'bootstrap' We need to generate a view and a controller for our app. We can do that using the scaffold command. Let us generate a “post” view and controller for our app. We can do that by using the command below: rails generate scaffold post After that, we need to run migrations on the database for the scaffold command to take effect on the schema: rails db:migrate Once that is done, we can start our app by: rails s The command above will start the rails server. The next thing is to route the root path of our app to page. post#index Go to your , add the code: config/routes.rb root to: 'posts#index' The code below will route our index page to the post index page. localhost:3000 Next, we go into our index file in the views folder to update it to display our carousels. app/views/posts/index.html.erb Let us go back to the carousel folder we downloaded on bootstrap. Go into the folder, open the index.html file and copy the code from: <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
  ..........
  ..........
 </div> Paste the copied code to your index page and refresh your browser. Tadaaa!!! Your carousels should work fine now. I hope this article helps. Suggestions are highly welcomed.

Read My Stories

Nominated for 2022 - Rawr For Ror

Too Long; Didn't Read

Make resilience your competitive advantage

Building Rails Carousels Using Bootstrap

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Fascinating PHP and PHP-friendly admin templates

20+ Bootstrap 4 Template for 2020

15 Best Web Development Tools To Use In 2021

6 Reasons for Using Bootstrap Framework

6 VueJS Admin Templates With Cool UX Design You Should Check Out

10 Fascinating PHP and PHP-friendly admin templates

20+ Bootstrap 4 Template for 2020

15 Best Web Development Tools To Use In 2021

6 Reasons for Using Bootstrap Framework

6 VueJS Admin Templates With Cool UX Design You Should Check Out

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps