You will see an outline of the main features of Bootstrap’s infrastructure in this tutorial we will, including approach of Bootstrap is to faster, better, stronger web development.
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Hence include the below piece of code for HTML5 doctype at the beginning of all your projects using Bootstrap.
Since Bootstrap 3, Bootstrap has turn out to be mobile first. It means mobile first styles can be found all over the entire library instead of in different files. You will have to need to add the viewport meta tag to the <head> element, to make sure appropriate rendering and touch zooming on mobile devices.
The property "width" controls the width of the device. Setting it to device-width will ensure that it is rendered crossways different devices (mobiles, desktops, tablets…) accurately.
Make sure insisial-scale property value should be 1.0 like this "initial-scale=1.0" that when loaded, in this case your web page will be rendered at a 1:1 scale, and out of the box no zooming will be applied.
Adding user-scalable=no to the content attribute to disable the zooming abilities on mobile devices as you can see below. Users only can be able to scroll but not can zoom with this change, and results in your site feeling a bit more like a native application.
Usually maximum-scale=1.0 is used beside with user-scalable=no. As talked about above user-scalable=no might give users an experience more like a native app, therefore Bootstrap doesn’t suggest using this attribute.
Bootstrap 3 allows you to make your images responsive by using this class ".img-responsive" in the <img> tag. This class applies these style on image "max-width: 100%"; and "height: auto;" so that it resize nicely to the parent element.
Typography and links
Bootstrap sets a basic global display (background), typography, and link styles:
Basic Global display: Sets background-color: #fff; on the <body> element.
Typography: Uses the @font-family-base, @font-size-base, and @line-height-base attributes as the typographic base
Link styles: Sets the global link color via attribute @link-color and apply link underlines only on :hover.
You may find all these within scaffolding.less. If you have a plan to use LESS code.
Bootstrap is using Normalize to set up cross browser consistency.
Normalize.css is a recent, HTML5-ready substitute to CSS resets. This is a tiny CSS file that gives better cross-browser consistency in the default styling of HTML elements.
Start from using class .container to wrap a content of pages and easily center the content’s as code shown below.
Take a detail look at the .container class in bootstrap.css file:
Note: due to fixed widths and padding, containers are not nestable by default.
Take a look at bootstrap.css file:
This example you can see that CSS has media queries which are assigning width to containers. This helps us for applying responsiveness according to render the grid system properly within those the container classes is modified.