First Page in Bootstrap

1. Add the HTML5 doctype

Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype.  Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the utf-8 character set like below :-

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

    <meta charset="utf-8"> 

    <!-- Other Bootstrap meta tag and link or script here, see next example -->
  </head>
  <body>
  </body>
</html

2. Bootstrap 3 is mobile-first

Bootstrap 3 is designed to be responsive to mobile devices.  To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element:

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

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.

3. Containers

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page with full width container</h1>
  <p>This is some text inside full width container.</p> 
</div>

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

</body>
</html>

4. Row

In bootstrap, you can define multiple row inside any container or div block. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">

    <div class="row">
        <h1>My First Bootstrap Page with first row.</h1>
        <p>This is some text inside first row.</p> 
    </div>

    <div class="row">
        <h1>My First Bootstrap Page with second row.</h1>
        <p>This is some text inside second row.</p> 
    </div>

    <div class="row">
        <h1>My First Bootstrap Page with third row.</h1>
        <p>This is some text inside third row.</p> 
    </div>

</div>

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

</body>
</html>

Loading ...

Related Results :

  1. First Page in Bootstrap
Note :
  • Related Posts are generally User Blog posts.
  • or Other tutorials from other networks of w3clan.com.
  • Any registered user can create related posts based on search term tags.

About the Author