--- a/base/src/sqwl/cms/layout/ArticlesByTag.scala	Thu Dec 13 14:21:10 2018 +0100
+++ b/base/src/sqwl/cms/layout/ArticlesByTag.scala	Thu Dec 13 15:15:13 2018 +0100
@@ -10,8 +10,9 @@
       case ViewTag(t) =>
         val l = cnt.articlesByTag(t)
         Some(tags2.section(
-          ul(l.map(art =>
-            li(a(href:=s"/${http.prefix}/${art.pathSegment}", art.title))
+          div(cls:="list-group", l.map(art =>
+            a(href:=s"/${http.prefix}/${art.pathSegment}",
+              cls:="list-group-item", art.title)
           )),
           if (l.isEmpty) "Tag není ještě použit." else ""
       ))

--- a/base/src/sqwl/cms/layout/ArticlesInCategory.scala	Thu Dec 13 14:21:10 2018 +0100
+++ b/base/src/sqwl/cms/layout/ArticlesInCategory.scala	Thu Dec 13 15:15:13 2018 +0100
@@ -10,8 +10,9 @@
       case ViewCategory(c) =>
         val l = cnt.articlesByCategory(c)
         Some(tags2.section(
-          ul(l.map(art =>
-            li(a(href:=s"/${http.prefix}/${art.pathSegment}", art.title))
+          div(cls:="list-group", l.map(art =>
+            a(href:=s"/${http.prefix}/${art.pathSegment}",
+              cls:="list-group-item", art.title)
           )),
           if (l.isEmpty) "V této kategorii není ještě článek." else ""
       ))

--- a/base/src/sqwl/cms/layout/PrimaryView.scala	Thu Dec 13 14:21:10 2018 +0100
+++ b/base/src/sqwl/cms/layout/PrimaryView.scala	Thu Dec 13 15:15:13 2018 +0100
@@ -9,8 +9,9 @@
     st match {
       case ViewArticle(art) => Some(tags2.section(
         h1(a(href:=s"/${http.prefix}/${art.pathSegment}", art.title)),
-        div(cls:="row", art.tags.map(t =>
-          a(href:=s"/${http.prefix}/$TAG/${t.pathSegment}", cls:="tag", s"(${t.name})"))),
+        div(cls:="row", div(cls:="col-md-12", art.tags.map(t =>
+          a(href:=s"/${http.prefix}/$TAG/${t.pathSegment}", cls:="tag",
+            t.name)))),
         raw(art.htmlContent)
       ))
       case _ => None

--- a/base/src/sqwl/cms/layout/TagCloud.scala	Thu Dec 13 14:21:10 2018 +0100
+++ b/base/src/sqwl/cms/layout/TagCloud.scala	Thu Dec 13 15:15:13 2018 +0100
@@ -9,10 +9,11 @@
   def apply(cnt: iContent, st: ViewState): Option[TypedTag[String]] =
     st match {
       case Dashboard => Some(tags2.section(
-        "Tags: ",
-        cnt.tags.map(t =>
-          a(href:=s"/${http.prefix}/$TAG/${t.pathSegment}", cls:="tag", s"(${t.name})"))
-      ))
+        div(cls:="col-md-12", "Štítky: ",
+          cnt.tags.map(t =>
+            a(href:=s"/${http.prefix}/$TAG/${t.pathSegment}", cls:="tag",
+              t.name))
+      )))
       case _ => None
     }
 

--- a/example/content/public/css/site.css	Thu Dec 13 14:21:10 2018 +0100
+++ b/example/content/public/css/site.css	Thu Dec 13 15:15:13 2018 +0100
@@ -170,6 +170,12 @@
 	text-decoration: none;
 }
 
+a.list-group-item {
+  color: #006634;
+}
+
+a:hover, a:focus,
+a.list-group-item:hover, a.list-group-item:focus,
 a.tile-category-body:hover, a.tile-category-body:focus {
   color: #693e11;
 }
@@ -194,6 +200,26 @@
 	text-transform: none;
 }
 
-.tag {
+a.tag {
   margin-right: 1em;
-}
\ No newline at end of file
+	display: inline-block;
+	min-width: 10px;
+	padding-top: 3px;
+	padding-bottom: 5px;
+  padding-left: 7px;
+  padding-right: 7px;
+	font-size: 12px;
+	font-weight: 700;
+	line-height: 1;
+  color: #006634;
+	text-align: center;
+	white-space: nowrap;
+	vertical-align: middle;
+  background-color: #eedece;
+	border-radius: 10px;
+}
+
+a.tag:hover, a.tag:focus {
+  color: #693e11;
+	text-decoration: none;
+}