Bootstrap Containers

In bootstrap, containers are the basic layout elements and these are required to provide a responsive fixed-width or full-width container for the site content when we are using default grid system.

 

Following are the two container classes which available in bootstrap to wrap the site contents.

 

  • Container
  • Container-fluid

Bootstrap Container Class

In bootstrap, the .container class is useful to provide a responsive fixed width container that means the max-width will vary at each breakpoint.

 

Following is the pictorial representation of site layout when we use .container class to wrap site contents.

 

Bootstrap Container Class Example Result

 

We can use the bootstrap container class to wrap the site content in responsive fixed-width container like as shown below.

 

<div class="container">

  <!-- Content here -->

</div>

Bootstrap Container Class Example

Following is the example of using .container class to wrap the site contents in bootstrap.

 

Live Preview

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Bootstrap Container Class Example</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>

    <div class="container ">

        <h1>Hello World</h1>

        <p>Welcome to Tutlane.com</p>

        <p>Learn Bootstrap with Examples</p>

    </div>

</body>

</html>

If you observe the above example, we wrapped all the site content into div tag by specifying the container class.

Bootstrap Container-fluid Class

In bootstrap, the .container-fluid class is useful to provide the responsive full width container that means the container will be 100% wide all the time.

 

Following is the pictorial representation of site layout when we use .container-fluid class to wrap the site contents.

 

Bootstrap Container-Fluid Class Example Result

 

We can use the bootstrap container-fluid class to wrap the site content in responsive full-width container like as shown below.

 

<div class="container-fluid">

  <!-- Content here -->

</div>

Bootstrap Container-fluid Class Example

Following is the example of using .container-fluid class to wrap the site contents in bootstrap.

 

Live Preview

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Bootstrap Container Fluid Class Example</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>

    <div class="container-fluid">

        <h1>Hello World</h1>

        <p>Welcome to Tutlane.com</p>

        <p>Learn Bootstrap with Examples</p>

    </div>

</body>

</html>

If you observe the above example, we wrapped all the site content into div tag by specifying the container-fluid class.

 

This is how we can use the bootstrap containers to wrap the site content by specifying either full or fixed width using container and container-fluid classes.

Topics Covered