Getting Started With Bootstrap

Vipin Kumar
7y
37.4k
0
14

Article

Introduction

In this tutorial you will learn how to create a basic Bootstrap template using the Twitter Bootstrap v3.2.0 .

Here, you will learn how easy it is to create a web page using Twitter Bootstrap. Before beginning, be sure to have a code editor (Notepad, Dreamweaver and so on) and some working knowledge of HTML and CSS.

What Bootstrap is

Twitter Bootstrap is a very popular and powerful front-end framework currently. It is self-generated for faster and easier web development. Twitter Bootstrap comes prepared with HTML, CSS and JavaScript for various web and user interface components. Bootstrap provides iconography, dropdowns, navigation, alerts, popovers and much more. This is covered in detail in the section Layout Components.

Why to use Bootstrap

Mobile First Approach: Since Bootstrap 3, the framework consists of Mobile first styles throughout the entire library instead of in separate files.
Browser Support: It is supported by all popular browsers.
Easy to Get Started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap.
Responsive Design: Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles.
Provides a clean and uniform solution for building an interface for developers.
It contains beautiful and functional built-in components that are easy to customize. It also provides web based customization.

Downloading the Bootstrap Files

You can download Bootstrap files from here. Compiled download contain compiled and minified CSS, JavaScript and fonts.

Understanding the File Structure

After downloading the Bootstrap files, unzip the compressed folder to see the structure. You'll find the following file structure and contents.

You can see that the compiled version of Bootstrap provides compiled CSS and JavaScript files (bootstrap.*), as well as compiled and minified CSS and JavaScript (bootstrap.min.*).

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

Creating Your First Web Page with Twitter Bootstrap

You have learned the structure and the purposes of Bootstrap files, now we'll create a basic Bootstrap template that includes everything we specified in the file structure. You will have made an HTML file that displays "Welcome Bootstrap" message in your web browser.

Step 1: Creating a Basic HTML File

Open up your code editor and create a new HTML file. Start with an empty window and type the following code:

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basic HTML</title>
</head>
<body>
<h1>Welcome Bootstrap</h1>
</body>
</html>

Result:

Step 2: Making this HTML File a Bootstrapped Template

To make this HTML file a Bootstrapped template, just include the appropriate Bootstrap CSS and JavaScript files.

Note: You should include JavaScript files at the bottom of the page; before closing the <body> tag (in other words </body>) to improve the performance of your web pages.

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML with Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<h1>Welcome Bootstrap</h1>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

Result:

Bootstrap Grid System

The Twitter Bootstrap grid system provides the fastest and easiest way to create layouts of web pages. It introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or view port size increases. It includes predefined grid classes for making grid layouts for various types of devices, like phones, tablets, desktop, and so on, as well as powerful mixings for generating more semantic layouts.

The Grid Sizes

It has four tiers of classes xs, sm, md and lg. You can use any combination of these classes to create more dynamic and flexible layouts. The following is the breakdown of the various sizes of these classes.

Classes	Devices	Size
.col-xs-*	Extra Small Phones	Less than 768px
.col-sm-*	Small Devices Tablets	768px and Up
.col-md-*	Medium Devices Desktops	992px and Up
.col-lg-*	Large Devices Large Desktops	1200px and Up

Structure of Bootstrap Grid Layout

Working of Bootstrap Grid System

Grid systems are used for creating page layouts through a series of rows and columns . Here's how the Bootstrap grid system works:

Rows must be placed within a .container and .container-fluid class for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns and only columns may be immediate children of rows.
Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixings can also be used for more semantic layouts.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

Create Layouts with Bootstrap Grid System

In the preceding image there are 4 rows. The first row contains 12 columns. The second row contains 4 columns. The third row contains 3 columns. And the last row contains 2 columns. Now we create a HTML file for the above grid image structure.

HTML Code

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Grid System</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h3>First Row</h3>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
</div>
<div class="row">
<h3>Second Row</h3>
<div class="col-md-3">3</div>
<div class="col-md-3">3</div>
<div class="col-md-3">3</div>
<div class="col-md-3">3</div>
</div>
<div class="row">
<h3>Third Row</h3>
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
<div class="col-md-4">4</div>
</div>
<div class="row">
<h3>Fourth Row</h3>
<div class="col-md-6">6</div>
<div class="col-md-6">6</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

Result:

Now it's time to customize our layout for other devices. For other device's layout we use the sm, xs and lg class tier depending on the device. For a tablet we will use the same design layout structure so we use the .col-sm-* class as well as .col-md-*, for example:

<div class="col-md-1">1</div>

Is changed to:

<div class="col-md-1 col-sm-1">1</div>

