Yarn installed on your system<\/li>\n<\/ul>\nStep 1: Create a New Rails Application<\/h2>\n
To begin, let’s create a new Rails application. Open your terminal and run the following command:<\/p>\n
$ rails new webapp\n<\/code><\/pre>\nThis will create a new directory named “webapp” with a basic Rails application structure.<\/p>\n
Navigate into the application directory:<\/p>\n
$ cd webapp\n<\/code><\/pre>\nStep 2: Set Up the Database<\/h2>\n
Next, we need to set up the database for our application. Ruby on Rails uses SQLite as the default database. Open the config\/database.yml<\/code> file and make sure your database configuration matches the following:<\/p>\ndefault: &default\n adapter: sqlite3\n pool: <%= ENV.fetch(\"RAILS_MAX_THREADS\") { 5 } %>\n timeout: 5000\n database: db\/development.sqlite3\n\ndevelopment:\n <<: *default\n<\/code><\/pre>\nSave the file and run the following command to create the database:<\/p>\n
$ rails db:create\n<\/code><\/pre>\nStep 3: Generate a Scaffold<\/h2>\n
Now, we will generate a scaffold for our application. A scaffold generates a set of views and controllers for a specific model. In this tutorial, we will create a simple blog application.<\/p>\n
Run the following command to generate the scaffold:<\/p>\n
$ rails generate scaffold Post title:string body:text\n<\/code><\/pre>\nThis will generate the necessary files and code for the blog application, including the database migration and model, controller, and view files.<\/p>\n
Apply the database migration using the following command:<\/p>\n
$ rails db:migrate\n<\/code><\/pre>\nStep 4: Add Bootstrap to the Application<\/h2>\n
To add Bootstrap to our application, we will use the bootstrap<\/code> gem. Open your Gemfile and add the following line:<\/p>\ngem 'bootstrap', '~> 4.0.0'\n<\/code><\/pre>\nSave the file and run the following command to install the gem:<\/p>\n
$ bundle install\n<\/code><\/pre>\nNext, let’s import the Bootstrap stylesheets and JavaScript files into our application.<\/p>\n
Open the app\/assets\/stylesheets\/application.css<\/code> file and add the following line at the top:<\/p>\n@import 'bootstrap';\n<\/code><\/pre>\nOpen the app\/assets\/javascripts\/application.js<\/code> file and add the following lines:<\/p>\n\/\/= require jquery3\n\/\/= require popper\n\/\/= require bootstrap\n<\/code><\/pre>\nStep 5: Customize the Scaffold Views<\/h2>\n
Now, let’s customize the scaffold views to use Bootstrap classes and styling.<\/p>\n
Open the app\/views\/posts\/index.html.erb<\/code> file and replace its contents with the following:<\/p>\n<h1 class=\"my-4\">Posts<\/h1>\n\n<table class=\"table\">\n <thead>\n <tr>\n <th>Title<\/th>\n <th>Body<\/th>\n <th colspan=\"3\"><\/th>\n <\/tr>\n <\/thead>\n\n <tbody>\n <% @posts.each do |post| %>\n <tr>\n <td><%= post.title %><\/td>\n <td><%= post.body %><\/td>\n <td><%= link_to 'Show', post %><\/td>\n <td><%= link_to 'Edit', edit_post_path(post) %><\/td>\n <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %><\/td>\n <\/tr>\n <% end %>\n <\/tbody>\n<\/table>\n\n<br>\n\n<%= link_to 'New Post', new_post_path, class: 'btn btn-primary' %>\n<\/code><\/pre>\nOpen the app\/views\/posts\/show.html.erb<\/code> file and replace its contents with the following:<\/p>\n<h1 class=\"my-4\"><%= @post.title %><\/h1>\n\n<p><%= @post.body %><\/p>\n\n<br>\n\n<%= link_to 'Edit', edit_post_path(@post), class: 'btn btn-primary' %>\n<%= link_to 'Back', posts_path, class: 'btn btn-secondary' %>\n<\/code><\/pre>\nOpen the app\/views\/posts\/_form.html.erb<\/code> file and replace its contents with the following:<\/p>\n<%= form_with(model: post, local: true) do |form| %>\n <% if post.errors.any? %>\n <div id=\"error_explanation\">\n <h2><%= pluralize(post.errors.count, \"error\") %> prohibited this post from being saved:<\/h2>\n\n <ul>\n <% post.errors.full_messages.each do |message| %>\n <li><%= message %><\/li>\n <% end %>\n <\/ul>\n <\/div>\n <% end %>\n\n <div class=\"form-group\">\n <%= form.label :title %>\n <%= form.text_field :title, class: 'form-control' %>\n <\/div>\n\n <div class=\"form-group\">\n <%= form.label :body %>\n <%= form.text_area :body, rows: 10, class: 'form-control' %>\n <\/div>\n\n <div class=\"actions\">\n <%= form.submit 'Save', class: 'btn btn-primary' %>\n <\/div>\n<% end %>\n<\/code><\/pre>\nStep 6: Start the Rails Server<\/h2>\n
Now, let’s start the Rails server and see our web application in action!<\/p>\n
Run the following command to start the server:<\/p>\n
$ rails server\n<\/code><\/pre>\nOpen your web browser and navigate to `http:\/\/localhost:3000\/posts`. You should see the blog application with a list of posts.<\/p>\n
Click on the “New Post” button to create a new post. Fill in the title and body of the post and click the “Save” button.<\/p>\n
You can also edit and delete existing posts using the respective links on the posts list page.<\/p>\n
Congratulations! You have successfully created a web application with Ruby on Rails and Bootstrap.<\/p>\n
Conclusion<\/h2>\n
In this tutorial, we learned how to create a web application using Ruby on Rails and Bootstrap. We started by setting up a new Rails application and generating a scaffold for a blog application.<\/p>\n
We then added Bootstrap to our application and customized the scaffold views to use Bootstrap styling and classes.<\/p>\n
Finally, we started the Rails server and tested our web application by creating, editing, and deleting posts.<\/p>\n
This is just the beginning of what you can do with Ruby on Rails and Bootstrap. Feel free to explore further and add more features to your web application.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, we will create a web application using Ruby on Rails and bootstrap. Ruby on Rails is a popular web application framework written in Ruby, while Bootstrap is a powerful CSS framework that helps build responsive and mobile-first web applications. By the end of this tutorial, you will Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[754,747,750,748,752,753,746,751,749,49,745],"yoast_head":"\nHow to Create a Web App with Ruby on Rails and Bootstrap - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Web App with Ruby on Rails and Bootstrap\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we will create a web application using Ruby on Rails and bootstrap. Ruby on Rails is a popular web application framework written in Ruby, while Bootstrap is a powerful CSS framework that helps build responsive and mobile-first web applications. By the end of this tutorial, you will Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:13:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:48:24+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t \"@context\": \"https:\/\/schema.org\",\n\t \"@graph\": [\n\t {\n\t \"@type\": \"Article\",\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/#article\",\n\t \"isPartOf\": {\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/\"\n\t },\n\t \"author\": {\n\t \"name\": \"Panther\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t },\n\t \"headline\": \"How to Create a Web App with Ruby on Rails and Bootstrap\",\n\t \"datePublished\": \"2023-11-04T23:13:59+00:00\",\n\t \"dateModified\": \"2023-11-05T05:48:24+00:00\",\n\t \"mainEntityOfPage\": {\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/\"\n\t },\n\t \"wordCount\": 615,\n\t \"publisher\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t },\n\t \"keywords\": [\n\t \"\\\"Bootstrap tutorial\\\"]\",\n\t \"\\\"Bootstrap\\\"\",\n\t \"\\\"build a web app\\\"\",\n\t \"\\\"create a web app\\\"\",\n\t \"\\\"developing with Ruby on Rails\\\"\",\n\t \"\\\"HTML\/CSS framework\\\"\",\n\t \"\\\"Ruby on Rails\\\"\",\n\t \"\\\"web app tutorial\\\"\",\n\t \"\\\"web application development\\\"\",\n\t \"\\\"Web development\\\"\",\n\t \"[\\\"web app\\\"\"\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"WebPage\",\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/\",\n\t \"url\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/\",\n\t \"name\": \"How to Create a Web App with Ruby on Rails and Bootstrap - Pantherax Blogs\",\n\t \"isPartOf\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t },\n\t \"datePublished\": \"2023-11-04T23:13:59+00:00\",\n\t \"dateModified\": \"2023-11-05T05:48:24+00:00\",\n\t \"breadcrumb\": {\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/#breadcrumb\"\n\t },\n\t \"inLanguage\": \"en-US\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"ReadAction\",\n\t \"target\": [\n\t \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/\"\n\t ]\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"BreadcrumbList\",\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/#breadcrumb\",\n\t \"itemListElement\": [\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 1,\n\t \"name\": \"Home\",\n\t \"item\": \"http:\/\/localhost:10003\/\"\n\t },\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 2,\n\t \"name\": \"How to Create a Web App with Ruby on Rails and Bootstrap\"\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"WebSite\",\n\t \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t \"url\": \"http:\/\/localhost:10003\/\",\n\t \"name\": \"Pantherax Blogs\",\n\t \"description\": \"\",\n\t \"publisher\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t },\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"SearchAction\",\n\t \"target\": {\n\t \"@type\": \"EntryPoint\",\n\t \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t },\n\t \"query-input\": \"required name=search_term_string\"\n\t }\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"Organization\",\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t \"name\": \"Pantherax Blogs\",\n\t \"url\": \"http:\/\/localhost:10003\/\",\n\t \"logo\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t \"width\": 1024,\n\t \"height\": 1024,\n\t \"caption\": \"Pantherax Blogs\"\n\t },\n\t \"image\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t }\n\t },\n\t {\n\t \"@type\": \"Person\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t \"name\": \"Panther\",\n\t \"image\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t \"caption\": \"Panther\"\n\t },\n\t \"sameAs\": [\n\t \"http:\/\/localhost:10003\"\n\t ],\n\t \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t }\n\t ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Web App with Ruby on Rails and Bootstrap - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Web App with Ruby on Rails and Bootstrap","og_description":"In this tutorial, we will create a web application using Ruby on Rails and bootstrap. Ruby on Rails is a popular web application framework written in Ruby, while Bootstrap is a powerful CSS framework that helps build responsive and mobile-first web applications. By the end of this tutorial, you will Continue Reading","og_url":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:13:59+00:00","article_modified_time":"2023-11-05T05:48:24+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"How to Create a Web App with Ruby on Rails and Bootstrap","datePublished":"2023-11-04T23:13:59+00:00","dateModified":"2023-11-05T05:48:24+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/"},"wordCount":615,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"Bootstrap tutorial\"]","\"Bootstrap\"","\"build a web app\"","\"create a web app\"","\"developing with Ruby on Rails\"","\"HTML\/CSS framework\"","\"Ruby on Rails\"","\"web app tutorial\"","\"web application development\"","\"Web development\"","[\"web app\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/","url":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/","name":"How to Create a Web App with Ruby on Rails and Bootstrap - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:13:59+00:00","dateModified":"2023-11-05T05:48:24+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-ruby-on-rails-and-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"How to Create a Web App with Ruby on Rails and Bootstrap"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3993"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=3993"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3993\/revisions"}],"predecessor-version":[{"id":4529,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3993\/revisions\/4529"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=3993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=3993"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=3993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}