❮ Bootstrap Button Groups Home ❯

Bootstrap `CSS Overview`

In this chapter, we will explain the key components of Bootstrap's underlying structure, including our best practices that make web development better, faster, and more robust.

HTML 5 Document Type (Doctype)

Bootstrap utilizes some HTML5 elements and CSS properties. For these to work properly, you need to use the HTML5 document type (Doctype). Therefore, include the following snippet at the beginning of your Bootstrap project.

<!DOCTYPE html>
<html>
....
</html>

If you do not use the HTML5 document type (Doctype) at the beginning of web pages created with Bootstrap, you may face inconsistencies in browser display and even in specific situations, causing your code to fail W3C standard validation.

Mobile First

Mobile first is 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 entire project mobile-friendly.

Now, Bootstrap 3's default CSS inherently supports mobile devices.

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

To make websites developed with Bootstrap mobile-friendly, ensure proper rendering and touch zooming by adding 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 device's width. If your website will be browsed on devices with different screen resolutions, setting it to device-width ensures it renders correctly on different devices.

initial-scale=1.0 ensures the webpage loads at a 1:1 scale, without any zooming.

On mobile device browsers, adding user-scalable=no to the viewport meta tag disables zooming.

Typically, maximum-scale=1.0 is used with user-scalable=no. This disables zooming, allowing users to only scroll, making your website feel more like a native app.

Note, this approach is not recommended for all websites and depends on your specific needs!

&lt;meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

Responsive Images

<img decoding="async" src="..." class="img-responsive" alt="Responsive image">

Adding the img-responsive class enhances Bootstrap 3's support for responsive layouts.

Let's look at the CSS properties included in this class.

In the following code, the img-responsive class assigns max-width: 100%; and height: auto; to the image, allowing it to scale proportionally without exceeding its parent element's dimensions.

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

This indicates that the related image is rendered as a block. Setting the display property to block displays the element as a block-level element.

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 the image more friendly to responsive layouts.

To center an image with the .img-responsive class horizontally, use the .center-block class instead of .text-center.

Global Display, Typography, and Links

Basic Global Display

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

See the settings for body below:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;

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 for text 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.

Typography

Use the @font-family-base, @font-size-base, and @line-height-base properties for typographic styling.

Link Styles

Set the global link color using the @link-color attribute.

For the default link style, set 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;
}

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

Furthermore, a clicked link will show a thin dotted outline with a color code of #333. Another rule sets the outline to be 5 pixels wide, with a browser extension for webkit browsers 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 uses Normalize to establish cross-browser consistency.

Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.

Container

<div class="container">
  ...
</div>

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

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

With the above code, the left and right margins of the container are determined by the browser.

Note that since the padding is a fixed width, containers are not nestable by default.

.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 is present in the HTML, due to some Opera bug, it creates a space around the above elements. This can be fixed by using content: " ".

.container:after {
  clear: both;
}

It creates a pseudo-element and ensures that all containers contain 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.

@media (min-width: 768px) {
   .container {
      width: 750px;
}

Bootstrap Browser/Device Support

Bootstrap works well on the latest desktop and mobile browsers.

Older browsers may not support it well.

The following table shows the latest versions of browsers and platforms supported by Bootstrap:

	Chrome	Firefox	IE	Opera	Safari
Android	YES	YES	N/A	N/A	N/A
iOS	YES	N/A	N/A	N/A	YES
Mac OS X	YES	YES	N/A	YES	YES
Windows	YES	YES	YES*	YES	N/A

Bootstrap supports Internet Explorer 8 and higher versions of IE.