Refactor 2 columns layouts to use Bootstrap CSS classes

That allows to use standard Bootstrap classes instead of custom Piwik ids + those layouts are now responsive and work on mobiles

11 files changed, 256 insertions, 228 deletions

diff --git a/plugins/Actions/templates/indexSiteSearch.twig b/plugins/Actions/templates/indexSiteSearch.twig
index 7d6093c6ac..8d9eaa0909 100644
--- a/plugins/Actions/templates/indexSiteSearch.twig
+++ b/plugins/Actions/templates/indexSiteSearch.twig
@@ -1,17 +1,21 @@
-<div id='leftcolumn'>
-    <h2 piwik-enriched-headline>{{ 'Actions_WidgetSearchKeywords'|translate }}</h2>
-    {{ keywords|raw }}
+<div class="row">
 
-    <h2 piwik-enriched-headline>{{ 'Actions_WidgetSearchNoResultKeywords'|translate }}</h2>
-    {{ noResultKeywords|raw }}
+    <div class="col-md-6">
+        <h2 piwik-enriched-headline>{{ 'Actions_WidgetSearchKeywords'|translate }}</h2>
+        {{ keywords|raw }}
 
-    {% if categories is defined %}
-        <h2 piwik-enriched-headline>{{ 'Actions_WidgetSearchCategories'|translate }}</h2>
-        {{ categories|raw }}
-    {% endif %}
-</div>
+        <h2 piwik-enriched-headline>{{ 'Actions_WidgetSearchNoResultKeywords'|translate }}</h2>
+        {{ noResultKeywords|raw }}
+
+        {% if categories is defined %}
+            <h2 piwik-enriched-headline>{{ 'Actions_WidgetSearchCategories'|translate }}</h2>
+            {{ categories|raw }}
+        {% endif %}
+    </div>
+
+    <div class="col-md-6">
+        <h2 piwik-enriched-headline>{{ 'Actions_WidgetPageUrlsFollowingSearch'|translate }}</h2>
+        {{ pagesUrlsFollowingSiteSearch|raw }}
+    </div>
 
-<div id='rightcolumn'>
-    <h2 piwik-enriched-headline>{{ 'Actions_WidgetPageUrlsFollowingSearch'|translate }}</h2>
-    {{ pagesUrlsFollowingSiteSearch|raw }}
 </div>
diff --git a/plugins/DevicesDetection/templates/devices.twig b/plugins/DevicesDetection/templates/devices.twig
index 0f93aa61be..a37079c9fd 100644
--- a/plugins/DevicesDetection/templates/devices.twig
+++ b/plugins/DevicesDetection/templates/devices.twig
@@ -1,15 +1,19 @@
-<div id='leftcolumn'>
-    <h2 piwik-enriched-headline>{{ "DevicesDetection_DeviceType"|translate }}</h2>
-    {{ deviceTypes  | raw}}
-    <h2 piwik-enriched-headline>{{ "DevicesDetection_DeviceBrand"|translate }}</h2>
-    {{ deviceBrands | raw }}
-</div>
+<div class="row">
+
+    <div class="col-md-6">
+        <h2 piwik-enriched-headline>{{ "DevicesDetection_DeviceType"|translate }}</h2>
+        {{ deviceTypes  | raw}}
+        <h2 piwik-enriched-headline>{{ "DevicesDetection_DeviceBrand"|translate }}</h2>
+        {{ deviceBrands | raw }}
+    </div>
+
+    <div class="col-md-6">
+        <h2 piwik-enriched-headline>{{ "DevicesDetection_DeviceModel"|translate }}</h2>
+        {{ deviceModels | raw }}
+        {% if resolutions|default is not empty %}
+            <h2 piwik-enriched-headline>{{ 'Resolution_Resolutions'|translate }}</h2>
+            {{ resolutions|raw }}
+        {% endif %}
+    </div>
 
-<div id='rightcolumn'>
-    <h2 piwik-enriched-headline>{{ "DevicesDetection_DeviceModel"|translate }}</h2>
-    {{ deviceModels | raw }}
-    {% if resolutions|default is not empty %}
-        <h2 piwik-enriched-headline>{{ 'Resolution_Resolutions'|translate }}</h2>
-        {{ resolutions|raw }}
-    {% endif %}
 </div>
