Twitter Bootstrap 3 CSS Overview

Last update on August 19 2022 21:51:33 (UTC/GMT +8 hours)

Objective

In this tutorial, we have discussed salient points of the Twitter Bootstrap 3 CSS. This tutorial will help you to understand several key aspects of how Bootstrap 3 works.

HTML 5 Doctype

Twitter Bootstrap 3 uses several HTML5 elements and CSS properties. And for those to be working properly, you need to use HTML5 Doctype.

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

If you don't use HTML5 Doctype, at the beginning of your web page created with Twitter Bootstrap, you may face inconsistencies in some of the browsers. May even face inconsistencies under some specific situation and of course, your code will not get validated against W3c standards.

Mobile first

This may be the most significant change came with Twitter Bootstrap 3. In previous version of Bootstrap (till 2.x) you have to include another CSS along with the main CSS to make your project responsive. Not anymore. The default CSS of Bootstrap 3 itself contains responsive features.

Bootstrap 3 is created in such a way, the design targets the mobile devices first and then comes their desktop counterparts. This is indeed a very timely shift since more and more users are using mobile devices.

To make your website developed with Bootstrap responsive add the following within head of your web page.

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

width property controls the width of the device. Since it is assumed that your website will be viewed from devices with different screen resolutions, setting it to device-width will make sure that it is rendered across various devices properly.

initial-scale=1.0.0 ensures that when loaded, your web page will be rendered at a 1:1 scale and no zooming will be applied out of the box.

You may add user-scalable=no along with that to make sure that users will not be able to zoom at all. Typically, .0 is used along with user-scalable=no. But remember that this will bar your users from scrolling so they will be bale to scroll. This may give them an experience more like a native app, but think twice before you apply it to your project.

Responsive images

Bootstrap 3 has an img-responsive class to make images responsive. Let's see what are the css properties this class contains.

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

It states the associated image to be rendered as inline-block. When you set inline-block to display property of an element, the element is rendered inline with respect to the content surrounding it. But we may set width and height in this case unlike inline.

Setting height:auto leaves the decision of selecting a height for the associated element to the browser.

Setting max-width to 100% overrides any width specified with width property. This plays a very significant to the role to make your images responsive.

Global display, Typography, and links

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

Look at the following, which is set for 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 default font style for body to "Helvetica Neue", Helvetica, Arial, sans-serif

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

The third rule sets the default line-height to 1.428571429.

Default text color is set to #333333 with the fourth rule.

And default background color of the body is set to white with the last rule.

For default styling of links, it has following

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;
}

So, for hove and focus (of links), color is set to #2a6496. And an underline will be rendered.

In addition to that, for focus, there will be a thin dotted outline with color code #333. There is also another rule for an outline which sets a 5-pixel wide outline. It has a browser extension of -webkit-focus-ring-color for webkit based browsers. Outline offset is set to -2 pixel.

If you intend to use less, you may find all these within scaffolding.less

Get rid of cross-browser inconsistencies

Bootstrap 3, like it's ancestors versions, used Normalize to establish cross-browser consistency.

Container

container class of Bootstrap 3 is used to wrap content. Let's have a look at this class

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

With above, setting margins for right and left of the container is left to 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. :before pseudo-element prevents top-margin collapse and :after pseudo-element clears the floats.

A space is created around the said element, if the content editable attribute is present in the HTML, because of some Opera bug. This is fixed using content: " ".

.container:after {
  clear: both;
}

It creates a pseudo-element and makes sure that all the container contains all the floating elements inside it.

Bootstrap 3 CSS has media-queries for applying responsiveness and within those, the container class is modified accordingly to render the grid system properly.

Questions? Suggestions? Bragging? Join the discussion below. For the upcoming tutorials, please subscribe to our Feed.

Previous: Twitter Bootstrap tutorial
Next: Twitter Bootstrap Grid System tutorial

Become a Patron!

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://w3resource.com/twitter-bootstrap/CSS-overview.php

Weekly Trends and Language Statistics
Weekly Trends and Language Statistics