How to Customize Style of Bootstrap $Modal

Is it possible to customize style of bootstrap $modal

If you have access to HTML, Then you can add an extra class to the modal like <div class="modal custom"> then you can style it like .modal.custom. Full example below

Working Demo

HTML

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
  Variable Modal
</button>

<!-- Modal -->
<div class="modal custom fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
   ....

CSS

.modal.custom .modal-dialog {
    width:50%;
    margin:0 auto;
    /*add what you want here*/
}

Let me know if you have further issues in the comments.

How do I properly add custom CSS to a Bootstrap Modal

The modal loads, and then the whole screen gets a opaque black film over it, and the Modal becomes un-useable.

You are missing 2 div <div class="modal-dialog"> and <div class='modal-content'>

without <div class="modal-dialog"> and <div class='modal-content'>

Fiddle

and with

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#templates_modal">Open Modal</button>
<div id='templates_modal' class='template modal'>
<div class="modal-dialog">
    <div class='modal-content'>
    <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>×</span>
        </button>
         <h1 class='dialog-title'>{{TITLE_H1}}</h1>

    </div>
    <p style='display: none; color: red; font-weight: bold;' id='templates_warning'>{{DOCTYPE_ALERT}}</p>
    <p style='display: none; color: red; font-weight: bold;' id='templates_warning'>{{CONTENT_ERROR}}</p>
    <p style='display: none; color: red; font-weight: bold; padding: 10px;' id='templates_error'>{{NO_FILE_OPEN_ERROR}}</p>
    <div class='modal-body'>
         <h4>{{LANGUAGE_SELECTION}}</h4>

        <p>{{LANGUAGE_DESCRIPTION}}</p>
        <select id='languages'>
            <option value=''>{{SELECT_LABEL}}</option>
            <option value='english'>en</option>
            <option value='german'>de</option>
            <option value='spanish'>es</option>
            <option value='french'>fr</option>
            <option value='italian'>it</option>
            <option value='chinese'>zh-cn</option>
        </select>
         <h4>{{CHARSET_SELECTION}}</h4>

        <p>{{CHARSET_DESCRIPTION}}</p>
        <select id="charset">
            <option value=''>{{SELECT_LABEL}}</option>
            <option value='utf8'>UTF-8</option>
            <option value='utf16'>UTF-16</option>
        </select>
         <h4>{{TITLE_H4}}</h4>

        <select id="doctype">
            <option value=''>{{SELECT_LABEL}}</option>
            <option value='html5'>HTML5</option>
            <option value='html4loose'>HTML4 Transitional</option>
            <option value='html4strict'>HTML4 Strict</option>
            <option value='xhtml1loose'>XHTML 1 Trasitional</option>
            <option value='xhtml1strict'>XHTML 1 Strict</option>
            <option value='xhtml11'>XHTML 1.1</option>
        </select>
         <h4>{{SECTION_TEMPLATES}}</h4>

        <p>{{SECTION_TEMPLATES_DESC}}</p>
        <ul class="checkbox-grid" id="libraries">
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>' id="angularjs" value="angularjs" />
                <label for="angularjs">Angular JS | 1.3.15</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.js"></script>' id="angularmaterial" value="angularmaterial" />
                <label for="angularmaterial">Angular Material | 0.10.0</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>' id="dojo" value="dojo" />
                <label for="dojo">Dojo | 1.10.4</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>' id="extcore" value="extcore" />
                <label for="extcore">Ext Core | 3.1.0</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>' id="jquery111" value="jquery111" />
                <label for="jquery111">jQuery | 1.11.3</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>' id="jquery214" value="jquery214" />
                <label for="jquery214">jQuery | 2.1.4</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>' id="jquerymobile" value="jquerymobile" />
                <label for="jquerymobile">jQuery Mobile | 1.4.5</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>' id="jqueryui" value="jqueryui" />
                <label for="jqueryui">jQUery UI | 1.11.4</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script>' id="mootools" value="mootools" />
                <label for="mootools">MooTools | 1.5.1</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>' id="prototype" value="prototype" />
                <label for="prototype">Prototype | 1.7.2.0</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>' id="script_aculo_us" value="script_aculo_us" />
                <label for="script_aculo_us">script.aculo.us | 1.9.0 (Requires Prototype)</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/spf/2.2.0/spf.js"></script>' id="spf" value="spf" />
                <label for="spf">SPF | 2.2.0</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>' id="swfobject" value="swfobject" />
                <label for="swfobject">SWFObject | 2.2</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js"></script>' id="threejs" value="threejs" />
                <label for="threejs">three.js | r69</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>' id="webfontloader" value="webfontloader" />
                <label for="webfontloader">Web Font Loader | 1.5.18</label>
            </li>
        </ul>
        <div class='modal-footer'> <a id='templates_modalGenBtn generate_html_btn' href='#' class='dialog-button btn btn-danger'>{{GENERATE_BUTTON}}</a>
 <a id='templates_modalBtn' href='#' class='dialog-button btn btn-danger' data-dismiss='modal'>{{CANCEL_BUTTON}}</a>
        </div>
     </div>
     </div>
    </div>