Now we have customized our layout for extra small devices. For extra small devices we use the .col-xs-* class. In a tablet and a desktop device we have a total of 21 columns. Now we break the grid system as:

In the preceding image there are 10 rows. Now we create a HTML file for the above grid image structure.

HTML Code

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bootstrap Grid System</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h3>First Row</h3>
<div class="col-md-1 col-sm-1 col-xs-3">1</div>
<div class="col-md-1 col-sm-1 col-xs-3">1</div>
<div class="col-md-1 col-sm-1 col-xs-3">1</div>
<div class="col-md-1 col-sm-1 col-xs-3">1</div>
<div class="col-md-1 col-sm-1 col-xs-3">1</div>
<div class="col-md-1 col-sm-1 col-xs-3">1</div>
<div class="col-md-1 col-sm-1 col-xs-3">1</div>
<div class="col-md-1 col-sm-1 col-xs-3">1</div>
<div class="col-md-1 col-sm-1 col-xs-3">1</div>
<div class="col-md-1 col-sm-1 col-xs-3">1</div>
<div class="col-md-1 col-sm-1 col-xs-3">1</div>
<div class="col-md-1 col-sm-1 col-xs-3">1</div>
</div>
<div class="row">
<h3>Second Row</h3>
<div class="col-md-3 col-sm-3 col-xs-6">3</div>
<div class="col-md-3 col-sm-3 col-xs-6">3</div>
<div class="col-md-3 col-sm-3 col-xs-6">3</div>
<div class="col-md-3 col-sm-3 col-xs-6">3</div>
</div>
<div class="row">
<h3>Third Row</h3>
<div class="col-md-4 col-sm-4 col-xs-12">4</div>
<div class="col-md-4 col-sm-4 col-xs-12">4</div>
<div class="col-md-4 col-sm-4 col-xs-12">4</div>
</div>
<div class="row">
<h3>Fourth Row</h3>
<div class="col-md-6 col-sm-6 col-xs-12">6</div>
<div class="col-md-6 col-sm-6 col-xs-12">6</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

Result:

Similarly you can customize the layout for a larger device like a large desktop screen. For a larger device you can used .col-lg-* classes.

In the grid system of bootstrap, you notice that every row has an equal number of classes . You can see that in the following image:

Twitter Bootstrap Responsive Utilities Classes

You can use the following responsive classes to enable the element's visibility depending on the device screen sizes.

Class	Description
.visible-xs-*	Visible the elements only on extra small devices having screen width less than 768px. Hidden on others.
.visible-sm-*	Visible the elements only on small devices having screen width greater than or equal to 768px. Hidden on others.
.visible-md-*	Visible the elements only on medium devices having screen width greater than or equal to 992px. Hidden on others.
.visible-lg-*	Visible the elements only on larger devices having screen width greater than or equal to 1200px. Hidden on others.

Note: You can also mix these classes to make the elements visible on multiple devices.

HTML Code

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<p class="visible-xs-block">This paragraph is visible only on extra small devices.</p>
<p class="visible-sm-block">This paragraph is visible only on small devices.</p>
<p class="visible-md-block">This paragraph is visible only on medium devices.</p>
<p class="visible-lg-block">This paragraph is visible only on large devices.</p>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

Similarly you can use these hidden utility classes to hide the elements depending on the devices.

Class	Description
.hidden-xs-*	Hide the elements only on extra small devices having screen width less than 768px. Visible on others.
.hidden-sm-*	Hide the elements only on small devices having screen width greater than or equal to 768px. Visible on others
.hidden-md-*	Hide the elements only on medium devices having screen width greater than or equal to 992px. Visible on others.
.hidden-lg-*	Hide the elements only on larger devices having screen width greater than or equal to 1200px. Visible on others.

Code:

<p class="hidden-xs">This paragraph is hidden only on extra small devices.</p>
<p class="hidden-sm">This paragraph is hidden only on small devices.</p>
<p class="hidden-md">This paragraph is hidden only on medium devices.</p>
<p class="hidden-lg">This paragraph is hidden only on large devices.</p>

Creating Fixed Layout with Bootstrap

With Bootstrap you can create layouts of web pages based on a fixed number of pixels. To create the fixed yet responsive layout you should start the container with the .container class. Then create the row with the .row class to wrap the horizontal groups of columns. Rows must be placed within a container for proper alignment and padding. Further columns can be created within rows using the predefined grid classes like .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* where * represents a grid number.

The following code creates a fixed width responsive layout that is 970px wide on a medium device like desktop and laptop having screen width ≥992px and 1170px wide on large devices like large desktops having screen width ≥1200px. However the layout width will be automatically calculated for devices that has a screen width <768px like tablets and cell phones.