diff --git a/plugins/Goals/templates/getOverviewView.twig b/plugins/Goals/templates/getOverviewView.twig
index 281d65952c..798c8fc285 100644
--- a/plugins/Goals/templates/getOverviewView.twig
+++ b/plugins/Goals/templates/getOverviewView.twig
@@ -15,20 +15,21 @@
             </a>
         </h2>
 
-        <div id='leftcolumn'>
-            <div class="sparkline">{{ sparkline(goal.urlSparklineConversions) }}
-                {{ 'Goals_Conversions'|translate("<strong>"~nb_conversions~"</strong>")|raw }}
-                {% if goal.goalAllowMultipleConversionsPerVisit %}
-                    ({{ 'General_NVisits'|translate("<strong>"~nb_visits_converted~"</strong>") | raw }})
-                {% endif %}
+        <div class="row">
+            <div class="col-md-6">
+                <div class="sparkline">{{ sparkline(goal.urlSparklineConversions) }}
+                    {{ 'Goals_Conversions'|translate("<strong>"~nb_conversions~"</strong>")|raw }}
+                    {% if goal.goalAllowMultipleConversionsPerVisit %}
+                        ({{ 'General_NVisits'|translate("<strong>"~nb_visits_converted~"</strong>") | raw }})
+                    {% endif %}
+                </div>
             </div>
-        </div>
-        <div id='rightcolumn'>
-            <div class="sparkline">{{ sparkline(goal.urlSparklineConversionRate) }}
-                {{ 'Goals_ConversionRate'|translate("<strong>"~conversion_rate~"</strong>")|raw }}
+            <div class="col-md-6">
+                <div class="sparkline">{{ sparkline(goal.urlSparklineConversionRate) }}
+                    {{ 'Goals_ConversionRate'|translate("<strong>"~conversion_rate~"</strong>")|raw }}
+                </div>
             </div>
         </div>
-        <br class="clear"/>
     </div>
 {% endfor %}
 
diff --git a/plugins/Referrers/templates/getSearchEnginesAndKeywords.twig b/plugins/Referrers/templates/getSearchEnginesAndKeywords.twig
index ce2f5f2e8d..29b2b3f0af 100644
--- a/plugins/Referrers/templates/getSearchEnginesAndKeywords.twig
+++ b/plugins/Referrers/templates/getSearchEnginesAndKeywords.twig
@@ -1,9 +1,13 @@
-<div id='leftcolumn'>
-    <h2 piwik-enriched-headline>{{ 'Referrers_Keywords'|translate }}</h2>
-    {{ keywords|raw }}
-</div>
+<div class="row">
+
+    <div class="col-md-6">
+        <h2 piwik-enriched-headline>{{ 'Referrers_Keywords'|translate }}</h2>
+        {{ keywords|raw }}
+    </div>
+
+    <div class="col-md-6">
+        <h2 piwik-enriched-headline>{{ 'Referrers_SearchEngines'|translate }}</h2>
+        {{ searchEngines|raw }}
+    </div>
 
-<div id='rightcolumn'>
-    <h2 piwik-enriched-headline>{{ 'Referrers_SearchEngines'|translate }}</h2>
-    {{ searchEngines|raw }}
 </div>
diff --git a/plugins/Referrers/templates/index.twig b/plugins/Referrers/templates/index.twig
index 3b07a4063f..c629431210 100644
--- a/plugins/Referrers/templates/index.twig
+++ b/plugins/Referrers/templates/index.twig
@@ -4,51 +4,51 @@
 
 <h2 piwik-enriched-headline>{{ 'Referrers_Type'|translate }}</h2>
 
