Bootstrap classes - every answer I read here uses something new

Question

I found a list of ALL bootstrap classes courtesy of a post here. Hooray. Except it is not complete. In the last 2 hours, in Stackoverflow, I have found examples of class="span4; clear:both; content-heading; paragraphs; " (these were not in a list)

What's div class="paragraphs" ? Is content-heading similar to .lead (which I think is a style).

Is there any listing of all the STYLES?

I love w3schools - I live 20 miles W of MIT, and MIT was one the schools that accepted me 50 years ago. I love the mission and execution of w3. But I have poured through their tutorials and references and I cannot find simple rules like:

• class elements can be strung together, semi-colons in-between. They end in a quote mark, but the last entry can be followed by a semi-colon with or w/o a space. Numbers, like height, can have leading spaces.

Is there some place that lays out this stuff? I've looked at many other bootstrap sites, but w3 seems the best. I still don't quite grasp Github, but they have lots of info.

Answer 1

I would recommend you to have a look at the official bootstrap documentation

http://getbootstrap.com/ for the latest version http://getbootstrap.com/2.3.2/ for the older version

In the example you are looking, paragraphs and content-heading classes might be a user defined.

It is also worth noting that bootstrap evolved over time. Bootstrap 2x to 3x was a major change. So note that the examples you are looking at might correspond to an older version of bootstrap.

The release history can be found here on github https://github.com/twbs/bootstrap/releases

and Bootstrap 2x to 3x migration guide can be found here http://getbootstrap.com/migration/

Hope it helps

Answer 2

There is no such thing as a "class element". You can attach class names to HTML element nodes by listing them in the node's class attribute.

Multiple class names are separated by white space, the whole list of class names enclosed in quotes, single or double makes no difference. Example: <div class="first-class second-class"/>. A single class name does not require surrounding quotes, however it's advisable to always enclose attribute values in quotes, to avoid mistakingly omitting them when they are required. The order of class names in the attribute value is irrelevant.

A valid class name can consist of upper and lowercase letters, numbers, hyphens (-) and underbars (_). However the name must start with a letter, hyphen or underbar. See this more complete answer for more on this subject.

Styles for class names are defined in style sheets, for the web its CSS (Cascading Style Sheets). The cascade is defined by the order styles are introduced in the style sheet; succinctly and simplified: later values trump earlier values, when the selectors are of equal importance.

In CSS, properties and their value is separated by a colon. The value is followed by a semi-colon. A block of styles is surrounded in curly braces, and are preceded by a selector. The selector can be a tag name, id, class name as well as a combination of the three, combinators and pseudo-elements.

An example:

/* Styles applied to the body tag and all its child nodes */
body {
    background-color: white;
    color: black;
}

/* This block defines that when the class name "error"
 * applies, the text should be red */
.error {
    color: red;
}

For a friendly tutorial in HTML and CSS, see e.g. CodeAcademy. For reasons why one should not hold W3Schools in very high regard see W3Fools.com.