https://github.com/binlabs/twbs-contextual-modals

The Contextual Modals LESS mix-in for Twitter Bootstrap 3 allow you to use the five contextual styles that you're used to having available for alerts, button, and labels to style your modals.
https://github.com/binlabs/twbs-contextual-modals

Last synced: about 1 year ago
JSON representation

The Contextual Modals LESS mix-in for Twitter Bootstrap 3 allow you to use the five contextual styles that you're used to having available for alerts, button, and labels to style your modals.

• Host: GitHub
• URL: https://github.com/binlabs/twbs-contextual-modals
• Owner: binlabs
• Created: 2013-09-13T16:15:09.000Z (almost 13 years ago)
• Default Branch: master
• Last Pushed: 2013-09-15T20:13:33.000Z (almost 13 years ago)
• Last Synced: 2023-10-24T00:30:06.577Z (over 2 years ago)
• Language: CSS
• Homepage:
• Size: 469 KB
• Stars: 4
• Watchers: 5
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
twbs-contextual-modals

=====================

The Contextual Modals LESS mix-in for [Twitter Bootstrap 3](https://github.com/twbs/bootstrap) allow you to use the five contextual styles that you're used to having available for alerts, button, and labels to style your modals.

## Examples

In addition to the screenshots below, you can view the contextual modal styles by cloning this repository and opening index.html from the examples directory in your browser.

### Screenshots

The following images are screenshots of the actual modal styles from the examples file.

#### Default

![A modal using the .modal-default class](https://raw.github.com/binlabs/twbs-contextual-modals/master/examples/screenshots/modal-default.jpg)

#### Primary

![A modal using the .modal-primary class](https://raw.github.com/binlabs/twbs-contextual-modals/master/examples/screenshots/modal-primary.jpg)

#### Danger

![A modal using the .modal-danger class](https://raw.github.com/binlabs/twbs-contextual-modals/master/examples/screenshots/modal-danger.jpg)

#### Warning

![A modal using the .modal-warning class](https://raw.github.com/binlabs/twbs-contextual-modals/master/examples/screenshots/modal-warning.jpg)

#### Info

![A modal using the .modal-info class](https://raw.github.com/binlabs/twbs-contextual-modals/master/examples/screenshots/modal-info.jpg)

## Installation

There are two ways to install the contextual modal styles for Twitter Bootstrap 3. The first method uses the LESS mix-in, and the second simply uses the CSS file.

### LESS

Installing the Contextual Modal styles using the LESS mix-in makes it easier to customize to fit your theme's color scheme.

1. Download twbs-contextual-modals.

2. Move bootstrap-contextual-modal.less to your LESS directory.

3. Copy and paste the contents of mixins.less to your own mixins.less file.

4. Copy and paste the contents of variables.less to your own variables.less file, preferably near the existing lines of modal variables.

5. Compile your theme.

6. Initiate a modal using the .modal class and the class of the contextual style you want to use, such as .modal-danger.

### CSS

To install the contextual modal styles using just CSS, follow the instructions below.

1. Download twbs-contextual-modals.

2. Move bootstrap-contextual-modal.css to your CSS directory or copy the styles and paste them in to your theme's stylesheet.

3. Initiate a modal using the .modal class and the class of the contextual style you want to use, such as .modal-danger.