-<div id='leftcolumn'>
-    <div class="sparkline" style="padding-left: 12px;">{{ sparkline(urlSparklineDirectEntry) }}
-        {{ 'Referrers_TypeDirectEntries'|translate("<strong>"~visitorsFromDirectEntry~"</strong>")|raw }}
-        {% if visitorsFromDirectEntryPercent|default is not empty %},
-            {{ 'Referrers_XPercentOfVisits'|translate("<strong>"~visitorsFromDirectEntryPercent~"</strong>")|raw }}
-        {% endif %}
-        {% if visitorsFromDirectEntryEvolution|default is not empty %}
-            {{ visitorsFromDirectEntryEvolution|raw }}
-        {% endif %}
-    </div>
-    <div class="sparkline" style="padding-left: 12px;">{{ sparkline(urlSparklineSearchEngines) }}
-        {{ 'Referrers_TypeSearchEngines'|translate("<strong>"~visitorsFromSearchEngines~"</strong>")|raw }}
-        {% if visitorsFromSearchEnginesPercent|default is not empty %},
-            {{ 'Referrers_XPercentOfVisits'|translate("<strong>"~visitorsFromSearchEnginesPercent~"</strong>")|raw }}
-        {% endif %}
-        {% if visitorsFromSearchEnginesEvolution|default is not empty %}
-            {{ visitorsFromSearchEnginesEvolution|raw }}
-        {% endif %}
-    </div>
-</div>
-<div id='rightcolumn'>
-    <div class="sparkline">{{ sparkline(urlSparklineWebsites) }}
-        {{ 'Referrers_TypeWebsites'|translate("<strong>"~visitorsFromWebsites~"</strong>")|raw }}
-        {% if visitorsFromWebsitesPercent|default is not empty %},
-            {{ 'Referrers_XPercentOfVisits'|translate("<strong>"~visitorsFromWebsitesPercent~"</strong>")|raw }}
-        {% endif %}
-        {% if visitorsFromWebsitesEvolution|default is not empty %}
-            {{ visitorsFromWebsitesEvolution|raw }}
-        {% endif %}
+<div class="row">
+    <div class="col-md-6">
+        <div class="sparkline" style="padding-left: 12px;">{{ sparkline(urlSparklineDirectEntry) }}
+            {{ 'Referrers_TypeDirectEntries'|translate("<strong>"~visitorsFromDirectEntry~"</strong>")|raw }}
+            {% if visitorsFromDirectEntryPercent|default is not empty %},
+                {{ 'Referrers_XPercentOfVisits'|translate("<strong>"~visitorsFromDirectEntryPercent~"</strong>")|raw }}
+            {% endif %}
+            {% if visitorsFromDirectEntryEvolution|default is not empty %}
+                {{ visitorsFromDirectEntryEvolution|raw }}
+            {% endif %}
+        </div>
+        <div class="sparkline" style="padding-left: 12px;">{{ sparkline(urlSparklineSearchEngines) }}
+            {{ 'Referrers_TypeSearchEngines'|translate("<strong>"~visitorsFromSearchEngines~"</strong>")|raw }}
+            {% if visitorsFromSearchEnginesPercent|default is not empty %},
+                {{ 'Referrers_XPercentOfVisits'|translate("<strong>"~visitorsFromSearchEnginesPercent~"</strong>")|raw }}
+            {% endif %}
+            {% if visitorsFromSearchEnginesEvolution|default is not empty %}
+                {{ visitorsFromSearchEnginesEvolution|raw }}
+            {% endif %}
+        </div>
     </div>
-    <div class="sparkline">{{ sparkline(urlSparklineCampaigns) }}
-        {{ 'Referrers_TypeCampaigns'|translate("<strong>"~visitorsFromCampaigns~"</strong>")|raw }}
-        {% if visitorsFromCampaignsPercent|default is not empty %},
-            {{ 'Referrers_XPercentOfVisits'|translate("<strong>"~visitorsFromCampaignsPercent~"</strong>")|raw }}
-        {% endif %}
-        {% if visitorsFromCampaignsEvolution|default is not empty %}
-            {{ visitorsFromCampaignsEvolution|raw }}
-        {% endif %}
+    <div class="col-md-6">
+        <div class="sparkline">{{ sparkline(urlSparklineWebsites) }}
+            {{ 'Referrers_TypeWebsites'|translate("<strong>"~visitorsFromWebsites~"</strong>")|raw }}
+            {% if visitorsFromWebsitesPercent|default is not empty %},
+                {{ 'Referrers_XPercentOfVisits'|translate("<strong>"~visitorsFromWebsitesPercent~"</strong>")|raw }}
+            {% endif %}
+            {% if visitorsFromWebsitesEvolution|default is not empty %}
+                {{ visitorsFromWebsitesEvolution|raw }}
+            {% endif %}
+        </div>
+        <div class="sparkline">{{ sparkline(urlSparklineCampaigns) }}
+            {{ 'Referrers_TypeCampaigns'|translate("<strong>"~visitorsFromCampaigns~"</strong>")|raw }}
+            {% if visitorsFromCampaignsPercent|default is not empty %},
+                {{ 'Referrers_XPercentOfVisits'|translate("<strong>"~visitorsFromCampaignsPercent~"</strong>")|raw }}
+            {% endif %}
+            {% if visitorsFromCampaignsEvolution|default is not empty %}
+                {{ visitorsFromCampaignsEvolution|raw }}
+            {% endif %}
+        </div>
     </div>
 </div>
 