HTML Code

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Layout with Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Fixed Layout with Bootstrap </h1>
<p>With Bootstrap you can create layouts of web pages based on fixed number of pixels.
To create the fixed yet responsive layout you should starts container with the .container class.
After that create row with the .row class to wrap the horizontal groups of columns.
Rows must be placed within a container for proper alignment and padding. Further columns can be create within rows
using the predefined grid classes like .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* where * represent grid number.</p>
</div>
<div class="row">
<div class="col-sm-4">
<h2>HTML</h2>
<p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will
help you understand the basics of HTML, so that you can create your own web pages or website.</p>
</div>
<div class="col-sm-4">
<h2>CSS</h2>
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will
help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
</div>
<div class="col-sm-4">
<h2>Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap
tutorial section will help you learn the techniques of Bootstrap so that you can quickly create your own website.</p>
</div>
</div>
<hr>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

Result:

On a tablet, desktop and larger device:

Mobile Device

Creating Fluid Layout with Bootstrap

With Bootstrap you can create a Fluid layout. For creating the fluid layout you can use the class .container-fluid to utilize the 100% width of the view port. The class .container-fluid simply applies the horizontal margin with the value auto and left and right padding of 15px on the element to offset the left and right margin of -15px used on the .row.

The following code creates a fluid layout that covers the entire width of the screen.

HTML Code

<div class="container-fluid">
<div class="jumbotron">
<h1>Fluid Layout with Bootstrap </h1>
<p>With Bootstrap you can create Fluid layout. For Creating the fluid layout you can use the class .container-fluid
in order to utilize the 100% width of view port. The class .container-fluid simply applies the horizontal margin with the
value auto and left and right padding of 15px on element to offset the left and right margin of -15px used on .row.</p>
</div>
<div class="row">
<div class="col-sm-4">
<h2>HTML</h2>
<p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you
understand the basics of HTML, so that you can create your own web pages or website.</p>
</div>
<div class="col-sm-4">
<h2>CSS</h2>
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn
the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
</div>
<div class="col-sm-4">
<h2>Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap tutorial
section will help you learn the techniques of Bootstrap so that you can quickly create your own website.</p>
</div>
</div>
<hr>
</div>

Creating Responsive Layout with Bootstrap

Responsive web design is a process of designing and building websites to provide better accessibility and an optimal viewing experience for the user. Responsive layouts automatically adjust and adapt to any device screen size, whether it is a desktop, a laptop, a tablet, or a mobile phone.

With the new Twitter Bootstrap 3 mobile first grid system creating the responsive and mobile friendly websites has become much easier. As opposed to previous versions you don't need to include any additional style sheet to enable the responsive feature.

HTML Code

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive Layout with Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1>Responsive Layout with Bootstrap </h1>
<p>Responsive web design is a process of designing and building websites to provide better accessibility
and optimal viewing experience to the user.Responsive layouts automatically adjust and adapts to any device screen size,
whether it is a desktop, a laptop, a tablet, or a mobile phone.</p>
</div>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-2">
<h2>Column-1</h2>
<p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help
you understand the basics of HTML, so that you can create your own web pages or website.</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-2">
<h2>Column-2</h2>
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you
learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4 col-lg-2">
<h2>Column-3</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap
tutorial section will help you learn the techniques of Bootstrap so that you can quickly create your own website.</p>
</div>
<div class="clearfix visible-md-block"></div>
<div class="col-sm-6 col-md-4 col-lg-2">
<h2>Column-4</h2>
<p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will
help you understand the basics of HTML, so that you can create your own web pages or website.</p>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-sm-6 col-md-4 col-lg-2">
<h2>Column-5</h2>
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you
learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-2">
<h2>Column-6</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap
tutorial section will help you learn the techniques of Bootstrap so that you can quickly create your own website.</p>
</div>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

In the HTML above you can see the use of 6 columns for larger devices like desktops, 3 columns for medium devices like laptops, 2 columns for small devices like tablets and 1 columns for extra small devices like phones. For clarity the float property from .col-* classes we can used the .clearfix class depending on conditions using the .visible-* class.

Result:

Large Device (Desktop)

Medium Device (Laptop)

Small Device (Tablet)

Extra Small Device (Phone)

Summary

This article explained the basics of Bootstrap, installing Bootstrap in your HTML page, Bootstrap Grip and Layout of Bootstrap. In the further article you will learn styling and formatting of text content, table, form, list, image and icons in Bootstrap. Thanks for reading.

Further Readings

Continue to Getting Started with Bootstrap Part 2 >>