All for Joomla All for Webmasters

First Bootstrap Example

Add the HTML 5 doctype: Bootstrap uses HTML elements and CSS properties, so you have to add the HTML 5 doctype at the beginning of the page with lang attribute and correct character set.


  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head><meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
  4. <title>Any title</title>
  5. </head>
  6. <body>
  7. //write code
  8. </body>
  9. </html>

Bootstrap is mobile friendly: Bootstrap 3 is designed to be responsive to mobile devices.

Mobile-first styles are part of the core framework of Bootstrap.You have to add the following <meta> tag inside the <head> element for proper rendering and touch zooming:

  1. <meta name=“viewport” content=“width=device-width, initial-scale=1”>

Note: The “width=device-width” part is used to set the width of the page to follow the screen-width of the device (vary according to the devices).

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

Containers: container is used to wrap the 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.

Note: A container cannot be placed inside a container.

First Bootstrap Example (with responsive fixed width container)

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>This is a Bootstrap example</title>
  5.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  6.   <link rel=“stylesheet” href=“”>
  7. </head>
  8. <body>
  9. <div class=“container”>
  10.   <h1> First Bootstrap web page</h1>
  11.   <p>Write your text here..</p>
  12. </div>
  13.   <script src=“”></script>
  14.   <script src=“”></script>
  15. </body>
  16. </html>
submit to reddit

Leave a Reply