diff --git a/templates/500.html b/templates/500.html
index 4a535ba914f7f70bffafe9af1f67ea82f33b7784..fca0c69954a0c660d60d987a7925a0ee33ae2875 100644
--- a/templates/500.html
+++ b/templates/500.html
@@ -5,7 +5,7 @@
 		<span class="panel-title">Interner Fehler</span>
 	</div>
 	<div class="row panel-body">
-		<div class="col-xs-12">
+		<div class="col-12">
 			<p>Es ist ein interner Fehler aufgetreten. Eventuell betrifft dieser nur einen Teil der Seite oder er tritt nur vorübergehend auf. Versuche es doch einfach in ein paar Minuten noch einmal.</p>
 			{% if online %}
 			<p>Wir haben das Problem registriert und werden uns schnellst möglich darum kümmern.</p>
diff --git a/templates/course.html b/templates/course.html
index 61429d0bdff883b332793fe38107fe03cd7f7475..d8cbfa0aee3e5f54cef936ef4cdf54fefbda4bbc 100644
--- a/templates/course.html
+++ b/templates/course.html
@@ -113,15 +113,15 @@
 	<div class="modal-dialog" role="document">
 		<div class="modal-content">
 			<div class="modal-header">
+				<span class="modal-title">Zugriffsrechte</span>
 				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-				<h4 class="modal-title">Zugriffsrechte</h4>
 			</div>
 			<div class="modal-body">
 				<div class="row" style="padding-left: 10px; padding-right: 10px;" data-id="-1" data-type="-1" id="editpermdiv">
 					<span>Es existieren folgende Zugriffsrechte:</span>
-					<select onchange="moderator.permissioneditor.selectpermission(this)" size="6" class="col-xs-12" id="permissionlist">
+					<select onchange="moderator.permissioneditor.selectpermission(this)" size="6" class="col-12" id="permissionlist">
 					</select>
-					<select class="col-xs-12 authtype" onchange="moderator.permissioneditor.typechange(this)">
+					<select class="col-12 authtype" onchange="moderator.permissioneditor.typechange(this)">
 						<option value="public">Öffentlich</option>
 						<option selected value="password">Passwort</option>
 						<option value="rwth">RWTH intern</option>
@@ -129,15 +129,15 @@
 						<option value="l2p">L2P Lernraum</option>
 						<option value="none">Kein Zugriff</option>
 					</select>
-					<input class="col-xs-12 passwordinput authuser" type="text" placeholder="Benutzername">
-					<input class="col-xs-10 passwordinput authpassword" type="text" placeholder="Passwort">
-					<button class="col-xs-2 passwordinput authpgen" type="button" onclick="$('.authpassword',this.parentNode).val(moderator.permissioneditor.randompw());"><span class="fa fa-refresh" aria-hidden="true"></span></button>
+					<input class="col-12 passwordinput authuser" type="text" placeholder="Benutzername">
+					<input class="col-10 passwordinput authpassword" type="text" placeholder="Passwort">
+					<button class="col-2 passwordinput authpgen" type="button" onclick="$('.authpassword',this.parentNode).val(moderator.permissioneditor.randompw());"><span class="fa fa-refresh" aria-hidden="true"></span></button>
 
-					<input class="col-xs-12 authl2p" type="text" placeholder="Lernraum" style="display: none;">
+					<input class="col-12 authl2p" type="text" placeholder="Lernraum" style="display: none;">
 
-					<button class="col-xs-4" onclick="moderator.permissioneditor.addbtnclick(this)">Add</button>
-					<button class="col-xs-4" onclick="moderator.permissioneditor.updatebtnclick(this)">Update</button>
-					<button class="col-xs-4" onclick="moderator.permissioneditor.delbtnclick(this)">Delete</button>
+					<button class="col-4" onclick="moderator.permissioneditor.addbtnclick(this)">Add</button>
+					<button class="col-4" onclick="moderator.permissioneditor.updatebtnclick(this)">Update</button>
+					<button class="col-4" onclick="moderator.permissioneditor.delbtnclick(this)">Delete</button>
 
 
 				</div>
diff --git a/templates/cutprogress.html b/templates/cutprogress.html
index 7c524b6dc3f6ede5c772f4d45dc4cfcf60c72a35..ac76af7701a38ffb5a209bc973ba3e332a326ead 100644
--- a/templates/cutprogress.html
+++ b/templates/cutprogress.html
@@ -33,9 +33,9 @@
 							<span style="color: red" aria-hidden="true" class="fa fa-times"></span>
 							{% else %}
 								{% if l.videos|selectattr('visible')|list|count == 0 %}
-									<span style="color: orange" aria-hidden="true" class="glyphicon glyphicon-ok"></span>
+									<span style="color: orange" aria-hidden="true" class="fa fa-ok"></span>
 								{% else %}
