Use Only Bootstrap’s Modal component Not All The Whole Framework

Bootstrap comes with 13 components and some other helpers. I use the modal component most. Some times I just want to use just the modal not the others. So I am going show how you can use only the modal without using the whole Framework. First go to http://getbootstrap.com/2.3.2/customize.html. You can use the same technique for Bootstrap version 3.

First Select following checkbox – Buttons(Base CSS), Modals(JS Components), Close icon, Component animations(miscellaneous)

Then select jQuery plugins – Transitions, Modals, Buttons

Then change top: -25%; to top: -125%;

.modal.fade {
  -webkit-transition: opacity .3s linear, top .3s ease-out;
  -moz-transition: opacity .3s linear, top .3s ease-out;
  -o-transition: opacity .3s linear, top .3s ease-out;
  transition: opacity .3s linear, top .3s ease-out;
  top: -125%;
}

To customise the css in modal content use the following css

.modal h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 10px 0;
  font-family: inherit;
  font-weight: bold;
  line-height: 1;
  color: inherit;
  text-rendering: optimizelegibility;
}

.modal label,
input,
button,
select,
textarea {
  font-size: 12px;
  font-weight: normal;
  line-height: 18px;
}

.modal p {
margin: 0 0 10px;
}

About Zakir Hyder

This entry was written by .

28. November 2013 by Zakir Hyder
Categories: CSS, Web Development | Tags: , , , , , , , , , | Comments

Comments

  1. […] Bootstrap comes with 13 components and some other helpers. I use the modal component most. Some times I just want to use just the modal not the others. So I am going show how you can use only the modal…  […]