bootstrap adapt for activity vue socialIssues component

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc.vue

@@ -1,9 +1,9 @@
 <template>
    <teleport to="#social-issues-acc">
       
-      <div class="container">
-         <div class="col-4 clear">
-            <label>{{ $t('activity.social_issues') }}</label>
+      <div class="mb-3 row">
+         <div class="col-4">
+            <label class="col-form-label">{{ $t('activity.social_issues') }}</label>
          </div>
          <div class="col-8">
             
@@ -41,9 +41,9 @@
          </div>
       </div>
 
-      <div class="container">
-         <div class="col-4 clear">
-            <label>{{ $t('activity.social_actions') }}</label>
+      <div class="mb-3 row">
+         <div class="col-4">
+            <label class="col-form-label">{{ $t('activity.social_actions') }}</label>
          </div>
          <div class="col-8">
             

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialAction.vue

@@ -1,18 +1,20 @@
 <template>
    <span class="inline-choice">
-      
-      <input 
-         type="checkbox" 
-         v-model="selected"
-         name="action"
-         v-bind:id="action.id" 
-         v-bind:value="action"
-         />
-      <label class="inline" v-bind:for="action.id">
-         {{ action.text }}
-      </label>
-      
-   </span><br>
+      <div class="form-check">
+   
+         <input class="form-check-input"
+            type="checkbox" 
+            v-model="selected"
+            name="action"
+            v-bind:id="action.id" 
+            v-bind:value="action"
+            />
+         <label class="form-check-label" v-bind:for="action.id">
+            {{ action.text }}
+         </label>
+         
+      </div>
+   </span>
 </template>
 
 <script>

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/SocialIssuesAcc/CheckSocialIssue.vue

@@ -1,18 +1,20 @@
 <template>
    <span class="inline-choice">
+      <div class="form-check">
       
-      <input 
-         type="checkbox" 
-         v-model="selected"
-         name="issue"
-         v-bind:id="issue.id" 
-         v-bind:value="issue"
-         />
-      <label class="inline" v-bind:for="issue.id">
-         {{ issue.text }}
-      </label>
-      
-   </span><br>
+         <input class="form-check-input"
+            type="checkbox" 
+            v-model="selected"
+            name="issue"
+            v-bind:id="issue.id" 
+            v-bind:value="issue"
+            />
+         <label class="form-check-label" v-bind:for="issue.id">
+            {{ issue.text }}
+         </label>
+         
+      </div>
+   </span>
 </template>
 
 <script>