-<div style="clear:both;"/>
-
-<div id="distinctReferrersByType">
-    <div id='leftcolumn'>
+<div id="distinctReferrersByType" class="row">
+    <div class="col-md-6">
         <div class="sparkline" style="padding-left: 12px;">{{ sparkline(urlSparklineDistinctSearchEngines) }}
             <strong>{{ numberDistinctSearchEngines }}</strong> {{ 'Referrers_DistinctSearchEngines'|translate }}
             {% if numberDistinctSearchEnginesEvolution|default is not empty %}
@@ -62,7 +62,7 @@
             {% endif %}
         </div>
     </div>
-    <div id='rightcolumn'>
+    <div class="col-md-6">
         <div class="sparkline">{{ sparkline(urlSparklineDistinctWebsites) }}
             <strong>{{ numberDistinctWebsites }}</strong> {{ 'Referrers_DistinctWebsites'|translate }}
             {{ 'Referrers_UsingNDistinctUrls'|translate("<strong>"~numberDistinctWebsitesUrls~"</strong>")|raw }}
@@ -80,8 +80,6 @@
     <br/>
 </div>
 
-<p style="clear:both;"/>
-
 <div style="float:left;" class="relatedReferrerReports">{{ 'General_View'|translate }}
     <a href="javascript:broadcast.propagateAjax('module=Referrers&action=getSearchEnginesAndKeywords')">{{ 'Referrers_SubmenuSearchEngines'|translate }}</a>,
     <a href="javascript:broadcast.propagateAjax('module=Referrers&action=indexWebsites')">{{ 'Referrers_SubmenuWebsites'|translate }}</a>,
diff --git a/plugins/Referrers/templates/indexWebsites.twig b/plugins/Referrers/templates/indexWebsites.twig
index adfea9d6e1..cdfa6efe01 100644
--- a/plugins/Referrers/templates/indexWebsites.twig
+++ b/plugins/Referrers/templates/indexWebsites.twig
@@ -1,9 +1,13 @@
-<div id='leftcolumn'>
-    <h2 piwik-enriched-headline>{{ 'Referrers_Websites'|translate }}</h2>
-    {{ websites|raw }}
-</div>
+<div class="row">
+
+    <div class="col-md-6">
+        <h2 piwik-enriched-headline>{{ 'Referrers_Websites'|translate }}</h2>
+        {{ websites|raw }}
+    </div>
+
+    <div class="col-md-6">
+        <h2 piwik-enriched-headline>{{ 'Referrers_Socials'|translate }}</h2>
+        {{ socials|raw }}
+    </div>
 
-<div id='rightcolumn'>
-    <h2 piwik-enriched-headline>{{ 'Referrers_Socials'|translate }}</h2>
-    {{ socials|raw }}
 </div>
diff --git a/plugins/UserCountry/templates/index.twig b/plugins/UserCountry/templates/index.twig
index 72d49613eb..70ac5f8ba7 100644
--- a/plugins/UserCountry/templates/index.twig
+++ b/plugins/UserCountry/templates/index.twig
@@ -1,26 +1,28 @@
-<div id="leftcolumn">
-    {{ postEvent("Template.leftColumnUserCountry") }}
+<div class="row">
 
-    <h2 piwik-enriched-headline>{{ 'UserCountry_Continent'|translate }}</h2>
-    {{ dataTableContinent|raw }}
+    <div class="col-md-6">
+        {{ postEvent("Template.leftColumnUserCountry") }}
 
-    <div class="sparkline">
-        {{ sparkline(urlSparklineCountries) }}
-        {{ 'UserCountry_DistinctCountries'|translate("<strong>"~numberDistinctCountries~"</strong>")|raw }}
-    </div>
+        <h2 piwik-enriched-headline>{{ 'UserCountry_Continent'|translate }}</h2>
+        {{ dataTableContinent|raw }}
 
-    {{ postEvent("Template.footerUserCountry") }}
+        <div class="sparkline">
+            {{ sparkline(urlSparklineCountries) }}
+            {{ 'UserCountry_DistinctCountries'|translate("<strong>"~numberDistinctCountries~"</strong>")|raw }}
+        </div>
 
-</div>
+        {{ postEvent("Template.footerUserCountry") }}
+    </div>
 