-									<span style="color: green" aria-hidden="true" class="glyphicon glyphicon-ok"></span>
+									<span style="color: green" aria-hidden="true" class="fa fa-ok"></span>
 								{% endif %}
 							{% endif %}
 						{% else %}
diff --git a/templates/index.html b/templates/index.html
index 0c86f63653357e4953d4340c2836ca84753cf6b0..410e1adf7dd716c4c6177e8aef85369527c304ef 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -48,8 +48,8 @@
 {% block content %}
 <div class="row">
 {% if ismod() %}
-	<div class="col-xs-12 col-md-12">
-		<ul class="col-xs-12 list-inline float-right">
+	<div class="col-12">
+		<ul class="list-inline float-right">
 			<li class="list-inline-item">
 				<div class="btn-group">
 					<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Neues Panel </button>
@@ -67,7 +67,7 @@
 		</ul>
 	</div>
 {% endif %}
-	<div class="col-md-6 p-0">
+	<div class="col-md-6 col-12 p-0">
 		{% for item in featured %}
 		<div class="card m-1">
 			<div class="card-header">
@@ -94,7 +94,7 @@
 		</div>
 		{% endfor %}
 	</div>
-	<div class="col-md-6 p-0">
+	<div class="col-md-6 col-12 p-0">
 		<div class="card m-1">
 			<div class="card-header">
 				<span class="card-title">Nächste Aufnahmen</span>
diff --git a/templates/jobs_overview.html b/templates/jobs_overview.html
index b75816b259c371b2efafe914f9b4cb3c8639a9c1..c7c0089481f852a961cb58a9362855606edc4732 100644
--- a/templates/jobs_overview.html
+++ b/templates/jobs_overview.html
@@ -13,9 +13,9 @@
 				</div>
 				<div class="modal-body">
 					<ul class="nav nav-tabs" role="tablist">
-						<li role="presentation" class="active"><a href="#add_thumbnail" aria-controls="thumbnail" role="tab" data-toggle="tab">Thumbnail</a></li>
-						<li role="presentation"><a href="#add_remux" aria-controls="remux" role="tab" data-toggle="tab">Remux</a></li>
-						<li role="presentation"><a href="#add_reencode" aria-controls="remux" role="tab" data-toggle="tab">Reencode</a></li>
+						<li role="presentation" class="nav-item"><a href="#add_thumbnail" class="nav-link" aria-controls="thumbnail" role="tab" data-toggle="tab">Thumbnail</a></li>
+						<li role="presentation" class="nav-item"><a href="#add_remux" class="nav-link" aria-controls="remux" role="tab" data-toggle="tab">Remux</a></li>
+						<li role="presentation" class="nav-item"><a href="#add_reencode" class="nav-link" aria-controls="remux" role="tab" data-toggle="tab">Reencode</a></li>
 					</ul>
 					<div class="tab-content" style="margin-top: 10px;">
 						<div role="tabcard" class="tab-pane active" id="add_thumbnail">
@@ -93,14 +93,14 @@
 	<div class="card-header">
 		<span class="card-title">
 			Jobs
-			<a class="btn btn-light" href="javascript:$('#modal_addjob').modal()" >Job(s) erzeugen</a>
-			<a class="btn btn-light" href="{{url_for('jobs_action', action='clear_failed', ref=request.url)}}" >Alle fehlgeschlagenen Jobs löschen</a>
-			<a class="btn btn-light" href="{{url_for('jobs_action', action='retry_failed', ref=request.url)}}" >Alle fehlgeschlagenen Jobs neustarten</a>
+			<a class="btn btn-secondary" href="javascript:$('#modal_addjob').modal()" >Job(s) erzeugen</a>
+			<a class="btn btn-secondary" href="{{url_for('jobs_action', action='clear_failed', ref=request.url)}}" >Alle fehlgeschlagenen Jobs löschen</a>
+			<a class="btn btn-secondary" href="{{url_for('jobs_action', action='retry_failed', ref=request.url)}}" >Alle fehlgeschlagenen Jobs neustarten</a>
 		</span>
 	</div>
 	<div class="card-body">
 		<div>
-			<form>
+			<form class="row">
 				<div class="form-group col-xs-12 col-lg-4">
 					<label for="type">Type</label>
 					<input list="job_type" name="type" value="{{ filter.type }}">
@@ -128,7 +128,7 @@
 						{% endfor %}
 					</datalist>
 				</div>
-				<div class="col-xs-12">
+				<div class="col-12">
 					<button type="submit" class="btn btn-primary">Filter</button>
 					<ul class="pagination float-right">
 						<li class="page-item">
@@ -201,31 +201,31 @@
 							<ul class="list-inline" style="white-space: nowrap;">
 							{% if i.state == "failed" %}
 								<li class="list-inline-item">
-									<a class="btn btn-light" href="{{url_for('jobs_action', action='retry_failed', jobid=i.id, ref=request.url)}}" title="Neustarten">
+									<a class="btn btn-secondary" href="{{url_for('jobs_action', action='retry_failed', jobid=i.id, ref=request.url)}}" title="Neustarten">
 										<span class="fa fa-refresh" aria-hidden="true"></span>
 									</a>
 								</li>
 								<li class="list-inline-item">
