How to make the bootstrap modal width dynamic to its content

How to set/make the bootstrap modal width dynamic to its content

display:inline-block elements get dynamic width regarding their content

Add the following css to your page

.modal-dialog { 
max-width: 100%; 
width: auto !important; 
display: inline-block; 
}

Now add the following code to open the modal in center

.modal{
     text-align: center;
}