Bootstrap Layout

Bootstrap requires HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set:

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

To ensure proper rendering and touch zooming, add the meta tag inside the head element:

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

Bootstrap also requires a container element to wrap site contents. There are two container classes:

The "container" class - provides a responsive fixed width container.
The "container-fluid" class - provides a full width container, spanning the entire width of the viewport.

The below examples shows the layout of bootstrap files, as well as the difference between the container and container-fluid classes.

Example 1: Layout using container class.

<div class="container">
    <h1>My First Bootstrap Page</h1>
    <p>This is some text.</p> 
</div>

Example 2: Layout using container-fluid class.

Note: Containers are not nestable (you cannot put a container inside another container).

Updated: 11-Nov-19

Bootstrap3 Tutorial