Bootstrap 3 modal style


If you have used bootstrap then you have certainly used it's modal. It's very useful if we want to display a notification or form, and we do not want to load a page with too much content. In this tutorial, I'll show you several classes of modal with which you can easily change style of modal.

  • modal-content - is the class in which the entire modal is located, you can specify there border-radius, background-color, box-shadow of a modala
  • modal-header - is the class in where is the healine and close button of the modal, you can specifiy there background-color, box-shadow, border, padding etc
  • modal-title - is the title that is in the modal-header class, here you can change font, position of the text, set the font color etc
  • modal-body - is the place where you can find the content of the model you enter what you needed
  • modal-footer - is the bottom of the modal where are the buttons, most usual button is for closing the modal

You can see one example below.