Bootstrap CSS Overview



Bootstrap’s infrastructure is used for –

  1. Better web development
  2. Faster and stronger web development
  3. Responsive web development

HTML5 doctype :

Bootstrap uses certain HTML elements along with CSS properties which requires the use of the HTML5 doctype. So it is necessary to use following line of code in each code which has Bootstrap library included –

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

Mobile first

  1. Bootstrap 3 provides mobile friendly styles in the core library which make development more mobile friendly.
  2. Bootstrap is mobile first library so we dont need to worry about the graphical interface on lower devices.

To ensure proper rendering and touch zooming, add the viewport meta tag to your head section –

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

We can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag.This disables zooming, meaning users are only able to scroll.

<meta name = "viewport" 
   content = "width=device-width, 
              initial-scale=1, 
              maximum-scale=1, 
              user-scalable=no">

Typography and links :

Bootstrap sets basic global display, typography, and link styles. Specifically, we :

  1. Set background-color: #fff; on the body
  2. Use the @font-family-base, @font-size-base, and @line-height-base attributes as our typographic base
  3. Set the global link color via @link-color and apply link underlines only on :hover

These styles can be found within scaffolding.less.

Normalize.css

For improved cross-browser rendering, we use Normalize.css

Containers

Use class .container to wrap a page’s content and easily center the content’s as shown below.

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

.container class in bootstrap.css file :

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

Due to padding and fixed widths, containers are not nestable by default.

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

Here you can see that CSS has media-queries for containers with width. This helps for applying responsiveness and within those the container class is modified accordingly to render the grid system properly.