more sr friendly

resources/assets/sass/_bootstrap.scss

@@ -3,6 +3,7 @@
 @import "~bootstrap/scss/mixins";
 
 @import "bootstrap-customizations/variables";
+@import "bootstrap-customizations/_helpers-before";
 
 @import "~bootstrap/scss/root";
 @import "~bootstrap/scss/reboot";

resources/assets/sass/_fa-utils.scss

@@ -3,6 +3,25 @@
 .fa-pr::before {
 	margin-right: $sp1;
 }
+.fa-pl::before {
+	margin-left: $sp1;
+}
+
+.fa-pr2::before {
+	 margin-right: $sp2;
+ }
+.fa-pl2::before {
+	margin-left: $sp2;
+}
+
+.fa-px::before {
+	margin-left: $sp1;
+	margin-right: $sp1;
+}
+.fa-px2::before {
+	margin-left: $sp2;
+	margin-right: $sp2;
+}
 
 .fa-large.fa-pr::before {
 	margin-right: $sp2;

resources/assets/sass/bootstrap-customizations/_card.scss

@@ -4,6 +4,15 @@
 	font-weight: bold;
 }
 
+.card-header {
+	h1, h2, h3 {
+		font-size: 1em;
+		margin: 0;
+		padding: 0;
+		font-weight: bold;
+	}
+}
+
 .card {
 	box-shadow: 0 2px 3px rgba(black, .3);
 }

resources/assets/sass/bootstrap-customizations/_helpers-before.scss

@@ -0,0 +1,19 @@
+// this is before the rest of bootstrap to get the right paddings in grid
+.sr-list {
+	@include list-unstyled;
+	margin-bottom: 0;
+
+	> li {
+		display: inline-block;
+		&:not(:last-child) {
+			margin-right: $list-inline-padding;
+		}
+	}
+
+	&.sr-list-tight {
+		> li {
+			display: inline-block;
+			margin-right: 0;
+		}
+	}
+}