Twitter Bootstrap 3 Succinctly^®
by Peter Shaw

CHAPTER 4

Changed CSS Features

So far you've already seen a number of the new CSS features that are available in version 3 of bootstrap, in this chapter we'll go into a little more detail into just what is considered new and what's not.

In many cases these new classes are just renames of the old ones, but we treat them as new here so that you can easily make the distinction.

Typography changes

The various classes that make up BS3's typography section haven't changed as much as some of the other elements, tags H1 through H6 are still treated the same way as they were in V2 with the addition that you can now use '<small>' in line with any header element without it first having to be wrapped in a div using the 'page-header' class. This means no extra mark up now unless you want your block heading to be underlined with a different paragraph margin.

<h1>This is my super web page <small>It's the best there is</small></h1>

</div>

Code snippet 10: BS V2 page header

As you can see above, in V2 you had no choice but to wrap your h1 in a page-header div, as this was the only way the small tags output would be neatly lined up, this has now been rectified and also applied to all levels of header rather than just the first 3.

<h1>This is my super web page <small>it's the best there is</small></h1>

Code snippet 11: BS V3 page header

Continuing on, the standard body copy class has no changes, and remains at a default size of 14 pixels with a line height of about 1.4.

Body copy is applied to all text inside a paragraph tag automatically so no classes are needed unless you want to use some of the special features (as we'll see soon).

Lead body copy (paragraphs with the class name of 'lead') also have no changes to their names or styling and as with V2 are designed to give your opening paragraph a bit more emphasis than other regular body copy, combining these 3 CSS rules, you might have something like the following:

<h1>This is my super webpage <small>It's the best there is</small></h1>

</div>

<p class="lead">Welcome to my super-duper webpage, there's no other webpage like it in the whole world, my page is the best thing on the Internet that you should visit</p>

<p>On this fantastic page I have text and some more text, and there's even some text for you to read, as well as a nice looking page title</p>

</div>

Code snippet 12 : Header and body text example

Which when rendered in your browser should look like the following:

The output from code snippet 12

The output from code snippet 12

The <small> tag can now also be used on its own too, as its styling is now correctly handled and applied in the context in which it's used, so its styling will follow its position in the document no matter what the parent tag.

Similarly bold text is still created using the '<strong>' tag and italics using the '<em>' tag, the as with much of the typography classes, this is no different to the V2 framework.

The alignment classes also maintain their same class names of 'text-left', 'text-center', 'text-right' and 'text-justify' and still perform the same function as described in the BS2 book that precedes this one.

Likewise, abbreviations are still created using the '<abbr>' tag with the 'title' attribute acting as the full description of the abbreviation. There is one new class 'initialism' that can be added to an abbreviation tag that gives the rendered output a slightly smaller look and feel to the surrounding text.

Addresses (using the '<address>' tag) and block-quotes (using the '<blockquote>' tag) also have no changes in the CSS or base rules between V2 and V3 of the framework.

The final few that remain in the typographic category are '<code>' to create an inline code sample, and again like BS2 this has not changed in any way, with its intended use still being code samples that sit in line with regular body text.

For code samples (or anything that is plain text) that must remain formatted as per indentation and carriage returns, you should still use the '<pre>' tag, again the styling here has not changed from BS2 and layout using this should still behave as expected.

The final typographic element is the addition of a new element called '<kbd>'.

The purpose of this new tag is to display text in a way that indicates the user should enter the information into the computer in some way, generally by typing it.

For example:

<p>Open up a command prompt by typing <kbd>cmd</kbd> into the box and clicking on the button market 'Run', when it opens type in <kbd>myprogram</kbd> and press enter, at which point the app should run</p>

Code snippet 13: '<kbd>' tag example

Which when rendered in an HTML document, should look something like the following:

Output produced by code snippet 13

List Changes

In general the normal list elements made up of '<ul>', '<ol>' and '<dl>' elements has not changed, the layout is still as it was in BS2, with no extra classes being needed, note also that the 'list-unstyled', 'list-inline' along with the 'dl-horizontal' class for definition lists also remain unchanged in BS3 and have the same behavior as in BS2.

There are some changes in the list elements however, but since these occur with the specialist classes used to create menus and navigation lists, we'll be covering those when we address the changes to the navigation elements in the next chapter.

Table Changes

Tables are still styled up just as they were in BS2 by creating a standard '<table>' arrangement, then adding a 'table' class to the markup. Like BS2 tables should always be constructed using the full range of '<table>', '<thead>' and '<tbody>' html elements as the following example shows:

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

Code snippet 14: Marking up a table to be used by bootstrap

The markup in code snippet 14, should give you the following:

Output produced by code snippet 14

Output produced by code snippet 14

As with BS2, the classes to add the optional styles to a table, 'table-striped', 'table-bordered', 'table-hover' and 'table-condensed' work exactly the same as in BS2, these extra classes are added as secondary classes to the main table class on the table element itself.

for example, will give you a table that has an outer border and alternating colors on each table row.

One thing to note however, is that table striping now uses the ':nth-child' pseudo selector, which means that it will no longer work in IE8 or below without a poly-fill of other fix to help.

The remainder of the table classes for coloring your table rows have changed slightly, firstly there is a new class called 'active', previous to BS3 the 'active' class was not available on all elements, but mainly just on navigation and button elements. From BS3 onwards it can now be applied to a '<tr>' element to show that row as a highlighted row, which by default is a light grey.

The remaining contextual classes as with BS2 are designed to highlight the table rows to show different conditions, and are the same as in BS2 except for one small change.

The class name representing a dangerous or negative action has been renamed to 'danger'. In BS2 the red class was named 'error'. Other than that, the classes are applied the same way to the '<tr>' element as the following code shows:

<thead>

<tr>

<th>Class</th>

</tr>

</thead>

<tbody>

<td>Active</td>

</tr>

<td>Success</td>

</tr>

</tr>

<td>Warning</td>

</tr>

<td>Danger</td>

</tr>

</tbody>

</table>

Code snippet 15: Optional row colorings

Which when rendered, should look something like:

Output produced by code snippet 15

Output produced by code snippet 15

Two new additions to the classes used to support tables are a new responsive class that takes in to account the size of your grid system and provides either vertical scroll bars or a realigned table to fit differing size displays, and the ability to use the afore mentioned colored row classes on individual cells now, rather than just entire rows as was previously the case in BS2.

To use the coloring classes on a cell level you simply just need to add the classes to individual '<td>' or '<th>' elements as shown below:

<thead>

<tr>

<th class="active">Class</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

Code snippet 16: Applying the option row classes to individual cells

Which should result in the following:

Output generated by code snippet 16

Output generated by code snippet 16

The final table related addition is a class called 'table-responsive' which is used by applying it to a '<div>' element that wraps the entire '<table>' as follows:

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

</div>

Code snippet 17 : New BS3 responsive table example

When this new class is used on a display greater than 768 pixels (that is any display using a sizing class other than '*-xs-*' then the table display will behave no different to a normal bootstrap responsive table. However, if the table is displayed on a device that targets a '*-xs-*' class and is less than 768 pixels, the container will be altered so that a vertical scroll is available, allowing the entire table to be moved left & right without affecting the rest of the page as the following shows:

Output from code snippet 17 on a device greater than 768 pixels in width

Output from code snippet 17 on a device greater than 768 pixels in width

Output from code snippet 17 on a device less than 768 pixels in width

Output from code snippet 17 on a device less than 768 pixels in width

Form Changes

As with BS2 all normal form elements by default have a minimum level of markup that gives them a base style, this means that simply just marking up a normal form tag and associated controls will give your form the default bootstrap look and feel.

Take the following example:

<form>

<div>

<label for="exampleInputEmail1">Email address</label>

</div>

<div>

<label for="exampleInputPassword1">Password</label>

</div>

<div>

<label for="exampleInputFile">File input</label>

<p>Example block-level help text here.</p>

</div>

<div>

<label>

<input type="checkbox"> Check me out

</label>

</div>

<button type="submit">Submit</button>

</form>

Code snippet 18: Basic BS3 Form example with no classes.

If we render the above example in a browser we'll see that we get a reasonably good output already and that’s without adding any extra classes as you can see in the following image:

Output generated by code snippet 18

Output generated by code snippet 18

As mentioned in the migration section, the classes and components around HTML forms have been one of the biggest casualties when it comes to class name changes, but this is for a good reason.

Previous to BS3 many of the classes used for forms where very narrow scoped, when I say narrow scoped what I mean is that there where individual classes for many individual purposes, rather than a single class that covered many bases. For example, there where separate classes to handle the alignments of check-boxes and radio-buttons, there where separate classes to handle an input box and a text area with respect to their row alignment.

In BS3 many of these classes have been deleted and are now all rolled up under a smaller number of classes and elements.

Taking our example above and adding in the recommended mark-up as is shown in the BS3 documentation gives us the following:

<label for="exampleInputEmail1">Email address</label>

</div>

<label for="exampleInputPassword1">Password</label>

</div>

<label for="exampleInputFile">File input</label>

<p class="help-block">Example block-level help text here.</p>

</div>

<label>

<input type="checkbox"> Check me out

</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

Code snippet 19: Basic BS3 form from snippet 18 with recommended classes added

Visually if you render this code, you'll see no difference to the output generated for snippet 18, however internally Bootstrap can now find and work with individual elements much easier than it could previously.

In BS2 there was no requirement to group controls unless you wanted to work with the automatic validation classes, there's still no absolute requirement to use them, but doing so allows BS to resize and reposition things correctly when using its grid (among many other things), you'll also note that each control now also has just a single 'form-control' class assigned to it, rather than many different ones targeting different aspects.

Also note that the form tag itself now has a 'role' assigned to it. This apart from being good practice all round is now enforced by BS3 to help with aria roles and standards guiding the use of web apps by people with disabilities.

Lastly, if you look at the '<p>' tag with a 'help-block' you'll notice that that is also now used for inline form text in all cases where as in BS2 we had a number of different classes such as 'form-info'.

Unfortunately there is still one area in the support for forms that's missing and that’s the file upload control. Like BS2 this is down to the fact that security in all the current crop of browsers restricts the ability to style file input controls to match the rest of the input controls available.

As mentioned in the previous book however there are still 3rd party additions out there that have this area covered, and because you can now manufacture your own upload system using the HTML5 classes, strictly speaking you don't need the file upload control you can manufacture your own.

In BS2 there were a number of specific form types such as the 'search-form', under BS3 all of these have been rolled up into 3 main types of form, first you have the standard form as we've seen above, this is a normal form with no extra classes added to the form tag. The 2 other form types are 'form-inline' and 'form-horizontal'

The 'form-inline' class is designed for forms in small limited height places such as menu and navigation bars, a word of warning though, all input elements in this and the other form types are 100% by default, so (particularly in nav bar forms) if you need the form to only take up a small amount of room, you will need to put manual sizes on the individual controls.

Taking the example from code snippet 19 above, and adding 'form-inline' or 'form-horizontal' in turn should change your basic form layout to look like the following:

Form produced by code snippet 19 with the 'form-inline' class added to the form tag.

Form produced by code snippet 19 with the 'form-inline' class added to the form tag.

The 'form-horizontal' class is used to create regular top down forms with input controls that have their associated labels to the left of them, rather than above them as the default form does, be aware however that in order for form horizontal to work correctly you need to add a little extra markup to the form in general as shown in code snippet 20 below.

Note: A side note on providing labels in forms.

In today‘s brave new world of HTML 5 it's more important than ever to mark input elements up correctly with an associated label. The standards bodies responsible for steering the spec forward are leaning very heviliy on making sure that plenty of choice exists for disadvantaged users who may be using aids to assist them, not providing the required pieces to allow these aids to work correctly will going forward be seen as a bad thing and companies leaving them up will forceably be shunned for doing so. This is not a bad thing though, and BS3 has your back covered. If you decide you don't want labels in your forms you can mark them with an optional class 'sr-only', adding this class will visually prevent the label or associated help text from appearing in your document, but will ensure that it is marked up in such a way as to be visible by screen readers and other similar devices or software.

<label for="exampleInputEmail1" class="col-sm-2 control-label">Email address</label>

</div>

<label for="exampleInputPassword1" class="col-sm-2 control-label">Password</label>

</div>

<label for="exampleInputFile" class="col-sm-2 control-label">File input</label>

<p class="help-block">Example block-level help text here.</p>

</div>

<label>

<input type="checkbox"> Remember me

</label>

</div>

</div>

</form>

Code snippet 20: The code from snippet 19 marked up with extra classes to support form-horizontal

If you render the code from snippet 20 in your browser it should look like the following:

Output displayed from code snippet 20 showing our form marked up as horizontal.

Output displayed from code snippet 20 showing our form marked up as horizontal.

As you can see from the code in snippet 20, the extra markup is not really that much more and most of it exists just to line up the columns correctly so everything sits nicely.

The main points to be aware of in snippet 20 are:

All label controls now have a class of 'control-label' added. This is not required for the other form types, and BS2 if used will simply ignore it.
Any input control that will likely render as a block level element is now wrapped in a parent div in order to control its width using the grid system.
the extra class for form-horizontal is applied to the outer most form tag.

For the rest of the classes and associated parts in the forms section of BS3 nothing else beyond the classes mentioned so far have changed, however from an actual application point of view, input controls MUST have a correct type on them to be styled now, this means at a minimum you must have at least type="text" for BS3 to do its magic.

It’s highly recommended that you do use the correct types however. As you'll see soon when we get to validation groups, having the correct type will allow most of the validation stuff to actually work correctly without making any changes to your markup.

Checkboxes and radio buttons like BS2 are stacked by default, if you wish to have them render vertically across the screen you need to use the 'checkbox-inline' and 'radio-inline' classes as follows:

<input type="checkbox" id="inlineCheckbox1" value="option1"> 1

</label>

<input type="checkbox" id="inlineCheckbox2" value="option2"> 2

</label>

<input type="checkbox" id="inlineCheckbox3" value="option3"> 3

</label>

</div>

<input type="radio" id="inlineRadio" value="option1"> 1

</label>

<input type="radio" id="inlineRadio" value="option2"> 2

</label>

<input type="radio" id="inlineRadio" value="option3"> 3

</label>

</div>

Code snippet 21: Inline check box and radio buttons in BS3

Rendering snippet 21 in your browser should look something like the following:

Output produced by snippet 21

Output produced by snippet 21

Select and multi select boxes are marked up with standard styles just by using the elements as they stand, this is no change from BS2 where the mark-up and style of these elements is identical.

One new style that has been introduced in BS3 is the static control style. Previous to this in BS2 you often had to use a disabled form control to represent static form data that could not be changed, BS3 changes this by providing a 'form-control-static' class that can be applied to individual controls in place of the regular 'form-control' as the following code shows:

<label class="col-sm-2 control-label">Email</label>

<p class="form-control-static">[email protected]</p>

</div>

<label for="inputPassword" class="col-sm-2 control-label">Password</label>

</div>

</form>

Code snippet 22: How to create a static input component in BS3

When rendered in the browser, this produces a regular form layout, with the static control clearly marked as not being editable or looking like an input control as the following image shows:

The form with a static field produced by code snippet 22

The form with a static field produced by code snippet 22

The disabled style of form controls is still marked up and used in the same way as in BS2, simply by adding the 'disabled' attribute to the input element as the following shows:

This will produce the classic disabled control look of a grayed out control, something like the following:

Classic grey out, disabled control look in both BS2 and BS3

If you add the 'disabled' attribute to a field-set surrounding a form, than all of the controls in that group will be disabled at the same time and using the same styling, this is something that didn't happen in BS2 where you had to mark up each individual control instead.

The final thing I want to mention while on the subject of forms is the validation and focus classes.

As I previously mentioned, adding the correct input types in HTML5 elements really helps you when it comes to using the validation classes, why?

well as well as having dedicated class names and styles for you to use, the validation classes also hook the new HTML5 pseudo elements such as 'focus:', 'error:' and others.

This means that if you mark a text box up as type="email" then don't put an email address into it when submitting, the browser should automatically highlight the field red for you.

If it does not, or you have some other way of making your validation work, then you can simply use the 'has-success', 'has-warning' and 'has-error' classes on your form groups as the following code shows:

<label class="control-label" for="inputSuccess1">Label for Form group that has-success</label>

<p class="help-block">Successful block-level help text here.</p>

</div>

<label class="control-label" for="inputWarning1">Label for Form group that has-warning</label>

<p class="help-block">Warning block-level help text here.</p>

</div>

<label class="control-label" for="inputError1">Label for Form group that has-error</label>

<p class="help-block">Error block-level help text here.</p>

</div>

</form>

Code snippet 23: Marking up a form in BS3 to use the validation classes

If you render this code in your browser, you should see something like the following:

The output produced by code snippet 23

The output produced by code snippet 23

Points to note are that I've added the classes to the form groups in order to produce a static display, however you should also try just marking up the form with the correct input types.

I've found browser support on the pseudo classes is still a little patchy even though there's no mention of it in the BS3 docs, so I do recommend that you also make use of the class names when manipulating your elements using JavaScript.

Also note that the label and block level help text takes on the correct color of the group too, so you have no need of adding colors or styles to these separately to the form control group, and remember that the 'form-group' sections can also use everything else we've mentioned so far to disable, grey out and resize form elements as required on a grouped basis.

The last thing to mention for validation groups is that you can also provide optional feedback icons directly in the form controls in order to help with the state.

You do this by providing a span element IMMEDIATELY after the input element to which is should be used with. This span element has the usual icon classes applied to it (Which we'll see in the next chapter) along with a class of 'form-control-feedback', this MUST be put after the input control and before any other markup in the input group due to the way the control is repositioned to make it appear in the control, once you add the span you also need to add a class of 'has-feedback' in the form group class list alongside the other 'has-xxxxx' classes used to show the validation state.

If we expand code snippet 23 to take this in to account and add feedback icons, this is what it should look like:

<label class="control-label" for="inputSuccess1">Label for Form group that has-success</label>

<p class="help-block">Successful block-level help text here.</p>

</div>

<label class="control-label" for="inputWarning1">Label for Form group that has-warning</label>

<p class="help-block">Warning block-level help text here.</p>

</div>

<label class="control-label" for="inputError1">Label for Form group that has-error</label>

<p class="help-block">Error block-level help text here.</p>

</div>

</form>

Code snippet 24: Snippet 23, changed to add feedback icons

Once we re-render with these changes, you should see the following:

The output generated by code snippet 24

The output generated by code snippet 24

Button changes

The most prominent change in the classes used to style buttons in BS3 is the default style. Under BS2 simply adding the 'btn' class to an input element of type button, or to an anchor tag would give the control the default button look and feel.

From BS3 onwards you now explicitly have to add 'btn-default', just adding 'btn' on its own will now no longer have any effect.

The second main change is in the renaming of some of the base classes. Specifically 'btn-error' has been renamed to 'btn-danger' in order that the naming scheme matches the other similarly named class changes in order to bring uniformity to the bootstrap base library.

Other than that, the base button classes remain unchanged as the following code snippet shows:

<button type="button" class="btn btn-default">Default</button>

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

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

Code snippet 25: BS3 button classes

When rendered in the browser you'll see the normal flat button look the BS3 now has for controls:

Bootstrap buttons as produced by code snippet 25

Bootstrap buttons as produced by code snippet 25

In terms of new classes for the button element, there has been a couple of new additions, added to bring uniformity to the grid sizing classes. These classes are 'btn-lg', btn-sm' and 'btn-xs', there is no 'btn-md' as the medium size button is the standard size used when no class is specified.

The following code snippet demonstrates all the button styles at different sizes:

<p>

<button type="button" class="btn btn-default btn-lg">Large default button</button>

<button type="button" class="btn btn-default">Medium default button</button>

<button type="button" class="btn btn-default btn-sm">Small default button</button>

<button type="button" class="btn btn-default btn-xs">Extra small default button</button>

</p>

<p>

<button type="button" class="btn btn-primary btn-lg">Large primary button</button>

<button type="button" class="btn btn-primary">Medium primary button</button>

<button type="button" class="btn btn-primary btn-sm">Small primary button</button>

<button type="button" class="btn btn-primary btn-xs">Extra small primary button</button>

</p>

<p>

<button type="button" class="btn btn-success btn-lg">Large success button</button>

<button type="button" class="btn btn-success">Medium success button</button>

<button type="button" class="btn btn-success btn-sm">Small success button</button>

<button type="button" class="btn btn-success btn-xs">Extra small success button</button>

</p>

<p>

<button type="button" class="btn btn-info btn-lg">Large info button</button>

<button type="button" class="btn btn-info">Medium info button</button>

<button type="button" class="btn btn-info btn-sm">Small info button</button>

<button type="button" class="btn btn-info btn-xs">Extra small info button</button>

</p>

<p>

<button type="button" class="btn btn-warning btn-lg">Large warning button</button>

<button type="button" class="btn btn-warning">Medium warning button</button>

<button type="button" class="btn btn-warning btn-sm">Small warning button</button>

<button type="button" class="btn btn-warning btn-xs">Extra small warning button</button>

</p>

<p>

<button type="button" class="btn btn-danger btn-lg">Large danger button</button>

<button type="button" class="btn btn-danger">Medium danger button</button>

<button type="button" class="btn btn-danger btn-sm">Small danger button</button>

<button type="button" class="btn btn-danger btn-xs">Extra small danger button</button>

</p>

<p>

<button type="button" class="btn btn-link btn-lg">Large link button</button>

<button type="button" class="btn btn-link">Medium link button</button>

<button type="button" class="btn btn-link btn-sm">Small link button</button>

<button type="button" class="btn btn-link btn-xs">Extra small link button</button>

</p>

Code snippet 26: All the BS3 buttons styles at each of the different sizes.

Which when rendered in the browser should give you the following output:

The output produced by code snippet 26

The output produced by code snippet 26

Adding the class 'btn-block' to any button or anchor element styled using any of the above button classes, will cause that button to stretch to fill 100% of the available space, this is useful when producing dialog boxes and sizing controls using the BS3 grid system, as it allows you to specifically size buttons (and other elements) to maintain a good balance in your form designs.

In most cases you won't need to set a buttons active state yourself, but if you do this can be very easily achieved by adding the 'active' class to any element marked up using the button classes. Active in general (on the <button> element at least) usually uses the ':active' pseudo selector to change the buttons style. Adding the 'active' class however will force the button to display its active state if you need to.

Note: If you‘re thinking of using the 'active' state to create sticky buttons, be aware that in the following chapters, we will be discussing button states using the component & javascript facilities available. BS3 provides just such a sticky button using the additional features available in these facilities and so creating your own sticky buttons using 'active' should only ever need to be used in very special circumstances.

You can also disable your buttons and mark them as inactive using the same 'disabled' classes and attributes as seem previously while discussing the changes in form elements.

The following code shows buttons marked up to look active and in the disabled states:

<p>

<button type="button" class="btn btn-primary active">Active primary button</button>

<button type="button" class="btn btn-default active">Active default button</button>

</p>

<p>

<button type="button" class="btn btn-primary" disabled="disabled">Disabled primary button</button>

<button type="button" class="btn btn-default" disabled="disabled">Disabled default button</button>

</p>

Code snippet 27: BS3 active and disabled buttons

Output produced by code snippet 27

Output produced by code snippet 27

Be aware however, that in the case of anchor buttons the 'disabled' element/class does NOT disable the link click, to make sure that a disabled state anchor links does not fire you will need to use custom JavaScript.

For this reason the BS3 team, recommend that you use the <button> element where possible to mark buttons up, and only use anchor tags in specific circumstances.

Let’s also not forget the subject of 'idempotence' and the importance of using buttons over anchors. In general, an anchor link is appropriate if the destination is a get request and making the link several limes will not cause any issues by repeat activation, otherwise use a button.

Image changes

CSS changes where the humble image tag is concerned have not been as far reaching as other places in BS3. Previously images where not responsive by default, and as with many things in BS2 you had to add the optional responsive classes to get anywhere near being responsive with them.

Unfortunately, even after you added the optional responsive classes, things still where not perfect with many people citing problems with pages where Google Maps were used among other things.

BS3 changes all of this, and images by default just using an <img> tag are now fully responsive, however to extend and make that responsiveness even better and more fluid you can add the 'img-responsive' to any <img> tag to ensure that even while scaling correctly, the height and width of the image also stay in proportion to each other.

Other than the responsive stuff, the only other change made to the images section is to change the 'img-polaroid' class (Used for generating thumbnails) to 'img-thumbnail' so that it falls in-line with other similar renaming though out the rest of the library.

The BS2 classes 'img-rounded' and 'img-circle' still work as they did previously to give a circular and rounded rectangle thumbnail effect.

Helper and Visibility changes

Finally we come to the changes that cover those things that don't really fit into any specific categories.

In BS2 under the typography classes you were originally introduced to a set of color classes to be used for setting the color of a text element to the same branding colors as used in other elements in the framework.

BS3 takes this one step further and also introduces the concept of having the same colors used for contextual backgrounds too.

In this case, the backgrounds are a lighter variation as used in panels and alert boxes elsewhere. There's an added bonus too, if you use these contextual color classes on anchor tags and anything else that has a hover over set by default, the colors will dim slightly automatically to show they've been hovered over.

As with the naming in other color based classes the classes available here are 'text-muted', 'text-primary', 'text-success', 'text-info', 'text-warning' and 'text-danger' for paragraph, span and other inline or block based text elements.

For background colors the class names are 'bg-primary', 'bg-success', 'bg-info', 'bg-warning' and 'bg-danger'.

The following code shows an example of using them:

<p class="text-muted">This paragraph is using the muted text class, <strong>typically reserved for something not really important or less prominent.</strong></p>

<p class="text-primary">This paragraph is using the primary text class, <strong>typically reserved for something important or default and visible.</strong></p>

<p class="text-success">This paragraph is using the success text class, <strong>typically reserved for an action that just succeeded or something good and congratulatory.</strong></p>

<p class="text-info">This paragraph is using the info text class, <strong>typically reserved for informal messages, such as a background job just finishing or a new file available.</strong></p>

<p class="text-warning">This paragraph is using the warning text class, <strong>typically reserved for something that might be dangerous or that needs attention but can wait a while.</strong></p>

<p class="text-danger">This paragraph is using the danger text class, <strong>typically reserved for something very important, or something that really needs attention drawing to it.</strong></p>

<p class="bg-primary">This paragraph is using normal text but with a primary background color to tell you that what you’re seeing is the default status.</p>

<p class="bg-success">This paragraph is using normal text but with a success background color to tell you that what you’re seeing is all good.</p>

<p class="bg-info">This paragraph is using normal text but with an info background color to tell you that what you’re seeing is informative and should be read, but not always acted upon.</p>

<p class="bg-warning">This paragraph is using normal text but with a warning background color to tell you that what you’re seeing could cause problems that you should be aware of.</p>

<p class="bg-danger">This paragraph is using normal text but with a danger background color to tell you that what you’re seeing needs you to pay attention to it now.</p>

Code snippet 28: BS3 contextual color classes

Output produced by code snippet 28

Output produced by code snippet 28

One thing that was noted as being needed in BS3 and not present in BS2 was a dedicated 'caret' class for drop-down indicators on buttons and other screen furniture.

You can now utilize this on your own elements by adding a class name of 'caret' to your outer container EG: a span or div that wraps your inner content.

Another new addition in BS3, while it's not actually a class, still deserves a mention and that’s the dialog close cross.

Just like the caret, this was present in BS2, but was not available to use separate from its intended use in modal dialogs and alert bars, however from BS3 onwards you can use it just fine on its own.

The following code sample shows an example of both the caret class and close cross in generic mark-up:

<p>This text appears in a div that has its own close icon attached to it.</p>

</div>

Code snippet 29: Using the BS3 caret and close cross helpers

Output from code snippet 29

Output from code snippet 29

Just as was present in BS2, the quick float utility classes 'pull-left' and 'pull-right' still exist, but they are now also joined by 'center-block' which simply makes both margins auto and centers the element in its parent, and 'clearfix' which clears out any floats that you may be using thus restores normal document flow.

Other new classes include the 'show', 'hidden' and 'invisible' classes. 'Show' pretty much speaks for itself, but what's the difference between the latter two? 'Hidden' physically collapses the space used by the element, so if you have it in a full height div for example, that div will collapse down to its smallest height. However if you use 'invisible' the element retains its space (and also still occupies its place in the element flow) but it vanishes from view.

We've already seen previously that a new class called 'sr-only' has been introduced to mark a block as being visible to screen readers and nothing else, there is also another class in this same stable that is used for graphical headings.

If you define a page title using an image banner, a typical screen reader will be unable to tell you what the text in the image says. For a long time, many authors have used a hack called image replacement to get around this. Image replacement works by wrapping the image banner in a H1 or some other standard type tag, and putting the name in it as clear text alongside the image banner, then using CSS to move the text off screen.

What then happens is that display wise, the image banner is seen by those with good sight, but those using a screen reader, hear the reader say the actual text in the image banner.

BS3 now provides a class called 'text-hide' in order to facilitate using this, a simple example is show below:

<h1 class="text-hide">A graphical image based title</h1>

</header>

Code snippet 30 : Using the BS text-hide class to make screen reader friendly headers

Output generated by code snippet 30 in a regular PC browser

Output generated by code snippet 30 in a regular PC browser

Now finally we come to the last of the last in the CSS changes section.

What good would a responsive web design framework be, without utility classes to help you manage your responsive layouts.

"But hold on, we've covered that with grids" I hear you say, and yes you'd be totally correct we have, but BS3 has one more ace up its sleeve too, which in all fairness WAS present in BS2 but, well didn't really work all that well.

So what's this extra magic? Let me introduce you to the responsive visibility classes.

Essentially what these little gems do is allow you to swap and change parts of your UI depending on your grid and display size.

Let's imagine for example, that you have a list of Email inbox items, and when this is being viewed on a desktop PC, each item has a preview next to it, much like in a classic Email reading application. Something perhaps like the following:

Email 1 (1/1/11)	Email 2 : Received (1/1/11) To : A person Dear A Person, Blah blah blah blah blah blah blah
Email 2 (1/1/11)
Email 3 (1/1/11)
Email 4 (1/1/11)
Email 5 (1/1/11)
Email 6 (1/1/11)

Email application layout example

Now this is great, until you try to fit it on a mobile device, where really speaking you absolutely want to hide the preview pane and leave just the email list.

Normally a task like this is performed using a little bit of JavaScript to change the visibility of the element by changing the element’s visible settings.

BS3 has a built-in solution using CSS classes that help you handle situations like this with great ease. Take the following bit of code:

<tr>

<td>Email 1 (1/1/11)</td>

</tr>

<tr>

<td class="info">Email 2 (1/1/11)</td>

</tr>

<tr>

<td>Email 3 (1/1/11)</td>

</tr>

<tr>

<td>Email 4 (1/1/11)</td>

</tr>

<tr>

<td>Email 5 (1/1/11)</td>

</tr>

<tr>

<td>Email 6 (1/1/11)</td>

</tr>

</table>

</div>

<h1>Email 2 : <small>Received (1/1/11)</small></h1>

<h2>To : A person</h2>

<br/>

<p>Dear A person,</p>

</div>

Code snippet 31: Email application mockup

If you render this in your browser you should get something that looks like the following:

Email application mockup produced by code snippet 31

Email application mockup produced by code snippet 31

If however you resize your browser to mobile screen size, things start to look a bit strange:

Email application mockup on a resized view

Email application mockup on a resized view

Which may work for some, but in general is a bad idea, what happens for example if you have 100 unread emails, and have to scroll to the bottom of the view each time to read the preview?

If you take the main preview div and add a new class to it 'hidden-sm' as follows

Then refresh your browser and try resizing it again, you should see that the preview div now gets hidden beyond certain widths, rather than getting stacked.

Email application mockup, resized but with hiding classes added

Email application mockup, resized but with hiding classes added

Just as with the grid system, there are 4 different sizes and there are classes to hide and make visible. The visible classes will make the element in question visible ONLY at that screen size, the hidden classes make the element in question hidden ONLY at that screen size, the class names are as follows

visible-xs - Make visible on extra small screens
visible-sm - Make visible on small screens
visible-md - Make visible on medium screens
visible-lg - Make visible on extra large screens

hidden-xs - Hide on extra small screens
hidden-sm - Hide on small screens
hidden-md - Hide on medium screens
hidden-lg - Hide on large screens

The widths of the devices, and the associated trigger points are the same as those use in the grid system in general, with xs covering palm size tablet phones and below, small covering average to large tablets, md covering most pc desktops and lg covering wide screen desktops

There are 2 final classes used in this category and these are to assist you with handling display v's print based layouts.

You can use 'visible-print' and 'hidden-print' in exactly the same manner as the size based classes above, but this time the difference is making an element visible and invisible when a page is sent to the printer.

Build apps 2X faster

using Syncfusion Essential Studio^® suite

1800+ high-performance UI components.
Includes popular controls such as Grid, Chart, Scheduler, and more.
24x5 unlimited support by developers.

Get Your Free Trial Now

Changed CSS Features

Typography changes

List Changes

Table Changes

Form Changes

Button changes

Image changes

Helper and Visibility changes

DISCLAIMER: Web reader is currently in beta. Please report any issues through our support system. PDF and Kindle format files are also available for download.