-<div id="rightcolumn">
-    <h2 piwik-enriched-headline>{{ 'UserCountry_Country'|translate }}</h2>
-    {{ dataTableCountry|raw }}
+    <div class="col-md-6">
+        <h2 piwik-enriched-headline>{{ 'UserCountry_Country'|translate }}</h2>
+        {{ dataTableCountry|raw }}
 
-    <h2 piwik-enriched-headline>{{ 'UserCountry_Region'|translate }}</h2>
-    {{ dataTableRegion|raw }}
+        <h2 piwik-enriched-headline>{{ 'UserCountry_Region'|translate }}</h2>
+        {{ dataTableRegion|raw }}
 
-    <h2 piwik-enriched-headline>{{ 'UserCountry_City'|translate }}</h2>
-    {{ dataTableCity|raw }}
-</div>
+        <h2 piwik-enriched-headline>{{ 'UserCountry_City'|translate }}</h2>
+        {{ dataTableCity|raw }}
+    </div>
 
+</div>
diff --git a/plugins/VisitFrequency/templates/_sparklines.twig b/plugins/VisitFrequency/templates/_sparklines.twig
index 97697272e8..e5639e2e36 100644
--- a/plugins/VisitFrequency/templates/_sparklines.twig
+++ b/plugins/VisitFrequency/templates/_sparklines.twig
@@ -1,26 +1,29 @@
-<div id="leftcolumn">
-    <div class="sparkline">
-        {{ sparkline(urlSparklineNbVisitsReturning) }}
-        {{ 'VisitFrequency_ReturnVisits'|translate("<strong>"~nbVisitsReturning~"</strong>")|raw }}
+<div class="row">
+
+    <div class="col-md-6">
+        <div class="sparkline">
+            {{ sparkline(urlSparklineNbVisitsReturning) }}
+            {{ 'VisitFrequency_ReturnVisits'|translate("<strong>"~nbVisitsReturning~"</strong>")|raw }}
+        </div>
+        <div class="sparkline">
+            {{ sparkline(urlSparklineNbActionsReturning) }}
+            {{ 'VisitFrequency_ReturnActions'|translate("<strong>"~nbActionsReturning~"</strong>")|raw }}
+        </div>
+        <div class="sparkline">
+            {{ sparkline(urlSparklineActionsPerVisitReturning) }}
+            {{ 'VisitFrequency_ReturnAvgActions'|translate("<strong>"~nbActionsPerVisitReturning~"</strong>")|raw }}
+        </div>
     </div>
-    <div class="sparkline">
-        {{ sparkline(urlSparklineNbActionsReturning) }}
-        {{ 'VisitFrequency_ReturnActions'|translate("<strong>"~nbActionsReturning~"</strong>")|raw }}
+    <div class="col-md-6">
+        <div class="sparkline">
+            {{ sparkline(urlSparklineAvgVisitDurationReturning) }}
+            {% set avgVisitDurationReturning=avgVisitDurationReturning|sumtime %}
+            {{ 'VisitFrequency_ReturnAverageVisitDuration'|translate("<strong>"~avgVisitDurationReturning~"</strong>")|raw }}
+        </div>
+        <div class="sparkline">
+            {{ sparkline(urlSparklineBounceRateReturning) }}
+            {{ 'VisitFrequency_ReturnBounceRate'|translate("<strong>"~bounceRateReturning~"</strong>")|raw }}
+        </div>
+        {% include "_sparklineFooter.twig" %}
     </div>
-    <div class="sparkline">
-        {{ sparkline(urlSparklineActionsPerVisitReturning) }}
-        {{ 'VisitFrequency_ReturnAvgActions'|translate("<strong>"~nbActionsPerVisitReturning~"</strong>")|raw }}
-    </div>
-</div><div id="rightcolumn">
-    <div class="sparkline">
-        {{ sparkline(urlSparklineAvgVisitDurationReturning) }}
-        {% set avgVisitDurationReturning=avgVisitDurationReturning|sumtime %}
-        {{ 'VisitFrequency_ReturnAverageVisitDuration'|translate("<strong>"~avgVisitDurationReturning~"</strong>")|raw }}
-    </div>
-    <div class="sparkline">
-        {{ sparkline(urlSparklineBounceRateReturning) }}
-        {{ 'VisitFrequency_ReturnBounceRate'|translate("<strong>"~bounceRateReturning~"</strong>")|raw }}
-    </div>
-    {% include "_sparklineFooter.twig" %}
 </div>
