Bootstrap For Beginners - Part Two (Bootstrap Containers)

Shaili Dashora
7y
10.8k
0
3

Article

Introduction

I have started an article series on Bootstrap. Read the first part here,

Bootstrap For Beginners - Part One

In this article we will learn about Containers and then we will understand about Bootstrap Container classes by creating examples. So by using this we can easily create interactive, responsive website layouts.

Containers: In Bootstrap we can contain elements to wrap site contents.

There are two Bootstrap Container classes

The .container class used to provide a responsive fixed width container.
The .container-fluid class used to provide a full width container.

We have to note that we cannot put a container inside another container since it is not nestable.

Example 1: Using .container class(responsive fixed width container)

In this example we will create a simple Bootstrap page. Using ".container" class we will create fixed width container that is responsive for different devices. In this we will write some text. We will have some space on left and right side of page by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part2</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>This Is Bootstrap Page With Responsive Fixed Width Container</h1>
<p>This Container Show Output Of Using (.container) Class</p>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output

container and container-fluid class

Example 2: Using .container-fluid class (full width container)

In this example we will create same a simple Bootstrap page like Example1. Using ".container-fluid" class we will create full width container. In this we will write some text. Now we will create page by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part2</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>This Is Bootstrap Page With Full Width Container</h1>
<p>This Container Show Output Of Using (.container-fluid) Class</p>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output

In this article we focused on Bootstrap Containers. In upcoming articles we will understand all the components of Bootstrap step by step.