• Align a Bootstrap modal to center
• Content shift horizontally then opening Bootstrap modal

Align a Bootstrap dropdown to Center

Bootstrap have builtin classes for aligning a dropdown either left or right, however often we want the dropdown to be centered relative to the trigger element.

To align the dropdown right we would set the following classes on the dropdown container :

divMyDropdown.className = "dropdown-menu dropdown-menu-right";

, which would result in the following alignment :

However to align the dropdown to the center like this :

, we can create the following css class :

.dropdown-menu-center {
   right: auto !important;
   left: 50% !important;
   -webkit-transform: translate(-50%, 0) !important;
   -o-transform: translate(-50%, 0) !important;
   transform: translate(-50%, 0) !important;
   top: 100%!important;
}

and then apply the class like this :

divMyDropdown.className = "dropdown-menu dropdown-menu-center";

Content shift horizontally then opening Bootstrap modal

Typically this happens then a page has a vertical scrollbar and a Bootstrap modal is opened as it will remove the vertical scrollbar.

If you have no fixed elements, eg. a fixed header, then the following very simple solution is enough :

.modal-open { /* this class is set on the body */
    padding-right: 17px !important;
}

However, if you do have fixed elements, typically a fixed header or a fixed footer, the above solution will make the fixed elements shift to the right as the fixed element is positioned against the viewport NOT the body.

The ultimate solution is this :

.modal-open {
 position: fixed;
 overflow: scroll;
 width: 100%;
 padding-right: 0!important;
}