</div>

Fiddle

Use bootstrap predefined classes to style and grid system to format the form inside modal

Fiddle

And you can add custom css as like you are doing inline style <p style='display: none; color: red; font-weight: bold;' id='templates_warning'>{{DOCTYPE_ALERT}}</p> or put custom selectors and add those in style sheet, preferable is adding custom selector because later you can adjust modal content according to screen size with media queries.

e.g

<p class="nodisplay" id='templates_warning'>{{DOCTYPE_ALERT}}</p>

and in style sheet

.nodisplay {
    display: none;
    color: red;
    font-weight: bold;
}

Fiddle

Change the Bootstrap Modal effect

If you take a look at the bootstraps fade class used with the modal window you will find, that all it does, is to set the opacity value to 0 and adds a transition for the opacity rule.

Whenever you launch a modal the in class is added and will change the opacity to a value of 1.

Knowing that you can easily build your own fade-scale class.

Here is an example.

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
.fade-scale {  transform: scale(0);  opacity: 0;  -webkit-transition: all .25s linear;  -o-transition: all .25s linear;  transition: all .25s linear;}
.fade-scale.in {  opacity: 1;  transform: scale(1);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal --><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">  Launch demo modal</button>
<!-- Modal --><div class="modal fade-scale" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">  <div class="modal-dialog" role="document">    <div class="modal-content">      <div class="modal-header">        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>        <h4 class="modal-title" id="myModalLabel">Modal title</h4>      </div>      <div class="modal-body">        ...      </div>      <div class="modal-footer">        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>        <button type="button" class="btn btn-primary">Save changes</button>      </div>    </div>  </div></div>

How to overwrite the vue-bootstrap styles in b-modal

You're probably using a scoped style tag in your .vue file.
If you are, then you need to use a deep-selector to properly target the subcomponent.

The selectors are /deep/, >>> or ::v-deep.
In the below example i use /deep/, but the others should work for you as well.

You can also use the header-class prop on b-modal to directly add the class to the header if you wish.

<template>
  <b-modal header-class="my-class">
    <template #modal-header>Header</template>
    Hello
  </b-modal>

  <b-modal modal-class="my-second-class">
    <template #modal-header>Header</template>
    Hello
  </b-modal>
</template>

<style scoped>
/deep/ .my-class {
  background: black;
  color: white;
}

/deep/ .my-second-class > .modal-dialog > .modal-content > .modal-header {
  background: black;
  color: white;
}
</style>

How to increase Bootstrap Modal Width?

In your code, for the modal-dialog div, add another class, modal-lg:

<div class="modal-dialog modal-lg">

Or if you wanna centre your modal dialog, use:

.modal-ku {
  width: 750px;
  margin: auto;
}

Modal width (increase)

Bootstrap 3

You can create or just override default bootstrap modal-lgby doing below:

.modal-lg {
    max-width: 80%;
}

If not working just add !important so it would look like below

.modal-lg {
    max-width: 80% !important;
}

Now call the modal-lg.

<div class="modal-dialog modal-lg" role="document">
 <!-- some modal content --->
</div

For Bootstrap 4 refer to @kitsu.eb answer. Also note that using bootstrap 4 utilities might break the responsiveness.

---

Related Topics