Post
Ask Question

Bootstrap For Beginners - Part Two (Bootstrap Containers)

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 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.

  1. The .container class is used to provide a responsive fixed-width container.
  2. The .container-fluid class is 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 the ".container" class we will create a fixed-width container that is responsive for different devices. In this, we will write some text. We will have some space on the left and right side of the 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

Bootstrap

Layout

container and container-fluid class.

Container

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

In this example, we will create the same simple Bootstrap page as Example 1. Using the ".container-fluid" class we will create a full-width container. In this, we will write some text. Now we will create a 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

Output

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

Read more articles on Bootstrap.


Similar Articles