YouTipIn this tutorial, we have covered the key points of Bootstrap 3 CSS. Next, we will explain several critical factors for how Bootstrap 3 works.
Bootstrap 3 uses some HTML5 elements and CSS properties. To ensure these work properly, you need to use the HTML5 document type (Doctype).
...If you do not use the HTML5 document type (Doctype) at the beginning of a webpage created with Bootstrap, you may encounter inconsistent rendering across browsers, or even inconsistencies in specific scenarios, causing your code to fail W3C validation.
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 file alongside the main CSS to make your project mobile-friendly. Now, Bootstrap 3's default CSS is inherently mobile-friendly.
Bootstrap 3 adopts a mobile-first design approach, prioritizing mobile devices before desktops. This is actually a very timely shift, as an increasing number of users now access the web via mobile devices.
To ensure websites built with Bootstrap are mobile-friendly and render properly with appropriate touch zooming, you need to add the viewport meta tag within the <head> section of your webpage, as shown below:
The width attribute controls the width of the device. Assuming your website will be viewed on devices with varying screen resolutions, setting it to device-width ensures correct rendering across different devices.
initial-scale=1.0 ensures the webpage is displayed at a 1:1 scale upon loading, without any zoom applied.
On mobile browsers, adding user-scalable=no to the viewport meta tag disables zooming functionality. Typically, maximum-scale=1.0 is used together with user-scalable=no. Disabling zoom in this way restricts users to scrolling only, giving your website a more native-app-like feel. Note that we do not recommend this approach for all websites—use it only if it suits your specific needs!
Adding the img-responsive class makes images in Bootstrap 3 more responsive. Let’s examine the CSS properties included in this class. Essentially, it applies max-width: 100%; and height: auto; to images, allowing them to scale proportionally without exceeding their parent container’s dimensions.
.img-responsive { display: inline-block; height: auto; max-width: 100%;}This indicates that the relevant image is rendered as inline-block. When an element’s display property is set to inline-block, it behaves like an inline element relative to surrounding content, but unlike regular inline elements, you can specify explicit width and height values.
Setting height:auto allows the element’s height to be determined by the browser.
Setting max-width to 100% overrides any width specified via the width property, making the image more responsive.
Bootstrap 3 uses body {margin: 0;} to remove the default margin from the body.
Consider the following body settings:
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 family 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 final rule sets the default background color to white.
The default link styles are configured as follows:
a:hover, a:focus { color: #2a6496; text-decoration: underline;} a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;}Thus, when hovering over or focusing on a link, its color changes to #2a6496, and an underline appears.
Additionally, focused links display a thin dotted outline with color #333. Another rule sets the outline width to 5 pixels and includes a browser-specific extension -webkit-focus-ring-color for WebKit-based browsers. The outline offset is set to -2 pixels.
All these styles can be found in scaffolding.less.
Like its predecessors, Bootstrap 3 uses Normalize to establish cross-browser consistency.
The container class in Bootstrap 3 wraps page content. Let’s examine this class:
.container { margin-right: auto; margin-left: auto;}The above code lets the browser automatically determine the left and right margins of the container.
.container:before,
.container:after {
display: table;
content: " ";
}This generates pseudo-elements. Setting display to table creates an anonymous table-cell and establishes a new block formatting context. The :before pseudo-element prevents top-margin collapse, while the :after pseudo-element clears floats.
If the contenteditable attribute appears in HTML, due to an Opera bug, a space is created around these elements. This can be fixed by using content: " ".
.container:after { clear: both;}This creates a pseudo-element and ensures all containers encompass floated elements.
Bootstrap 3 CSS includes responsive media queries that set max-width for the container at different media query breakpoints, aligning with the grid system.