Introducing Bootstrap Adapter.

Need reasons to love Bootstrap Adapter?

Why we need an adapter to fit old syntax?

Some system has written in Bootstrap2 (example: Joomla CMS), but when Bootstrap3 release, it's not backward compatible. This adapter can help developer working in Bootstrap 2 & 3 syntax that will not break their system when migrating to version 3, or make Bootstrap 2 system be flatten styles.

How to use it

A html page written in Bootstrap 2 will be:

<!-- Bootstrap 2 css -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Then we remove Bootstrap 2 css and add Bootstrap 3 css:

<!-- Bootstrap 3 css -->
<link href="assets/css/bootstrap.css" rel="stylesheet">

Download and uncompress adapter zip file, we will get a file bootstrap3-adapter.min.css. Add it after bootstrap css:

<!-- Bootstrap 3 css -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap3-adapter.min.css" rel="stylesheet">

Now, a website written in Bootstrap 2 will be Bootstrap 3 flatten styles.

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

Button	class=""	Description
	`btn`	Standard gray button with gradient
	`btn btn-primary`	Provides extra visual weight and identifies the primary action in a set of buttons
	`btn btn-info`	Used as an alternative to the default styles
	`btn btn-success`	Indicates a successful or positive action
	`btn btn-warning`	Indicates caution should be taken with this action
	`btn btn-danger`	Indicates a dangerous or potentially negative action
	`btn btn-inverse`	Alternate dark gray button, not tied to a semantic action or use
	`btn btn-link`	Deemphasize a button by making it look like a link while maintaining button behavior

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

<p>
  <button class="btn btn-large btn-primary" type="button">Large button</button>
  <button class="btn btn-large" type="button">Large button</button>
</p>
<p>
  <button class="btn btn-primary" type="button">Default button</button>
  <button class="btn" type="button">Default button</button>
</p>
<p>
  <button class="btn btn-small btn-primary" type="button">Small button</button>
  <button class="btn btn-small" type="button">Small button</button>
</p>
<p>
  <button class="btn btn-mini btn-primary" type="button">Mini button</button>
  <button class="btn btn-mini" type="button">Mini button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
<button class="btn btn-large btn-block" type="button">Block level button</button>

Disabled state

Make buttons look unclickable by fading them back 50%.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
<a href="#" class="btn btn-large disabled">Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Button element

Add the disabled attribute to <button> buttons.

<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-large" disabled>Button</button>

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

As a best practice, try to match the element for your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.

Add classes to an <img> element to easily style images in any project.

<img src="..." class="img-rounded">
<img src="..." class="img-circle">
<img src="..." class="img-polaroid">

Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

Labels

Labels	Markup
Default	`<span class="label">Default</span>`
Success	`<span class="label label-success">Success</span>`
Warning	`<span class="label label-warning">Warning</span>`
Important	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Inverse	`<span class="label label-inverse">Inverse</span>`

Badges

Name	Example	Markup
Default	1	`<span class="badge">1</span>`
Success	2	`<span class="badge badge-success">2</span>`
Warning	4	`<span class="badge badge-warning">4</span>`
Important	6	`<span class="badge badge-important">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Inverse	10	`<span class="badge badge-inverse">10</span>`

Easily collapsible

For easy implementation, labels and badges will simply collapse (via CSS's :empty selector) when no content exists within.

Bootstrap3 Adapter