Getting Started with Bootstrap


Getting Started with Bootstrap

Here, you will learn how easy it is to create a web page using Bootstrap. Before begin, be sure to have a code editor and some working knowledge of HTML and CSS.


Downloading the Bootstrap Files

There are two versions available for download, compiled Bootstrap and Bootstrap source files. You can download Bootstrap files from here.

Compiled download contain compiled and minified version of CSS and JavaScript files as well as icons in font format for faster and easier web development, while the source download contain original source files for all CSS and JavaScript, along with a local copy of the docs.

For the purpose of better understanding we'll focus on the compiled Bootstrap files. It saves your time because you don't have to bother every time including separate files for individual functionality. It will also increase the performance of your website and saves the precious bandwidth when you decided to move your site on production because of lesser HTTP request and download size since files are compiled and minified.


Understanding the File Structure

Once downloaded the compiled Bootstrap, unzip the compressed folder to see the structure. You'll find the following file structure and contents.

bootstrap/
|-- css/
|   |-- bootstrap.css
|   |-- bootstrap.min.css
|   |-- bootstrap-theme.css
|   |-- bootstrap-theme.min.css
|--js/
|   |-- bootstrap.js
|   |-- bootstrap.min.js
|-- fonts/
|   |-- glyphicons-halflings-regular.eot
|   |-- glyphicons-halflings-regular.svg
|   |-- glyphicons-halflings-regular.ttf
|   |-- glyphicons-halflings-regular.woff

As you can see compiled version of Bootstrap provides compiled CSS and JS files (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*).

There are four font files (glyphicons-halflings-regular.*) inside the fonts folder. These fonts file includes 200 icons from the Glyphicon Halflings set.


Create First Web Page With Bootstrap

1. Add the HTML5 doctype

Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype.

<!DOCTYPE html>
<html lang="en">
   <head>
    <meta charset="utf-8">
   </head>
</html>

2. Bootstrap 3 is mobile-first

Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework.

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.

here are two container classes to choose from:

  • 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: Containers are not nestable (you cannot put a container inside another container).


Example

<!DOCTYPE html>
<html>
  <head>
	<meta charset="UTF-8">
	<title>Basic Bootstrap Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" >
  </head>
  <body>
	<h1>Hello, world!</h1>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
</html>
Output

Hello World


Saving the file

Now save the file on your desktop as "mywebiste.html".

Note

It is important that the extension ".html" is specified - some text editors, such as Notepad, will automatically save it as ".txt" otherwise.

 

To open the file in a browser. Navigate to your file then double click on it. It will open in your default Web browser. (If it does not, open your browser and drag the file to it.)


Share this article on