Bootstrap 3 Succinctly: Additional Changed CSS Features

In the previous tutorial in our series on Bootstrap 3, you learned about some of the CSS features that have changed in version 3. In this tutorial we'll finish that off by looking at other changed features, such as images and buttons.

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 so that the naming scheme matches the other similarly named class changes and brings uniformity to the Bootstrap base library. 

Other than that, the base button classes remain unchanged, as the following code sample 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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

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

There are a few new classes for the button element, 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-sized button is the standard size used when no class is specified. 

The following code sample 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>

When rendered in the browser, this code sample should give you the following output: 

When you add the class btn-block to a button or anchor element styled using any of the previous button classes, that button will stretch to fill 100 percent of the available space. This is useful when producing dialog boxes and sizing controls with 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 button’s active state yourself, but if you do, you can easily add 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 button’s style. Adding the active class, however, will force the button to display its active state. 

Note: If you‘re thinking of using the active state to create sticky buttons, be aware that in the following tutorials, we will be discussing button states using the component and JavaScript facilities available. BS3 provides just such a sticky button using the additional features available in these facilities, so you won’t need to create your own sticky buttons using active in most circumstances.

You can also disable your buttons and mark them as inactive using the same “disabled” classes and attributes that we discussed previously with 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>

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

For this reason, the BS3 team recommends that you use the <button> element where possible to mark buttons, 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 times 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 in other places in BS3. Previously, images were 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 were not perfect; many people cited problems with pages where Google Maps were used, among other things. 

BS3 changes all of this. Now, by default, images are fully responsive with the use of an <img> tag. 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 that, the only other change made to the images section is the name of the img-polaroid class (used for generating thumbnails) to img-thumbnail, so that it falls in line with other similar renaming throughout the library. 

The BS2 classes img-rounded and img-circle still work as they did previously, giving 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. 

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

BS3 takes this one step further and 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: if you use these contextual color classes on anchor tags and anything else that has a hover-over set by default, the colors will automatically dim slightly 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>
<br/><br/>
<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>

One thing that was noted as being needed in BS3, and not present in BS2, is 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—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: 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: 

<div class="bg-primary" style="width: 200px; height: 200px; padding: 4px;">
<button type="button" class="close" aria-hidden="true">&times;</button>
<p>This text appears in a div that has its own close icon attached to it.</p>
<div class="bg-success text-primary">
    <div class="caret" /></div>
</div>

Just as in BS2, the quick float utility classes pull-left and pull-right still exist, but they are now joined by center-block, which simply makes both margins automatic and centers the element in its parent, and clearfix, which clears out any floats that you may be using, thus restoring 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 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 now another class like this 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 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 an H1 or some other standard-type tag, 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 this. A simple example follows: 

<header>
    <img src="title.png" />
	<h1 class="text-hide">A graphical image based title</h1>
</header>

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, we have. But BS3 has one more trick up its sleeve, which in all fairness was present in BS2, but 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 it’s 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: 

Now this is great until you try to fit it on a mobile device, where 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 helps you handle situations like this with great ease. Take the following bit of code: 

<div class="col-md-12" style="border: 1px solid black">
    <div class="col-md-3">
		<table class="table">
			<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>
	<div class="col-md-9" style="border-left: 1px solid black">
		<h1>Email 2 : <small>Received (1/1/11)</small></h1>
		<h2>To : A person</h2>
		<br/>
		<br/>
		<p>Dear A person,</p>
		<p>Blah blah blah blah blah blah blah</p>
	</div>
</div>

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

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

This may work for some, but in general, it’s a bad idea. What happens when you have 100 unread emails, and have to scroll to the bottom of the view each time to read the preview? 

Take the main preview <div> and add a new class to it, hidden-sm, as follows: 

<div class="col-md-9 hidden-sm" style="border-left: 1px solid black">

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

Just as with the grid system, there are four different sizes, and there are classes to hide and make visible. The visible classes will make the element in question visible only at the specified screen size, and the hidden classes make the element in question hidden only at the specified 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 used in the grid system in general, with -xs covering palm-sized tablet phones and smaller, -sm covering average-to-large tablets, -md covering most desktop computers, and -lg covering wide-screen desktops. 

There are two final classes used in this category to assist you with handling display vs. 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 making an element visible and invisible when a page is sent to the printer. 

This tutorial represents a chapter from Bootstrap 3 Succinctly, a free eBook from the team at Syncfusion.