-<div style="clear:both"></div>
\ No newline at end of file
diff --git a/plugins/VisitTime/templates/index.twig b/plugins/VisitTime/templates/index.twig
index c0c2a85feb..688cde0338 100644
--- a/plugins/VisitTime/templates/index.twig
+++ b/plugins/VisitTime/templates/index.twig
@@ -1,9 +1,13 @@
-<div id='leftcolumn'>
-    <h2 piwik-enriched-headline>{{ 'VisitTime_LocalTime'|translate }}</h2>
-    {{ dataTableVisitInformationPerLocalTime|raw }}
-</div>
+<div class="row">
+
+    <div class="col-md-6">
+        <h2 piwik-enriched-headline>{{ 'VisitTime_LocalTime'|translate }}</h2>
+        {{ dataTableVisitInformationPerLocalTime|raw }}
+    </div>
+
+    <div class="col-md-6">
+        <h2 piwik-enriched-headline>{{ 'VisitTime_ServerTime'|translate }}</h2>
+        {{ dataTableVisitInformationPerServerTime|raw }}
+    </div>
 
-<div id='rightcolumn'>
-    <h2 piwik-enriched-headline>{{ 'VisitTime_ServerTime'|translate }}</h2>
-    {{ dataTableVisitInformationPerServerTime|raw }}
 </div>
diff --git a/plugins/VisitorInterest/templates/index.twig b/plugins/VisitorInterest/templates/index.twig
index af98d8f1ff..332289e106 100644
--- a/plugins/VisitorInterest/templates/index.twig
+++ b/plugins/VisitorInterest/templates/index.twig
@@ -1,20 +1,21 @@
-<br />
-<div id="leftcolumn">
-    <h2 piwik-enriched-headline>{{ 'VisitorInterest_VisitsPerDuration'|translate }}</h2>
-    {{ dataTableNumberOfVisitsPerVisitDuration|raw }}
+<div class="row">
+    <div class="col-md-6">
+        <h2 piwik-enriched-headline>{{ 'VisitorInterest_VisitsPerDuration'|translate }}</h2>
+        {{ dataTableNumberOfVisitsPerVisitDuration|raw }}
+    </div>
+    <div class="col-md-6">
+        <h2 piwik-enriched-headline>{{ 'VisitorInterest_VisitsPerNbOfPages'|translate }}</h2>
+        {{ dataTableNumberOfVisitsPerPage|raw }}
+    </div>
 </div>
-<div id="rightcolumn">
-    <h2 piwik-enriched-headline>{{ 'VisitorInterest_VisitsPerNbOfPages'|translate }}</h2>
-    {{ dataTableNumberOfVisitsPerPage|raw }}
+
+<div class="row">
+    <div class="col-md-6">
+        <h2 piwik-enriched-headline>{{ 'VisitorInterest_visitsByVisitCount'|translate }}</h2>
+        {{ dataTableNumberOfVisitsByVisitNum|raw }}
+    </div>
+    <div class="col-md-6">
+        <h2 piwik-enriched-headline>{{ 'VisitorInterest_VisitsByDaysSinceLast'|translate }}</h2>
+        {{ dataTableNumberOfVisitsByDaysSinceLast|raw }}
+    </div>
 </div>