-									<a class="btn btn-light" href="{{url_for('jobs_action', action='clear_failed', jobid=i.id, ref=request.url)}}" title="Löschen" style="background-color: red;">
-										<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
+									<a class="btn btn-secondary" href="{{url_for('jobs_action', action='clear_failed', jobid=i.id, ref=request.url)}}" title="Löschen" style="background-color: red;">
+										<span class="fa fa-trash" aria-hidden="true"></span>
 									</a>
 								</li>
 							{% else %}
 								<li class="list-inline-item">
-									<a class="btn btn-light" href="{{url_for('jobs_action', action='copy', jobid=i.id, ref=request.url)}}" title="Kopie neu einreihen">
+									<a class="btn btn-secondary" href="{{url_for('jobs_action', action='copy', jobid=i.id, ref=request.url)}}" title="Kopie neu einreihen">
 										<span class="fa fa-refresh" aria-hidden="true"></span>
 									</a>
 								</li>
 								{% if i.state in ["failed", "ready"] %}
 									<li class="list-inline-item">
-										<a class="btn btn-light" href="{{url_for('jobs_action', action='delete', jobid=i.id, ref=request.url)}}" title="Löschen" style="background-color: red;">
-											<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
+										<a class="btn btn-secondary" href="{{url_for('jobs_action', action='delete', jobid=i.id, ref=request.url)}}" title="Löschen" style="background-color: red;">
+											<span class="fa fa-trash" aria-hidden="true"></span>
 										</a>
 									</li>
 								{% elif i.state == "running" %}
 									<li class="list-inline-item">
-										<a class="btn btn-light" {% if i.canceled %}disabled="disabled"{% endif %} href="{{url_for('jobs_action', action='cancel', jobid=i.id, ref=request.url)}}" title="Abbrechen" style="background-color: red;">
-											<span class="glyphicon glyphicon-stop" aria-hidden="true"></span>
+										<a class="btn btn-secondary" {% if i.canceled %}disabled="disabled"{% endif %} href="{{url_for('jobs_action', action='cancel', jobid=i.id, ref=request.url)}}" title="Abbrechen" style="background-color: red;">
+											<span class="fa fa-stop" aria-hidden="true"></span>
 										</a>
 									</li>
 								{% endif %}
diff --git a/templates/search.html b/templates/search.html
index 7eeb1e2bc2b1aa054e7774ca49e7139a36c54483..5aa0b473b07490ef8c4b555a0c43c84588e8ef9d 100644
--- a/templates/search.html
+++ b/templates/search.html
@@ -2,12 +2,12 @@
 {% from 'macros.html' import preview %}
 {% extends "base.html" %}
 {% block content %}
-<div class="panel panel-default">
-	<div class="panel-heading">
-		<span class="panel-title">Veranstaltungen</span>
+<div class="card m-1">
+	<div class="card-header">
+		<span class="card-title">Veranstaltungen</span>
 	</div>
 		{% if courses == [] %}
-			<div class="panel-body">Nichts gefunden!</div>
+			<div class="card-body">Nichts gefunden!</div>
 		{% else %}
 			<ul class="list-group courselist">
 				{% for course in courses %}
@@ -16,12 +16,12 @@
 			</ul>
 		{% endif %}
 </div>
-<div class="panel panel-default">
-	<div class="panel-heading">
-		<span class="panel-title">Videos</span>
+<div class="card m-1">
+	<div class="card-header">
+		<span class="card-title">Videos</span>
 	</div>
 	{% if lectures == [] %}
-		<div class="panel-body">Nichts gefunden!</div>
+		<div class="card-body">Nichts gefunden!</div>
 	{% else %}
 		<ul class="list-group videopreview">
 		{% for lecture in lectures %}
diff --git a/templates/stats.html b/templates/stats.html
index 1c31508dfdbc25513128cf659bef8e67d1a19441..26e97d7e34ad9ebd2bb3ca722390ed772999f516 100644
--- a/templates/stats.html
+++ b/templates/stats.html
@@ -31,11 +31,11 @@
 			<span class="card-title"><a name="semesterstats"></a>Semester <select id="semesterselect" name="semester"><option value="">alle</option></select></span>
 		</div>
 		<div class="card-body" >
-			<div class=col-xs-12">
+			<div class=col-12">
 				<p class="text-center">Zuschauer pro Veranstaltung</p>
 				<div class="plot-view" data-url="{{url_for('stats_viewsperday', req="courses", filter=filter)}}"></div>
 			</div>
-			<div class=col-xs-12">
+			<div class=col-12">
 				<p class="text-center">Zuschauer pro Format</p>
 				<div class="plot-view" data-url="{{url_for('stats_viewsperday', req="global", filter=filter)}}"></div>
 			</div>