[Bootstrap v5] Replace jumbotron with utility classes

Author: rosier

assets/styles/app.scss

@@ -102,10 +102,6 @@ form legend {
 
 /* Utilities
    ------------------------------------------------------------------------- */
-.jumbotron {
-  padding: 1.5rem 1rem
-}
-
 .well {
   background-color: var(--secondary-color);
   border: 1px solid transparent;
@@ -410,26 +406,6 @@ body#homepage .page-header a.language-selector-dropdown-button .current-language
   display: inline-flex;
   margin-inline: 5px 10px;
 }
-body#homepage .jumbotron {
-  background: var(--secondary-color);
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: center;
-  padding: 45px 15px;
-}
-body#homepage .jumbotron .btn {
-  font-size: 19px;
-  line-height: 1.33333;
-  padding: 18px 27px;
-  border-radius: 6px;
-  margin-top: 20px;
-}
-body#homepage .jumbotron P {
-  margin-bottom: 0;
-  font-size: 23px;
-  font-weight: 400
-}
 
 /* Page: 'Login'
    ------------------------------------------------------------------------- */

templates/admin/blog/show.html.twig

@@ -10,7 +10,7 @@
         <span class="metadata"><twig:ux:icon name="tabler:user"/> {{ post.author.fullName }}</span>
     </p>
 
-    <div class="jumbotron">
+    <div class="bg-body-tertiary mb-3 p-3 rounded">
         <p class="mb-0"><strong>{{ 'label.summary'|trans }}</strong>: {{ post.summary }}</p>
     </div>
 

templates/blog/index.html.twig

@@ -6,7 +6,7 @@
     {% for post in paginator.results %}
         {{ include('blog/_post.html.twig') }}
     {% else %}
-        <div class="jumbotron">{{ 'post.no_posts_found'|trans }}</div>
+        <div class="bg-body-tertiary mb-3 p-3 rounded">{{ 'post.no_posts_found'|trans }}</div>
     {% endfor %}
 
     {% if paginator.hasToPaginate %}

templates/default/homepage.html.twig

@@ -19,11 +19,11 @@
 
     <div class="row">
         <div class="col-sm">
-            <div class="jumbotron">
-                <p>
+            <div class="bg-body-tertiary px-3 py-5 rounded-3">
+                <p class="fs-4">
                     {{ 'help.browse_app'|trans|raw }}
                 </p>
-                <p>
+                <p class="mb-0">
                     <a class="btn btn-primary btn-lg" href="{{ path('blog_index') }}">
                         <twig:ux:icon name="tabler:users-group" font-size="21px" /> {{ 'action.browse_app'|trans }}
                     </a>
@@ -32,11 +32,11 @@
         </div>
 
         <div class="col-sm">
-            <div class="jumbotron">
-                <p>
+            <div class="bg-body-tertiary px-3 py-5 rounded-3">
+                <p class="fs-4">
                     {{ 'help.browse_admin'|trans|raw }}
                 </p>
-                <p>
+                <p class="mb-0">
                     <a class="btn btn-primary btn-lg" href="{{ path('admin_index') }}">
                         <twig:ux:icon name="tabler:lock"/> {{ 'action.browse_admin'|trans }}
                     </a>