diff --git a/mod/lesson/renderer.php b/mod/lesson/renderer.php
index cd40e78e26e65..212fcb80cdfcf 100644
--- a/mod/lesson/renderer.php
+++ b/mod/lesson/renderer.php
@@ -505,10 +505,14 @@ public function progress_bar(lesson $lesson, $progress = null) {
             $progress = $lesson->calculate_progress();
         }
 
-        // print out the Progress Bar.  Attempted to put as much as possible in the style sheets.
-        $content = '<br />' . html_writer::tag('div', $progress . '%', array('class' => 'progress_bar_completed', 'style' => 'width: '. $progress . '%;'));
-        $printprogress = html_writer::tag('div', get_string('progresscompleted', 'lesson', $progress) . $content, array('class' => 'progress_bar'));
-
+        $content = html_writer::start_tag('div');
+        $content .= html_writer::start_tag('div', array('class' => 'progress'));
+        $content .= html_writer::start_tag('div', array('class' => 'progress-bar bar', 'role' => 'progressbar',
+            'style' => 'width: ' . $progress .'%', 'aria-valuenow' => $progress, 'aria-valuemin' => 0, 'aria-valuemax' => 100));
+        $content .= $progress . "%";
+        $content .= html_writer::end_tag('div');
+        $content .= html_writer::end_tag('div');
+        $printprogress = html_writer::tag('div', get_string('progresscompleted', 'lesson', $progress) . $content);
         return $this->output->box($printprogress, 'progress_bar');
     }
 
diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss
index 984a6fb48f05d..ed7856e3b843d 100644
--- a/theme/boost/scss/moodle/modules.scss
+++ b/theme/boost/scss/moodle/modules.scss
@@ -240,6 +240,15 @@ div#dock {
 #page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
     white-space: normal;
 }
+#page-mod-lesson-view {
+    .vertical .singlebutton {
+        display: block;
+        + .singlebutton {
+            margin-left: 0;
+            margin-top: 1rem;
+        }
+    }
+}
 .path-mod-lesson .generaltable td {
     vertical-align: middle;
     label {
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 324b93086cbc2..75d8bfaff8e4f 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -15414,6 +15414,12 @@ div#dock {
 #page-mod-lesson-view .branchbuttoncontainer .singlebutton button[type="submit"] {
   white-space: normal; }
 
+#page-mod-lesson-view .vertical .singlebutton {
+  display: block; }
+  #page-mod-lesson-view .vertical .singlebutton + .singlebutton {
+    margin-left: 0;
+    margin-top: 1rem; }
+
 .path-mod-lesson .generaltable td {
   vertical-align: middle; }
   .path-mod-lesson .generaltable td label {