diff --git a/Gemfile b/Gemfile
index 49f2aed9df..f541dc8d72 100644
--- a/Gemfile
+++ b/Gemfile
@@ -5,6 +5,8 @@ source 'https://rubygems.org'
gem 'rails', '4.2.5'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
+# Bootstrap for styling:
+gem 'bootstrap-sass', '~> 3.3.6'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
diff --git a/Gemfile.lock b/Gemfile.lock
index a9721d73b2..244482acb0 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -37,12 +37,18 @@ GEM
thread_safe (~> 0.3, >= 0.3.4)
tzinfo (~> 1.1)
arel (6.0.3)
+ autoprefixer-rails (6.1.2)
+ execjs
+ json
better_errors (2.1.1)
coderay (>= 1.0.0)
erubis (>= 2.6.6)
rack (>= 0.9.0)
binding_of_caller (0.7.2)
debug_inspector (>= 0.0.1)
+ bootstrap-sass (3.3.6)
+ autoprefixer-rails (>= 5.2.1)
+ sass (>= 3.3.4)
builder (3.2.2)
byebug (8.2.1)
choice (0.2.0)
@@ -186,6 +192,7 @@ PLATFORMS
DEPENDENCIES
better_errors
binding_of_caller
+ bootstrap-sass (~> 3.3.6)
byebug
coffee-rails (~> 4.1.0)
jbuilder (~> 2.0)
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index e07c5a830f..f91cae5d9b 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -11,6 +11,7 @@
// about supported directives.
//
//= require jquery
+//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.scss
similarity index 82%
rename from app/assets/stylesheets/application.css
rename to app/assets/stylesheets/application.scss
index f9cd5b3483..441df06919 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.scss
@@ -10,6 +10,7 @@
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
- *= require_tree .
- *= require_self
*/
+ // "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
+ @import "bootstrap-sprockets";
+ @import "bootstrap";
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 16c3de2cc5..48a2d51779 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -8,8 +8,8 @@
<%= link_to "Media Ranker", root_path %> Ranking the Best of Everything
-
-<%= yield %>
-
+
+ <%= yield %>
+