This tutorial defines HTML5 elements and how Bootstrap styles them. Bootstrap CSS is one of the module in Bootstrap to style and design the UI components. The Bootstrap makes use of HTML5 doctype which must be first thing in HTML document before the html tag. It does not have an end tag and is not case sensitive. It can be declared as follows:
<! DOCTYPE html> ... </html>
Working with Mobile Device
We can design and layout by using HTML, CSS and Bootstrap which should work on both desktops browser window and mobile devices. Sometimes responsive design works fine when we resize the browser window and not on mobile devices. So we should not miss to add meta tag that targets mobile devices for proper scale. The meta tag always goes inside head tag. We can insert following in the header of the page:
<met name=”viewport” content=”width=device-width, initial-scale=1.0”>
- It contains attributes such as name which defines name for the metadata, the viewport meta can be used to control how HTML content will appear in mobile devices.
- The content attribute gives value associated with name attribute.
- We have set the initial content-width to the width of the device screen which will make sure that it is rendered across various devices such as mobiles, desktops, tablets properly.
- The initial-scale attribute describes the initial zoom when visiting the page. 1.0 does not zoom.
Typography and Links
Bootstrap uses typography and links to display headings, paragraphs and other inline elements. It sets how the contents should be display on the body, background color on the body, uses font size and line height to create margins, padding’s etc.
- The default font stack is Helvetica Neue, Helvetica, Arial and Sans-serif.
- By default, body has font size of 14px and line height of 20px.
- It sets background color as a white on the body.
- The typographic scale is based on Less variables: @font-family-base, @font-size-base and @line-height-base which creates the font name, margins, padding’s, line heights for the variables.
- It uses global link color by using @link-color and apply link underlines only on :hover.
Normalize
The Normalize.css is a small CSS file makes browsers render all the elements more consistently and in line with modern standards. Its modern alternative to popular CSS reset + CSS base combination and provides normalize styles for wide range of HTML elements. It is for making browsers display elements consistently. The traditional resets remove all HTML elements styles and provide blank state, where as Normalize.css preserves useful browser default rather than unstyling everything and tries to normalize styles across browsers, instead of removing styles. It supports wide range of browsers including mobile browsers and includes CSS that normalizes HTML5 elements, typography, lists, forms and tables.
The Normalize.css is a modular which broke the project into independent sections which makes easy to see which elements need specific styles. When an element has different default styles in different browsers, normalize.css makes those styles consistent and in line with modern standard when possible. The normalize.css has wider scope which corrects some common bugs that are out of scope such as display settings for HTML5 elements, correcting font size, lack of font inheritance by form elements etc.
Containers
A container is a component which contains other components inside itself. It is very useful and creates centered area within the page that other site content can be put within. The benefit of the container is, it is responsive and will work out the best width to use for the screens current width. It will act as main wrapper for pages where we will place all our other HTML code. It contains the web page contents which uses .container class as shown below:
<div class=”container”> ... </div>
The container has two purposes:
- To provide the width constraints on responsive widths. When responsive size changes, it’s the container that changes and
- To provide padding so that the content doesn’t touch the edge of the browser.
In general we would use container >row. A row is designed to use within container. If we are using anything like span, then it should be designed inside a row.
The .container class in bootstrap.css file:
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
We can’t do nesting of containers due to padding and fixed widths.