❮ Bootstrap V2 Alerts Errors Bootstrap Wells ❯

Bootstrap 3 `CSS Overview`

Objective

In this tutorial, we have discussed the key points of Bootstrap 3 CSS. Next, we will explain several critical factors of how Bootstrap 3 works.

HTML 5 Document Type (Doctype)

Bootstrap 3 uses some HTML5 elements and CSS properties. To ensure these work correctly, you need to use the HTML5 document type (Doctype).

<!DOCTYPE html>
<html lang="en">
  ...
</html>

If you do not use the HTML5 document type (Doctype) at the beginning of web pages created with Bootstrap, you may face some inconsistent browser display issues, and even specific inconsistencies that could prevent your code from passing W3C standards validation.

Mobile First

This is perhaps the most significant change in Bootstrap 3. In previous versions of Bootstrap (up to 2.x), you needed to manually reference another CSS to make the project mobile-friendly alongside the main CSS. Now, Bootstrap 3's default CSS is inherently mobile-friendly.

Bootstrap 3's design goal is mobile-first, followed by desktop. This is a very timely shift, as more users are now using mobile devices.

To ensure that websites developed with Bootstrap are mobile-friendly, add the viewport meta tag in the head of your webpage, as shown below:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The width attribute controls the width of the device. If your website will be viewed on devices with different screen resolutions, setting it to device-width ensures it will display correctly on various devices.

initial-scale=1.0 ensures that the webpage loads at a 1:1 scale, with no zooming.

On mobile browsers, adding user-scalable=no to the viewport meta tag disables zooming. Typically, maximum-scale=1.0 is used with user-scalable=no. Disabling zooming allows users to only scroll, giving your website a more native app-like feel. Note that this approach is not recommended for all websites; it depends on your specific needs!

Responsive Images

By adding the img-responsive class, Bootstrap 3 enhances support for responsive layouts. Let's look at the CSS properties included in this class. It essentially assigns max-width: 100%; and height: auto; to images, allowing them to scale proportionally without exceeding their parent element's dimensions.

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

This indicates that the related images are rendered as inline-block. When you set the display property of an element to inline-block, it renders inline with surrounding content, but unlike inline elements, you can set width and height.

Setting height: auto allows the element's height to depend on the browser.

Setting max-width to 100% overrides any width specified by the width attribute, making images more friendly for responsive layouts.

Global Display, Typography, and Links

Bootstrap 3 uses body {margin: 0;} to remove the margin from the body.

Here is the setting for the body:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

The first rule sets the default font style for the body to "Helvetica Neue", Helvetica, Arial, sans-serif.

The second rule sets the default font size to 14 pixels.

The third rule sets the default line height to 1.428571429.

The fourth rule sets the default text color to #333333.

The last rule sets the default background color to white.

For the default link styles, the following settings are used:

a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted #333;

So, when the mouse hovers over a link, or a clicked link, the color is set to #2a6496. Additionally, an underline is displayed.

Furthermore, a clicked link will show a thin dotted outline with the color code #333. Another rule sets the outline to be 5 pixels wide, and for webkit-based browsers, it has a browser extension of -webkit-focus-ring-color. The outline offset is set to -2 pixels.

All these styles can be found in scaffolding.less.

Avoiding Cross-Browser Inconsistencies

Bootstrap 3, like its previous versions, uses Normalize to establish cross-browser consistency.

Container

Bootstrap 3's container class is used to wrap content on the page. Let's take a look at this class:

.container {
  margin-right: auto;
  margin-left: auto;
}

The above code leaves the container's left and right margins to be determined by the browser.

.container:before,
.container:after {
  display: table;
  content: " ";
}

This generates pseudo-elements. Setting display to table creates an anonymous table-cell and a new block formatting context. The :before pseudo-element prevents top margin collapse, and the :after pseudo-element clears floats.

If the contenteditable attribute appears in the HTML, due to some Opera bug, it creates a space around the elements mentioned above. This can be fixed by using content: " ".

.container:after {
  clear: both;
}

It creates a pseudo-element and ensures that all containers include all floating elements.

Bootstrap 3 CSS has responsive media queries that set the max-width for the container at different media query thresholds to match the grid system.