-<div style="clear:both"></div>
-<br />
-<div id="leftcolumn">
-    <h2 piwik-enriched-headline>{{ 'VisitorInterest_visitsByVisitCount'|translate }}</h2>
-    {{ dataTableNumberOfVisitsByVisitNum|raw }}
-</div>
-<div id="rightcolumn">
-    <h2 piwik-enriched-headline>{{ 'VisitorInterest_VisitsByDaysSinceLast'|translate }}</h2>
-    {{ dataTableNumberOfVisitsByDaysSinceLast|raw }}
-</div>
-<div style="clear:both"></div>
\ No newline at end of file
diff --git a/plugins/VisitsSummary/templates/_sparklines.twig b/plugins/VisitsSummary/templates/_sparklines.twig
index a61a31d230..dbef25aba5 100644
--- a/plugins/VisitsSummary/templates/_sparklines.twig
+++ b/plugins/VisitsSummary/templates/_sparklines.twig
@@ -1,78 +1,81 @@
-<div id='leftcolumn'>
-    <div class="sparkline">
-        {{ sparkline(urlSparklineNbVisits)|raw }}
-        {{ 'General_NVisits'|translate("<strong>"~nbVisits~"</strong>")|raw }}{% if displayUniqueVisitors %},
-            {{ 'VisitsSummary_NbUniqueVisitors'|translate("<strong>"~nbUniqVisitors~"</strong>")|raw }}{% endif %}
-    </div>
-    {% if nbUsers > 0 %}
-        {# Most of users will not have used `setUserId` so this would be confusingly zero #}
+<div class="row">
+
+    <div class="col-md-6">
         <div class="sparkline">
-            {{ sparkline(urlSparklineNbUsers)|raw }}
-            {{ 'General_NUsers'|translate("<strong>"~nbUsers~"</strong>")|raw }}
+            {{ sparkline(urlSparklineNbVisits)|raw }}
+            {{ 'General_NVisits'|translate("<strong>"~nbVisits~"</strong>")|raw }}{% if displayUniqueVisitors %},
+                {{ 'VisitsSummary_NbUniqueVisitors'|translate("<strong>"~nbUniqVisitors~"</strong>")|raw }}{% endif %}
         </div>
-    {% endif %}
-    <div class="sparkline">
-        {{ sparkline(urlSparklineAvgVisitDuration)|raw }}
-        {% set averageVisitDuration=averageVisitDuration|sumtime %}
-        {{ 'VisitsSummary_AverageVisitDuration'|translate("<strong>"~averageVisitDuration~"</strong>")|raw }}
-    </div>
-    <div class="sparkline">
-        {{ sparkline(urlSparklineBounceRate)|raw }}
-        {{ 'VisitsSummary_NbVisitsBounced'|translate("<strong>"~bounceRate~"</strong>")|raw }}
-    </div>
-    <div class="sparkline">
-        {{ sparkline(urlSparklineActionsPerVisit)|raw }}
-        {{ 'VisitsSummary_NbActionsPerVisit'|translate("<strong>"~nbActionsPerVisit~"</strong>")|raw }}
-    </div>
-    {% if showActionsPluginReports|default(false) %}
-	<div class="sparkline">
-        {{ sparkline(urlSparklineAvgGenerationTime)|raw }}
-		{% set averageGenerationTime=averageGenerationTime|sumtime %}
-		{{ 'VisitsSummary_AverageGenerationTime'|translate("<strong>"~averageGenerationTime~"</strong>")|raw }}
-	</div>
-    {% endif %}
-</div>
-
-<div id='rightcolumn'>
-    {% if showActionsPluginReports|default(false) %}
-        {% if showOnlyActions %}
-            <div class="sparkline">
-                {{ sparkline(urlSparklineNbActions)|raw }}
-                {{ 'VisitsSummary_NbActionsDescription'|translate("<strong>"~nbActions~"</strong>")|raw }}
-            </div>
-        {% else %}
+        {% if nbUsers > 0 %}
+            {# Most of users will not have used `setUserId` so this would be confusingly zero #}
             <div class="sparkline">
-                {{ sparkline(urlSparklineNbPageviews)|raw }}
-                {{ 'VisitsSummary_NbPageviewsDescription'|translate("<strong>"~nbPageviews~"</strong>")|trim|raw }},
-                {{ 'VisitsSummary_NbUniquePageviewsDescription'|translate("<strong>"~nbUniquePageviews~"</strong>")|raw }}
+                {{ sparkline(urlSparklineNbUsers)|raw }}
+                {{ 'General_NUsers'|translate("<strong>"~nbUsers~"</strong>")|raw }}
             </div>
-            {% if displaySiteSearch %}
+        {% endif %}
+        <div class="sparkline">
+            {{ sparkline(urlSparklineAvgVisitDuration)|raw }}
+            {% set averageVisitDuration=averageVisitDuration|sumtime %}
+            {{ 'VisitsSummary_AverageVisitDuration'|translate("<strong>"~averageVisitDuration~"</strong>")|raw }}
+        </div>
+        <div class="sparkline">
+            {{ sparkline(urlSparklineBounceRate)|raw }}
+            {{ 'VisitsSummary_NbVisitsBounced'|translate("<strong>"~bounceRate~"</strong>")|raw }}
+        </div>
+        <div class="sparkline">
+            {{ sparkline(urlSparklineActionsPerVisit)|raw }}
+            {{ 'VisitsSummary_NbActionsPerVisit'|translate("<strong>"~nbActionsPerVisit~"</strong>")|raw }}
+        </div>
+        {% if showActionsPluginReports|default(false) %}
+        <div class="sparkline">
+            {{ sparkline(urlSparklineAvgGenerationTime)|raw }}
+            {% set averageGenerationTime=averageGenerationTime|sumtime %}
+            {{ 'VisitsSummary_AverageGenerationTime'|translate("<strong>"~averageGenerationTime~"</strong>")|raw }}
+        </div>
+        {% endif %}
+    </div>
+
+    <div class="col-md-6">
+        {% if showActionsPluginReports|default(false) %}
+            {% if showOnlyActions %}
                 <div class="sparkline">
-                    {{ sparkline(urlSparklineNbSearches)|raw }}
-                    {{ 'VisitsSummary_NbSearchesDescription'|translate("<strong>"~nbSearches~"</strong>")|trim|raw }},
-                    {{ 'VisitsSummary_NbKeywordsDescription'|translate("<strong>"~nbKeywords~"</strong>")|raw }}
+                    {{ sparkline(urlSparklineNbActions)|raw }}
+                    {{ 'VisitsSummary_NbActionsDescription'|translate("<strong>"~nbActions~"</strong>")|raw }}
                 </div>
-            {% endif %}
-            <div class="sparkline">
-                    {{ sparkline(urlSparklineNbDownloads)|raw }}
-                    {{ 'VisitsSummary_NbDownloadsDescription'|translate("<strong>"~nbDownloads~"</strong>")|trim|raw }},
-                    {{ 'VisitsSummary_NbUniqueDownloadsDescription'|translate("<strong>"~nbUniqueDownloads~"</strong>")|raw }}
-            </div>
-            <div class="sparkline">
-                    {{ sparkline(urlSparklineNbOutlinks)|raw }}
-                    {{ 'VisitsSummary_NbOutlinksDescription'|translate("<strong>"~nbOutlinks~"</strong>")|trim|raw }},
-                    {{ 'VisitsSummary_NbUniqueOutlinksDescription'|translate("<strong>"~nbUniqueOutlinks~"</strong>")|raw }}
-            </div>
-            {% endif %}
-    {% endif %}
-    <div class="sparkline">
-            {{ sparkline(urlSparklineMaxActions)|raw }}
-            {{ 'VisitsSummary_MaxNbActions'|translate("<strong>"~maxActions~"</strong>")|raw }}
+            {% else %}
+                <div class="sparkline">
+                    {{ sparkline(urlSparklineNbPageviews)|raw }}
+                    {{ 'VisitsSummary_NbPageviewsDescription'|translate("<strong>"~nbPageviews~"</strong>")|trim|raw }},
+                    {{ 'VisitsSummary_NbUniquePageviewsDescription'|translate("<strong>"~nbUniquePageviews~"</strong>")|raw }}
+                </div>
+                {% if displaySiteSearch %}
+                    <div class="sparkline">
+                        {{ sparkline(urlSparklineNbSearches)|raw }}
+                        {{ 'VisitsSummary_NbSearchesDescription'|translate("<strong>"~nbSearches~"</strong>")|trim|raw }},
+                        {{ 'VisitsSummary_NbKeywordsDescription'|translate("<strong>"~nbKeywords~"</strong>")|raw }}
+                    </div>
+                {% endif %}
+                <div class="sparkline">
+                        {{ sparkline(urlSparklineNbDownloads)|raw }}
+                        {{ 'VisitsSummary_NbDownloadsDescription'|translate("<strong>"~nbDownloads~"</strong>")|trim|raw }},
+                        {{ 'VisitsSummary_NbUniqueDownloadsDescription'|translate("<strong>"~nbUniqueDownloads~"</strong>")|raw }}
+                </div>
+                <div class="sparkline">
+                        {{ sparkline(urlSparklineNbOutlinks)|raw }}
+                        {{ 'VisitsSummary_NbOutlinksDescription'|translate("<strong>"~nbOutlinks~"</strong>")|trim|raw }},
+                        {{ 'VisitsSummary_NbUniqueOutlinksDescription'|translate("<strong>"~nbUniqueOutlinks~"</strong>")|raw }}
+                </div>
+                {% endif %}
+        {% endif %}
+        <div class="sparkline">
+                {{ sparkline(urlSparklineMaxActions)|raw }}
+                {{ 'VisitsSummary_MaxNbActions'|translate("<strong>"~maxActions~"</strong>")|raw }}
+        </div>
+
+        {{ postEvent('Template.VisitsSummaryOverviewSparklines') }}
     </div>
-    
-    {{ postEvent('Template.VisitsSummaryOverviewSparklines') }}
+
 </div>
-<div style="clear:both;"></div>
 
 {% include "_sparklineFooter.twig" %}