{"id":7391,"date":"2015-12-14T10:39:03","date_gmt":"2015-12-14T10:39:03","guid":{"rendered":"https:\/\/dev.railscarma.com\/create-visual-magic-with-bootstrap-gem\/"},"modified":"2025-12-18T10:30:57","modified_gmt":"2025-12-18T10:30:57","slug":"create-visual-magic-with-bootstrap-gem","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/ja\/%e3%83%96%e3%83%ad%e3%82%b0\/%e6%8a%80%e8%a1%93%e8%ab%96%e6%96%87\/create-visual-magic-with-bootstrap-gem\/","title":{"rendered":"Rails 8\u306eBootstrap Gem\u3067\u30d3\u30b8\u30e5\u30a2\u30eb\u30de\u30b8\u30c3\u30af\u3092\u4f5c\u308b"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"7391\" class=\"elementor elementor-7391\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-613cad5b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"613cad5b\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1a3b2a3e\" data-id=\"1a3b2a3e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-23f91b16 elementor-widget elementor-widget-text-editor\" data-id=\"23f91b16\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\u5c02\u9580\u5bb6\u306e\u4e88\u6e2c\u3092\u4fe1\u3058\u308b\u306a\u3089\u30012016 \u5e74\u306f\u30d3\u30b8\u30e5\u30a2\u30eb\u306e\u5e74\u306b\u306a\u308b\u3067\u3057\u3087\u3046\u3002\u7d50\u5c40\u306e\u3068\u3053\u308d\u3001\u79c1\u305f\u3061\u306f\u6bce\u65e5\u975e\u5e38\u306b\u591a\u304f\u306e\u30c7\u30fc\u30bf\u306b\u3055\u3089\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001\u8208\u5473\u3092\u60f9\u304b\u308c\u306a\u3044\u9650\u308a\u3001\u305d\u306e\u307b\u3068\u3093\u3069\u3092\u7121\u8996\u3057\u3066\u3044\u307e\u3059\u3002\u305d\u3057\u3066\u30d3\u30b8\u30e5\u30a2\u30eb\u306f\u76ee\u3092\u5f15\u304f\u78ba\u5b9f\u306a\u65b9\u6cd5\u3067\u3059\u3002\u3057\u304b\u3057\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u79c1\u305f\u3061\u306f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u78e8\u304d\u3001\u898b\u305f\u76ee\u3092\u7f8e\u3057\u304f\u3059\u308b\u3053\u3068\u306b\u591a\u304f\u306e\u6642\u9593\u3092\u8cbb\u3084\u3057\u3001\u5e02\u5834\u306b\u51fa\u3059\u9803\u306b\u306f\u3059\u3067\u306b\u53e4\u3044\u5546\u54c1\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u305d\u308c\u3067\u3001\u51fa\u53e3\u306f\u4f55\u3067\u3059\u304b\uff1f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u8a2d\u8a08\u8981\u7d20\u306b\u305d\u308c\u307b\u3069\u591a\u304f\u306e\u6642\u9593\u3092\u8cbb\u3084\u3059\u5fc5\u8981\u304c\u3042\u308b\u306e\u3067\u3057\u3087\u3046\u304b\u3001\u305d\u308c\u3068\u3082\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d0\u30d0\u30a2\u306e\u3088\u3046\u306a\u5916\u89b3\u3067\u5e02\u5834\u306b\u6295\u5165\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u306e\u3067\u3057\u3087\u3046\u304b?\u3042\u306a\u305f\u3082\u30b1\u30fc\u30ad\u3092\u6301\u3063\u3066\u305d\u308c\u3092\u98df\u3079\u308b\u3053\u3068\u304c\u3067\u304d\u305f\u3089\u3069\u3046\u3057\u307e\u3059\u304b\uff1f Ruby on Rails \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u3088\u308a\u8fc5\u901f\u306b\u5e02\u5834\u306b\u6295\u5165\u3067\u304d\u308b\u3060\u3051\u3067\u306a\u304f\u3001Bootstrap gem \u306e\u52a9\u3051\u3092\u501f\u308a\u3066\u305d\u306e\u8a2d\u8a08\u3092\u9b54\u6cd5\u306e\u3088\u3046\u306b\u884c\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 Bootstrap (\u65e7 Twitter Bootstrap) \u306f CSS \u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3092\u63d0\u4f9b\u3057\u307e\u3059<b> <\/b>Web \u30b5\u30a4\u30c8\u306e\u30d3\u30b8\u30e5\u30a2\u30eb\u30c7\u30b6\u30a4\u30f3\u7528\u306e JavaScript \u30b3\u30fc\u30c9\u3002\u3053\u308c\u306f\u3001Ruby on Rails \u304c\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u307e\u305f\u306f\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u958b\u767a\u7528\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3042\u308b\u306e\u3068\u540c\u69d8\u306b\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u307e\u305f\u306f\u30d6\u30e9\u30a6\u30b6\u30fc\u30d9\u30fc\u30b9\u958b\u767a\u7528\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002 Bootstrap \u306f\u3001\u958b\u767a\u8005\u304c\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3084 Web \u30b5\u30a4\u30c8\u306e\u512a\u308c\u305f\u30c7\u30b6\u30a4\u30f3\u3092\u7c21\u5358\u306b\u4f5c\u6210\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002 Web \u30b5\u30a4\u30c8\u3084\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u306f\u3001\u30a6\u30a3\u30b8\u30a7\u30c3\u30c8\u3001\u30ea\u30b9\u30c8\u3001\u30d5\u30a9\u30fc\u30e0\u3001\u30bf\u30a4\u30dd\u30b0\u30e9\u30d5\u30a3\u30fc\u306a\u3069\u306e\u4e00\u822c\u7684\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u307b\u3068\u3093\u3069\u3042\u308a\u307e\u305b\u3093\u304c\u3001\u4e8b\u524d\u5b9a\u7fa9\u3055\u308c\u305f CSS \u30af\u30e9\u30b9\u304c\u4ed8\u5c5e\u3059\u308b Bootstrap \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u624b\u9593\u3092\u304b\u3051\u305a\u306b\u7c21\u5358\u306b\u30c7\u30b6\u30a4\u30f3\u3067\u304d\u307e\u3059\u3002\u3053\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306b\u306f JavaScript \u3082\u4ed8\u5c5e\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u30b9\u30af\u30ed\u30fc\u30eb \u30b9\u30d1\u30a4\u3001\u30a2\u30b3\u30fc\u30c7\u30a3\u30aa\u30f3\u3001\u30e2\u30fc\u30c0\u30eb\u3001\u30dd\u30c3\u30d7\u30aa\u30fc\u30d0\u30fc\u3092\u7c21\u5358\u306b\u4f5c\u6210\u3067\u304d\u307e\u3059\u3002 Bootstrap gem \u306b\u306f\u3001Bootstrap \u304c\u63d0\u4f9b\u3059\u308b\u3059\u3079\u3066\u3067\u306f\u306a\u3044\u306b\u3057\u3066\u3082\u3001\u307b\u3068\u3093\u3069\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30b5\u30f3\u30d7\u30eb \u30b3\u30fc\u30c9\u3092\u63d0\u4f9b\u3059\u308b\u3001\u5805\u7262\u3067\u5fb9\u5e95\u7684\u3067\u7406\u89e3\u3057\u3084\u3059\u3044\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3082\u3042\u308a\u307e\u3059\u3002\n<h2 class=\"western\"><span style=\"font-size: medium;\">\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb:<\/span><\/h2>\n<h3 class=\"western\"><span style=\"font-size: medium;\">\u30eb\u30d3\u30fc\u30fb\u30aa\u30f3\u30fb\u30ec\u30fc\u30eb<\/span><span style=\"font-size: medium;\">:<\/span><\/h3>\n<blockquote>gem &#039;bootstrap-sass&#039;, &#039;~&gt; 3.3.6 --&gt; \u8ffd\u52a0\u304c\u5fc5\u8981\u3001\u524a\u9664\u304c\u7c21\u5358\u306a\u30a2\u30bb\u30c3\u30c8\u30d1\u30a4\u30d7\u30e9\u30a4\u30f3 gem &#039;sass-rails&#039;, &#039;&gt;= 3.2&#039; --&gt; Rails \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30d0\u30f3\u30c9\u30eb\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u306e\u30c7\u30d5\u30a9\u30eb\u30c8 Gem<\/blockquote>\n<span style=\"font-size: medium;\">\u30d5\u30a1\u30a4\u30eb\u62e1\u5f35\u5b50\u306f\u975e\u5e38\u306b\u91cd\u8981\u3067\u3059\u3002\u30d5\u30a1\u30a4\u30eb\u62e1\u5f35\u5b50\u306b\u306f .scss \u307e\u305f\u306f .sass \u304c\u4ed8\u3044\u3066\u3044\u307e\u3059\u3002\u65b0\u3057\u3044\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30c7\u30d5\u30a9\u30eb\u30c8\u62e1\u5f35\u5b50\u306f .css \u3067\u3042\u308a\u3001\u305d\u306e\u30d5\u30a1\u30a4\u30eb\u62e1\u5f35\u5b50\u306e\u540d\u524d\u3092\u5909\u66f4\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/span>\n<blockquote>\u30c7\u30d5\u30a9\u30eb\u30c8: app\/assets\/stylesheets\/application.css *= require_self *= require_tree\u3002\u540d\u524d\u5909\u66f4: app\/assets\/stylesheets\/application.scss<\/blockquote>\n\u62e1\u5f35\u5b50\u3092\u5909\u66f4\u3057\u305f\u5f8c\u306f\u3001require \u30b9\u30c6\u30fc\u30c8\u30e1\u30f3\u30c8\u3092\u524a\u9664\u3057\u3001application.scss \u5185\u306b\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7 \u30a4\u30f3\u30dd\u30fc\u30c8 \u30d5\u30a1\u30a4\u30eb\u3092\u8ffd\u52a0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\n<blockquote>@import &quot;\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7 \u30b9\u30d7\u30ed\u30b1\u30c3\u30c8&quot;; @import\u300c\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u300d;\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u306e\u524d\u306b\u3001\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u30b9\u30d7\u30ed\u30b1\u30c3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 application.js \u3067\u306f\u3001\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7\u3092\u8ffd\u52a0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059 require javascript \/\/= require jquery \/\/= require bootstrap-sprockets bootstrap-sprockets \u306f\u500b\u5225\u306e\u30d6\u30fc\u30c8\u30b9\u30c8\u30e9\u30c3\u30d7 Javascript \u30d5\u30a1\u30a4\u30eb\u3092\u63d0\u4f9b\u3057\u307e\u3059 (\u4f8b:alert.js\u3001dropdown.js\u3001combobox.js) $(document) ).ready(function(){ $(&#039;.dropdown-toggle&#039;).dropdown(); });<\/blockquote>\n\u3053\u308c\u306f\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u7528\u306e JavaScript \u3067\u3059\u3002 Ruby on Rails \u306e\u6700\u3082\u512a\u308c\u305f\u70b9\u306f\u3001\u6700\u3082\u4e00\u822c\u7684\u306a\u554f\u984c\u306b\u5bfe\u3057\u3066\u89e3\u6c7a\u7b56\u304c\u63d0\u4f9b\u3055\u308c\u308b\u3053\u3068\u3067\u3059\u3002 Bootstrap gem \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u6642\u9593\u3092\u3042\u307e\u308a\u72a0\u7272\u306b\u3059\u308b\u3053\u3068\u306a\u304f\u3001\u3059\u3050\u306b\u6700\u9ad8\u306e\u30d3\u30b8\u30e5\u30a2\u30eb\u3092\u5b9f\u88c5\u3057\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u898b\u6804\u3048\u3092\u826f\u304f\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u6642\u9593\u306e\u7bc0\u7d04\u3068\u3044\u3046\u70b9\u3067\u306f\u3001Ruby on Rails \u307b\u3069\u6642\u9593\u3092\u7bc0\u7d04\u3067\u304d\u308b\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u8a00\u8a9e\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u3057\u305f\u304c\u3063\u3066\u3001\u6642\u9593\u306b\u4f59\u88d5\u304c\u306a\u3044\u304c\u3001\u305d\u308c\u3067\u3082\u7d20\u6674\u3089\u3057\u3044\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u305f\u3044\u5834\u5408\u306f\u3001Ruby on Rails \u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002\u3082\u3057\u3042\u306a\u305f\u304c Ruby on Rails \u958b\u767a\u4f1a\u793e\u3092\u63a2\u3057\u3066\u3044\u308b\u306a\u3089\u3001RailsCarma \u306f\u7d20\u6674\u3089\u3057\u3044\u9078\u629e\u80a2\u3067\u3059 (\u79c1\u305f\u3061\u81ea\u8eab\u304c\u305d\u3046\u8a00\u3063\u3066\u3044\u308b\u3068\u3057\u3066\u3082)\u3002 Railscarma \u306f\u958b\u767a\u3001\u30c8\u30ec\u30fc\u30cb\u30f3\u30b0\u3001\u30c7\u30d7\u30ed\u30a4\u3001Rails \u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u3078\u306e\u8ca2\u732e\u306e\u305f\u3081\u306b\u521d\u671f\u6bb5\u968e\u304b\u3089 Ruby on Rails \u3092\u5b9f\u88c5\u3057\u3001\u6700\u9ad8\u306e\u30b5\u30fc\u30d3\u30b9\u3092\u63d0\u4f9b\u3057\u3066\u304d\u307e\u3057\u305f\u3002 <a href=\"https:\/\/www.railscarma.com\/ja\/ruby-on-rails%e3%82%b3%e3%83%b3%e3%82%b5%e3%83%ab%e3%83%86%e3%82%a3%e3%83%b3%e3%82%b0\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ruby on Rails\u958b\u767a\u30b5\u30fc\u30d3\u30b9<\/a>\u3002 RailsCarma \u306f\u3001\u30b3\u30f3\u30b5\u30eb\u30c6\u30a3\u30f3\u30b0\u3001\u30a2\u30fc\u30ad\u30c6\u30af\u30c1\u30e3\u3001\u69cb\u7bc9\u3001\u7ba1\u7406\u3001\u62e1\u5f35\u306a\u3069\u306e\u30a8\u30f3\u30c9\u30c4\u30fc\u30a8\u30f3\u30c9\u306e Ruby on Rails \u30b5\u30fc\u30d3\u30b9\u3092\u4e16\u754c\u4e2d\u306e\u4f01\u696d\u306b\u63d0\u4f9b\u3057\u307e\u3059\u3002\u7c21\u5358\u306a\u96c7\u7528\u30d7\u30ed\u30bb\u30b9\u3067 Ruby on Rails \u958b\u767a\u8005\u3092\u96c7\u7528\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002 <a href=\"\/ja\/%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u304a\u554f\u3044\u5408\u308f\u305b<\/a> \u3082\u3063\u3068\u77e5\u308b\u305f\u3081\u306b\u3002\u4ed6\u306e\u5b9d\u77f3\u306b\u3064\u3044\u3066\u8aad\u3080:\n<ul>\n \t<li><a href=\"https:\/\/www.railscarma.com\/ja\/%e3%83%96%e3%83%ad%e3%82%b0\/%e6%8a%80%e8%a1%93%e8%ab%96%e6%96%87\/resque-gem-for-background-processes-in-ror\/\" target=\"_blank\" rel=\"noopener noreferrer\">Resque Gem : ROR\u306e\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u30d7\u30ed\u30bb\u30b9\u7528<\/a><\/li>\n \t<li><a href=\"https:\/\/www.railscarma.com\/ja\/%e3%83%96%e3%83%ad%e3%82%b0\/%e6%8a%80%e8%a1%93%e8%ab%96%e6%96%87\/ruby-prof-gem%e3%81%ae%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab%e3%81%a8%e4%bd%bf%e3%81%84%e6%96%b9\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ruby-Prof Gem \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u4f7f\u7528\u3059\u308b\u65b9\u6cd5<\/a><\/li>\n \t<li><a href=\"https:\/\/www.railscarma.com\/ja\/%e3%83%96%e3%83%ad%e3%82%b0\/%e6%8a%80%e8%a1%93%e8%ab%96%e6%96%87\/twitter-gem%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e3%83%88%e3%83%ac%e3%83%b3%e3%83%89%e3%83%88%e3%83%94%e3%83%83%e3%82%af\/\" target=\"_blank\" rel=\"noopener noreferrer\">Twitter Gem \u3092\u4f7f\u7528\u3057\u305f\u30c8\u30ec\u30f3\u30c9\u306e\u30c8\u30d4\u30c3\u30af<\/a><\/li>\n \t<li><a href=\"https:\/\/www.railscarma.com\/ja\/%e3%83%96%e3%83%ad%e3%82%b0\/%e6%8a%80%e8%a1%93%e8%ab%96%e6%96%87\/delayed-job-gem-for-csv\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSV \u306e\u9045\u5ef6\u30b8\u30e7\u30d6 Gem<\/a><\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7b41df82 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7b41df82\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-279a21aa\" data-id=\"279a21aa\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-21ba907b elementor-widget elementor-widget-heading\" data-id=\"21ba907b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u6700\u65b0\u306e\u30a2\u30c3\u30d7\u30c7\u30fc\u30c8\u3092\u8cfc\u8aad\u3059\u308b<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1599c7c elementor-widget elementor-widget-shortcode\" data-id=\"1599c7c\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\t\t\t\t\t<script type=\"text\/javascript\">\n\t\t\t\t\t\tvar gCaptchaSibWidget;\n                        var onloadSibCallbackInvisible = function () {\n\n                            var element = document.getElementsByClassName('sib-default-btn');\n                            var countInvisible = 0;\n                            var indexArray = [];\n                            jQuery('.sib-default-btn').each(function (index, el) {\n                                if ((jQuery(el).attr('id') == \"invisible\")) {\n                                    indexArray[countInvisible] = index;\n                                    countInvisible++\n                                }\n                            });\n\n                            jQuery('.invi-recaptcha').each(function (index, el) {\n                                grecaptcha.render(element[indexArray[index]], {\n                                    'sitekey': jQuery(el).attr('data-sitekey'),\n                                    'callback': sibVerifyCallback,\n                                });\n                            });\n                        };\n\t\t\t\t\t<\/script>\n\t\t\t\t\t                <script src=\"https:\/\/www.google.com\/recaptcha\/api.js?onload=onloadSibCallbackInvisible&render=explicit\" async defer><\/script>\n\t\t\t\t\n\t\t\t<form id=\"sib_signup_form_1\" method=\"post\" class=\"sib_signup_form\" action=\"\">\n\t\t\t\t<div class=\"sib_loader\" style=\"display:none;\"><img\n\t\t\t\t\t\t\tsrc=\"https:\/\/www.railscarma.com\/wp-includes\/images\/spinner.gif\" alt=\"\u30ed\u30fc\u30c0\"><\/div>\n\t\t\t\t<input type=\"hidden\" name=\"sib_form_action\" value=\"subscribe_form_submit\">\n\t\t\t\t<input type=\"hidden\" name=\"sib_form_id\" value=\"1\">\n                <input type=\"hidden\" name=\"sib_form_alert_notice\" value=\"Please fill out this field\">\n                <input type=\"hidden\" name=\"sib_form_invalid_email_notice\" value=\"Your email address is invalid\">\n                <input type=\"hidden\" name=\"sib_security\" value=\"d7f7626ab9\">\n\t\t\t\t<div class=\"sib_signup_box_inside_1\">\n\t\t\t\t\t<div style=\"\/*display:none*\/\" class=\"sib_msg_disp\">\n\t\t\t\t\t<\/div>\n                                            <div id=\"sib_captcha_invisible\" class=\"invi-recaptcha\" data-sitekey=\"6LdikOAaAAAAAJ6SWrrKVQrtw7TQpQAEnv0HS0G3\"><\/div>\n                    \t\t\t\t\t<p class=\"sib-email-area\">\r\n    <label class=\"sib-email-area\"><\/label>\r\n    <input type=\"email\" class=\"sib-email-area\" name=\"email\" required=\"required\" placeholder=\"\u96fb\u5b50\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\">\r\n<\/p>\r\n<p class=\"sib-NAME-area\">\r\n    <label class=\"sib-NAME-area\"><\/label>\r\n    <input type=\"text\" class=\"sib-NAME-area\" name=\"NAME\" placeholder=\"\u540d\u524d\">\r\n<\/p>\r\n<p>\r\n    <input type=\"submit\" id=\"invisible\" class=\"sib-default-btn\" value=\"\u8cfc\u8aad\u3059\u308b\">\r\n<\/p>\t\t\t\t<\/div>\n\t\t\t<input type=\"hidden\" name=\"trp-form-language\" value=\"ja\"\/><\/form>\n\t\t\t<style>\n\t\t\t\tform#sib_signup_form_1 p.sib-alert-message {\n    padding: 6px 12px;\n    margin-bottom: 20px;\n    border: 1px solid transparent;\n    border-radius: 4px;\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\nform#sib_signup_form_1 p.sib-alert-message-error {\n    background-color: #f2dede;\n    border-color: #ebccd1;\n    color: #a94442;\n}\nform#sib_signup_form_1 p.sib-alert-message-success {\n    background-color: #dff0d8;\n    border-color: #d6e9c6;\n    color: #3c763d;\n}\nform#sib_signup_form_1 p.sib-alert-message-warning {\n    background-color: #fcf8e3;\n    border-color: #faebcc;\n    color: #8a6d3b;\n}\n\t\t\t<\/style>\n\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t  <div class=\"related-post slider\">\r\n        <div class=\"headline\">\u95a2\u9023\u8a18\u4e8b<\/div>\r\n    <div class=\"post-list owl-carousel\">\r\n\r\n            <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"\u30ab\u30df\u30ca\u30ea\u30b8\u30a7\u30e0\" href=\"https:\/\/www.railscarma.com\/ja\/%e3%83%96%e3%83%ad%e3%82%b0\/%e6%8a%80%e8%a1%93%e8%ab%96%e6%96%87\/%e3%82%ab%e3%83%9f%e3%83%8a%e3%83%aa%e3%82%b8%e3%82%a7%e3%83%a0\/?related_post_from=37277\">\r\n\r\n      <img decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2023\/04\/kaminari-gem.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"\u30ab\u30df\u30ca\u30ea\u30b8\u30a7\u30e0\" srcset=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2023\/04\/kaminari-gem.jpg 800w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2023\/04\/kaminari-gem-300x113.jpg 300w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2023\/04\/kaminari-gem-768x288.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"\u30ab\u30df\u30ca\u30ea\u30b8\u30a7\u30e0\" href=\"https:\/\/www.railscarma.com\/ja\/%e3%83%96%e3%83%ad%e3%82%b0\/%e6%8a%80%e8%a1%93%e8%ab%96%e6%96%87\/%e3%82%ab%e3%83%9f%e3%83%8a%e3%83%aa%e3%82%b8%e3%82%a7%e3%83%a0\/?related_post_from=37277\">\r\n        \u30ab\u30df\u30ca\u30ea\u30b8\u30a7\u30e0  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"\u306a\u305c2026\u5e74\u306bRuby on Rails\u958b\u767a\u8005\u3092\u96c7\u3046\u306e\u304b\uff1f\" href=\"https:\/\/www.railscarma.com\/ja\/%e3%83%96%e3%83%ad%e3%82%b0\/%e3%83%ad%e3%83%bc\/why-to-hire-ruby-on-rails-developers\/?related_post_from=30627\">\r\n\r\n      <img decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2019\/01\/why-to-hire-ruby-on-rails-developers-in-2022.jpg\" class=\"attachment-full size-full wp-post-image\" alt=\"2022 \u5e74\u306b Ruby on Rails \u958b\u767a\u8005\u3092\u96c7\u7528\u3059\u308b\u7406\u7531\" srcset=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2019\/01\/why-to-hire-ruby-on-rails-developers-in-2022.jpg 800w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2019\/01\/why-to-hire-ruby-on-rails-developers-in-2022-300x113.jpg 300w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2019\/01\/why-to-hire-ruby-on-rails-developers-in-2022-768x288.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"\u306a\u305c2026\u5e74\u306bRuby on Rails\u958b\u767a\u8005\u3092\u96c7\u3046\u306e\u304b\uff1f\" href=\"https:\/\/www.railscarma.com\/ja\/%e3%83%96%e3%83%ad%e3%82%b0\/%e3%83%ad%e3%83%bc\/why-to-hire-ruby-on-rails-developers\/?related_post_from=30627\">\r\n        \u306a\u305c2026\u5e74\u306bRuby on Rails\u958b\u767a\u8005\u3092\u96c7\u3046\u306e\u304b\uff1f  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"CSV\u51e6\u7406\u306b\u3088\u308bRails\u3067\u306e\u30c7\u30fc\u30bf\u30b9\u30af\u30ec\u30a4\u30d4\u30f3\u30b0\" href=\"https:\/\/www.railscarma.com\/ja\/%e3%83%96%e3%83%ad%e3%82%b0\/%e6%8a%80%e8%a1%93%e8%ab%96%e6%96%87\/data-scraping-in-rails-by-processing-csv\/?related_post_from=31591\">\r\n\r\n      <img decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/09\/DATA-SCRAPING-IN-RAILS-BY-PROCESSING-CSV.png\" class=\"attachment-full size-full wp-post-image\" alt=\"\" srcset=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/09\/DATA-SCRAPING-IN-RAILS-BY-PROCESSING-CSV.png 800w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/09\/DATA-SCRAPING-IN-RAILS-BY-PROCESSING-CSV-300x113.png 300w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/09\/DATA-SCRAPING-IN-RAILS-BY-PROCESSING-CSV-768x288.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"CSV\u51e6\u7406\u306b\u3088\u308bRails\u3067\u306e\u30c7\u30fc\u30bf\u30b9\u30af\u30ec\u30a4\u30d4\u30f3\u30b0\" href=\"https:\/\/www.railscarma.com\/ja\/%e3%83%96%e3%83%ad%e3%82%b0\/%e6%8a%80%e8%a1%93%e8%ab%96%e6%96%87\/data-scraping-in-rails-by-processing-csv\/?related_post_from=31591\">\r\n        CSV\u51e6\u7406\u306b\u3088\u308bRails\u3067\u306e\u30c7\u30fc\u30bf\u30b9\u30af\u30ec\u30a4\u30d4\u30f3\u30b0  <\/a>\r\n\r\n        <\/div>\r\n              <div class=\"item\">\r\n            <div class=\"thumb post_thumb\">\r\n    <a  title=\"Ruby on Rails Web \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4ecb\u3057\u3066\u97f3\u58f0\u901a\u8a71\u3092\u884c\u3046\" href=\"https:\/\/www.railscarma.com\/ja\/%e3%83%96%e3%83%ad%e3%82%b0\/%e6%8a%80%e8%a1%93%e8%ab%96%e6%96%87\/ruby-on-rails%e3%82%a6%e3%82%a7%e3%83%96%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%a7%e9%9f%b3%e5%a3%b0%e9%80%9a%e8%a9%b1%e3%82%92%e3%81%99%e3%82%8b\/?related_post_from=31309\">\r\n\r\n      <img decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/07\/MAKE-VOICE-CALLS-THROUGH-RUBY-ON-RAILS-WEB-APPLICATIONS.png\" class=\"attachment-full size-full wp-post-image\" alt=\"\" srcset=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/07\/MAKE-VOICE-CALLS-THROUGH-RUBY-ON-RAILS-WEB-APPLICATIONS.png 800w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/07\/MAKE-VOICE-CALLS-THROUGH-RUBY-ON-RAILS-WEB-APPLICATIONS-300x113.png 300w, https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/07\/MAKE-VOICE-CALLS-THROUGH-RUBY-ON-RAILS-WEB-APPLICATIONS-768x288.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\r\n\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <a class=\"title post_title\"  title=\"Ruby on Rails Web \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4ecb\u3057\u3066\u97f3\u58f0\u901a\u8a71\u3092\u884c\u3046\" href=\"https:\/\/www.railscarma.com\/ja\/%e3%83%96%e3%83%ad%e3%82%b0\/%e6%8a%80%e8%a1%93%e8%ab%96%e6%96%87\/ruby-on-rails%e3%82%a6%e3%82%a7%e3%83%96%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%a7%e9%9f%b3%e5%a3%b0%e9%80%9a%e8%a9%b1%e3%82%92%e3%81%99%e3%82%8b\/?related_post_from=31309\">\r\n        Ruby on Rails Web \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4ecb\u3057\u3066\u97f3\u58f0\u901a\u8a71\u3092\u884c\u3046  <\/a>\r\n\r\n        <\/div>\r\n      \r\n  <\/div>\r\n\r\n  <script>\r\n      <\/script>\r\n  <style>\r\n    .related-post {}\r\n\r\n    .related-post .post-list {\r\n      text-align: left;\r\n          }\r\n\r\n    .related-post .post-list .item {\r\n      margin: 10px;\r\n      padding: 10px;\r\n          }\r\n\r\n    .related-post .headline {\r\n      font-size: 14px !important;\r\n      color: #999999 !important;\r\n          }\r\n\r\n    .related-post .post-list .item .post_thumb {\r\n      max-height: 220px;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n          }\r\n\r\n    .related-post .post-list .item .post_title {\r\n      font-size: 14px;\r\n      color: #000000;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .post-list .item .post_excerpt {\r\n      font-size: 12px;\r\n      color: #3f3f3f;\r\n      margin: 10px 0px;\r\n      padding: 0px;\r\n      display: block;\r\n      text-decoration: none;\r\n          }\r\n\r\n    .related-post .owl-dots .owl-dot {\r\n          }\r\n\r\n      <\/style>\r\n      <script>\r\n      jQuery(document).ready(function($) {\r\n        $(\".related-post .post-list\").owlCarousel({\r\n          items: 2,\r\n          responsiveClass: true,\r\n          responsive: {\r\n            0: {\r\n              items: 1,\r\n            },\r\n            768: {\r\n              items: 2,\r\n            },\r\n            1200: {\r\n              items: 2,\r\n            }\r\n          },\r\n                      rewind: true,\r\n                                loop: true,\r\n                                center: false,\r\n                                autoplay: true,\r\n            autoplayHoverPause: true,\r\n                                nav: true,\r\n            navSpeed: 1000,\r\n            navText: ['<i class=\"fas fa-chevron-left\"><\/i>', '<i class=\"fas fa-chevron-right\"><\/i>'],\r\n                                dots: false,\r\n            dotsSpeed: 1200,\r\n                                                    rtl: false,\r\n          \r\n        });\r\n      });\r\n    <\/script>\r\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>\u5c02\u9580\u5bb6\u306e\u4e88\u6e2c\u3092\u4fe1\u3058\u308b\u306a\u3089\u30012016 \u5e74\u306f\u30d3\u30b8\u30e5\u30a2\u30eb\u306e\u5e74\u306b\u306a\u308b\u3067\u3057\u3087\u3046\u3002\u7d50\u5c40\u306e\u3068\u3053\u308d\u3001\u79c1\u305f\u3061\u306f\u6bce\u65e5\u975e\u5e38\u306b\u591a\u304f\u306e\u30c7\u30fc\u30bf\u306b\u3055\u3089\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001\u8208\u5473\u3092\u60f9\u304b\u308c\u306a\u3044\u9650\u308a\u3001\u305d\u306e\u307b\u3068\u3093\u3069\u3092\u7121\u8996\u3057\u3066\u3044\u307e\u3059\u3002\u305d\u3057\u3066\u30d3\u30b8\u30e5\u30a2\u30eb\u306f\u76ee\u3092\u5f15\u304f\u78ba\u5b9f\u306a\u65b9\u6cd5\u3067\u3059\u3002\u3057\u304b\u3057\u3001\u591a\u304f\u306e\u5834\u5408\u3001\u79c1\u305f\u3061\u306f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u78e8\u304d\u3001\u898b\u305f\u76ee\u3092\u7f8e\u3057\u304f\u3059\u308b\u3053\u3068\u306b\u591a\u304f\u306e\u6642\u9593\u3092\u8cbb\u3084\u3057\u3001\u5e02\u5834\u306b\u51fa\u3059\u9803\u306b\u306f\u3059\u3067\u306b\u53e4\u3044\u5546\u54c1\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u305d\u308c\u3067\u3001\u51fa\u53e3\u306f\u4f55\u3067\u3059\u304b\uff1f\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u8a2d\u8a08\u8981\u7d20\u306b\u591a\u304f\u306e\u6642\u9593\u3092\u8cbb\u3084\u3059\u5fc5\u8981\u304c\u3042\u308b\u306e\u304b\u3001\u305d\u308c\u3068\u3082\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u5e02\u5834\u306b\u6295\u5165\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u306e\u304b\u2026<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.railscarma.com\/ja\/%e3%83%96%e3%83%ad%e3%82%b0\/ruby-on-rails%e3%81%a7%e3%81%ae%e3%82%b5%e3%83%bc%e3%83%89%e3%83%91%e3%83%bc%e3%83%86%e3%82%a3api%e7%b5%b1%e5%90%88%e3%82%bd%e3%83%aa%e3%83%a5%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3\/\"> <span class=\"screen-reader-text\">Ruby on Rails\u306b\u304a\u3051\u308b\u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3API\u7d71\u5408\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3<\/span> \u3082\u3063\u3068\u8aad\u3080 \"<\/a><\/p>","protected":false},"author":1,"featured_media":31980,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[384],"tags":[564,565,647,572,649,382,383],"class_list":["post-7391","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technical-articles","tag-agile-methodology","tag-agile-ruby-on-rails-development","tag-bootstrap-gem","tag-gem","tag-rails-gems","tag-ruby-on-rails","tag-ruby-on-rails-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create Visual Magic with Bootstrap Gem in Rails 8 - RailsCarma<\/title>\n<meta name=\"description\" content=\"Create visual magic with the Bootstrap gem in Rails 8 to build clean responsive user interfaces faster with modern styling.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.railscarma.com\/ja\/\u30d6\u30ed\u30b0\/\u6280\u8853\u8ad6\u6587\/create-visual-magic-with-bootstrap-gem\/\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Visual Magic with Bootstrap Gem in Rails 8 - RailsCarma\" \/>\n<meta property=\"og:description\" content=\"Create visual magic with the Bootstrap gem in Rails 8 to build clean responsive user interfaces faster with modern styling.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.railscarma.com\/ja\/\u30d6\u30ed\u30b0\/\u6280\u8853\u8ad6\u6587\/create-visual-magic-with-bootstrap-gem\/\" \/>\n<meta property=\"og:site_name\" content=\"RailsCarma - Ruby on Rails Development Company specializing in Offshore Development\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/RailsCarma\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-14T10:39:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-18T10:30:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2015\/12\/bootstrapgem.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@railscarma\" \/>\n<meta name=\"twitter:site\" content=\"@railscarma\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"3\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/person\/5f2228a2dec7549056e709de6eb85d21\"},\"headline\":\"Create Visual Magic with Bootstrap Gem in Rails 8\",\"datePublished\":\"2015-12-14T10:39:03+00:00\",\"dateModified\":\"2025-12-18T10:30:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/\"},\"wordCount\":655,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.railscarma.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2015\/12\/bootstrapgem.png\",\"keywords\":[\"agile methodology\",\"agile ruby on rails development\",\"bootstrap gem\",\"gem\",\"rails gems\",\"Ruby on rails\",\"ruby on rails development\"],\"articleSection\":[\"Technical Articles\"],\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/\",\"url\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/\",\"name\":\"Create Visual Magic with Bootstrap Gem in Rails 8 - RailsCarma\",\"isPartOf\":{\"@id\":\"https:\/\/www.railscarma.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2015\/12\/bootstrapgem.png\",\"datePublished\":\"2015-12-14T10:39:03+00:00\",\"dateModified\":\"2025-12-18T10:30:57+00:00\",\"description\":\"Create visual magic with the Bootstrap gem in Rails 8 to build clean responsive user interfaces faster with modern styling.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/#primaryimage\",\"url\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2015\/12\/bootstrapgem.png\",\"contentUrl\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2015\/12\/bootstrapgem.png\",\"width\":800,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.railscarma.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Visual Magic with Bootstrap Gem in Rails 8\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.railscarma.com\/#website\",\"url\":\"https:\/\/www.railscarma.com\/\",\"name\":\"RailsCarma - Ruby on Rails Development Company specializing in Offshore Development\",\"description\":\"RailsCarma is a Ruby on Rails Development Company in Bangalore. We specialize in Offshore Ruby on Rails Development based out in USA and India. Hire experienced Ruby on Rails developers for the ultimate Web Experience.\",\"publisher\":{\"@id\":\"https:\/\/www.railscarma.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.railscarma.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.railscarma.com\/#organization\",\"name\":\"RailsCarma\",\"url\":\"https:\/\/www.railscarma.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/08\/railscarma_logo.png\",\"contentUrl\":\"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/08\/railscarma_logo.png\",\"width\":200,\"height\":46,\"caption\":\"RailsCarma\"},\"image\":{\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/RailsCarma\/\",\"https:\/\/x.com\/railscarma\",\"https:\/\/www.linkedin.com\/company\/railscarma\/\",\"https:\/\/myspace.com\/railscarma\",\"https:\/\/in.pinterest.com\/railscarma\/\",\"https:\/\/www.youtube.com\/channel\/UCx3Wil-aAnDARuatTEyMdpg\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/person\/5f2228a2dec7549056e709de6eb85d21\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\/\/www.railscarma.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/308867ca6c81f3aba146080c601000087180326f752c4116849ea9f514c6a4fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/308867ca6c81f3aba146080c601000087180326f752c4116849ea9f514c6a4fa?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/www.railscarma.com\/hire-ruby-on-rails-developer\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Visual Magic with Bootstrap Gem in Rails 8 - RailsCarma","description":"Create visual magic with the Bootstrap gem in Rails 8 to build clean responsive user interfaces faster with modern styling.","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":"https:\/\/www.railscarma.com\/ja\/\u30d6\u30ed\u30b0\/\u6280\u8853\u8ad6\u6587\/create-visual-magic-with-bootstrap-gem\/","og_locale":"ja_JP","og_type":"article","og_title":"Create Visual Magic with Bootstrap Gem in Rails 8 - RailsCarma","og_description":"Create visual magic with the Bootstrap gem in Rails 8 to build clean responsive user interfaces faster with modern styling.","og_url":"https:\/\/www.railscarma.com\/ja\/\u30d6\u30ed\u30b0\/\u6280\u8853\u8ad6\u6587\/create-visual-magic-with-bootstrap-gem\/","og_site_name":"RailsCarma - Ruby on Rails Development Company specializing in Offshore Development","article_publisher":"https:\/\/www.facebook.com\/RailsCarma\/","article_published_time":"2015-12-14T10:39:03+00:00","article_modified_time":"2025-12-18T10:30:57+00:00","og_image":[{"width":800,"height":300,"url":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2015\/12\/bootstrapgem.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_creator":"@railscarma","twitter_site":"@railscarma","twitter_misc":{"\u57f7\u7b46\u8005":"admin","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"3\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/#article","isPartOf":{"@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/"},"author":{"name":"admin","@id":"https:\/\/www.railscarma.com\/#\/schema\/person\/5f2228a2dec7549056e709de6eb85d21"},"headline":"Create Visual Magic with Bootstrap Gem in Rails 8","datePublished":"2015-12-14T10:39:03+00:00","dateModified":"2025-12-18T10:30:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/"},"wordCount":655,"commentCount":0,"publisher":{"@id":"https:\/\/www.railscarma.com\/#organization"},"image":{"@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/#primaryimage"},"thumbnailUrl":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2015\/12\/bootstrapgem.png","keywords":["agile methodology","agile ruby on rails development","bootstrap gem","gem","rails gems","Ruby on rails","ruby on rails development"],"articleSection":["Technical Articles"],"inLanguage":"ja","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/","url":"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/","name":"Create Visual Magic with Bootstrap Gem in Rails 8 - RailsCarma","isPartOf":{"@id":"https:\/\/www.railscarma.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/#primaryimage"},"image":{"@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/#primaryimage"},"thumbnailUrl":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2015\/12\/bootstrapgem.png","datePublished":"2015-12-14T10:39:03+00:00","dateModified":"2025-12-18T10:30:57+00:00","description":"Create visual magic with the Bootstrap gem in Rails 8 to build clean responsive user interfaces faster with modern styling.","breadcrumb":{"@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/#primaryimage","url":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2015\/12\/bootstrapgem.png","contentUrl":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2015\/12\/bootstrapgem.png","width":800,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/www.railscarma.com\/blog\/technical-articles\/create-visual-magic-with-bootstrap-gem\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.railscarma.com\/"},{"@type":"ListItem","position":2,"name":"Create Visual Magic with Bootstrap Gem in Rails 8"}]},{"@type":"WebSite","@id":"https:\/\/www.railscarma.com\/#website","url":"https:\/\/www.railscarma.com\/","name":"RailsCarma - \u30aa\u30d5\u30b7\u30e7\u30a2\u958b\u767a\u306b\u7279\u5316\u3057\u305f Ruby on Rails \u958b\u767a\u4f1a\u793e","description":"RailsCarma \u306f\u30d0\u30f3\u30ac\u30ed\u30fc\u30eb\u306e Ruby on Rails \u958b\u767a\u4f1a\u793e\u3067\u3059\u3002\u5f53\u793e\u306f\u7c73\u56fd\u3068\u30a4\u30f3\u30c9\u3092\u62e0\u70b9\u3068\u3059\u308b\u30aa\u30d5\u30b7\u30e7\u30a2 Ruby on Rails \u958b\u767a\u3092\u5c02\u9580\u3068\u3057\u3066\u3044\u307e\u3059\u3002\u7d4c\u9a13\u8c4a\u5bcc\u306a Ruby on Rails \u958b\u767a\u8005\u3092\u96c7\u3063\u3066\u3001\u7a76\u6975\u306e Web \u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u3092\u5b9f\u73fe\u3057\u307e\u3057\u3087\u3046\u3002","publisher":{"@id":"https:\/\/www.railscarma.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.railscarma.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Organization","@id":"https:\/\/www.railscarma.com\/#organization","name":"\u30ec\u30fc\u30eb\u30ab\u30fc\u30de","url":"https:\/\/www.railscarma.com\/","logo":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.railscarma.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/08\/railscarma_logo.png","contentUrl":"https:\/\/www.railscarma.com\/wp-content\/uploads\/2020\/08\/railscarma_logo.png","width":200,"height":46,"caption":"RailsCarma"},"image":{"@id":"https:\/\/www.railscarma.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/RailsCarma\/","https:\/\/x.com\/railscarma","https:\/\/www.linkedin.com\/company\/railscarma\/","https:\/\/myspace.com\/railscarma","https:\/\/in.pinterest.com\/railscarma\/","https:\/\/www.youtube.com\/channel\/UCx3Wil-aAnDARuatTEyMdpg"]},{"@type":"Person","@id":"https:\/\/www.railscarma.com\/#\/schema\/person\/5f2228a2dec7549056e709de6eb85d21","name":"\u7ba1\u7406\u8005","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/www.railscarma.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/308867ca6c81f3aba146080c601000087180326f752c4116849ea9f514c6a4fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/308867ca6c81f3aba146080c601000087180326f752c4116849ea9f514c6a4fa?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/www.railscarma.com\/hire-ruby-on-rails-developer\/"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.railscarma.com\/ja\/wp-json\/wp\/v2\/posts\/7391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.railscarma.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.railscarma.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.railscarma.com\/ja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.railscarma.com\/ja\/wp-json\/wp\/v2\/comments?post=7391"}],"version-history":[{"count":0,"href":"https:\/\/www.railscarma.com\/ja\/wp-json\/wp\/v2\/posts\/7391\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.railscarma.com\/ja\/wp-json\/wp\/v2\/media\/31980"}],"wp:attachment":[{"href":"https:\/\/www.railscarma.com\/ja\/wp-json\/wp\/v2\/media?parent=7391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.railscarma.com\/ja\/wp-json\/wp\/v2\/categories?post=7391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.railscarma.com\/ja\/wp-json\/wp\/v2\/tags?post=7391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}