title: Need to increase b-modal width. VueJS.Bootsrap
body: <p>I use bootstrap v4 for VueJS and I need to increase b-modal. 
  I tried different ways mentioned here : <a href="https://github.com/bootstrap-vue/bootstrap-vue/issues/632" rel="noreferrer">https://github.com/bootstrap-vue/bootstrap-vue/issues/632</a> but nothing didn't help.
  In general my code looks like :</p>
  
  <pre><code>&lt;b-modal :ref="fieldName" :id="fieldName" :title="msg" size="lg" modal-class="b-modal"&gt;
      &lt;div class="script_table_container" v-if="scripts.length &gt; 0"&gt;
        &lt;b-table :items="scripts" per-page="10" :current-page="currentPage"&gt;
          &lt;template slot="propertySnippet" slot-scope="data"&gt;
            &lt;samp&gt;
              {{data.value}}
            &lt;/samp&gt;
          &lt;/template&gt;
        &lt;/b-table&gt;
        &lt;b-pagination :total-rows="scripts.length" per-page="10" v-model="currentPage" hide-goto-end-buttons align="right"/&gt;
      &lt;/div&gt;
  
      &lt;div slot="modal-footer"&gt;
        &lt;b-btn class="mr-sm-2 su-btn-link" @click="close"&gt;Close&lt;/b-btn&gt;
      &lt;/div&gt;
    &lt;/b-modal&gt;
  </code></pre>
  
  <p>I need to increase width up to 80-90 % of the screen cause some values inside the table are long.</p>
  
  <p>Hope for your help guys. I believe you're gurus. </p>
  
  <p>P.S. The answer has been found . 
  To apply changes for a certain b-modals you can follow the next step :</p>
  
  <p>I created globally: </p>
  
  <pre><code>@media (min-width: 992px) { 
     .modal .modal-huge { 
        max-width: 90% !important;
        width: 90% !important;;
      }
   }
  </code></pre>
  
  <p>and after that I placed 'huge' into size prop of b-modal. "Huge" is used because the class ends with "huge" word. </p>