codeswithpankaj

Container

Bootstrap Container Tutorial - codeswithpankaj.com

In this tutorial, we'll explore how to use Bootstrap containers to create responsive and well-structured layouts for your web projects. Containers are a fundamental part of the Bootstrap grid system and help to align content and provide margins.

What is a Container?

A container in Bootstrap is used to align and pad your content. It's the most basic layout element and is required when using Bootstrap’s default grid system.

There are three types of containers in Bootstrap:

  1. .container: A fixed-width container.

  2. .container-fluid: A full-width container, spanning the entire width of the viewport.

  3. .container-{breakpoint}: A responsive container that changes its max-width at each breakpoint (e.g., .container-sm, .container-md, etc.).

Fixed Width Container

A fixed-width container is a responsive, fixed-width container that adapts to the screen size.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Width Container - codeswithpankaj.com</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>Fixed Width Container</h1>
        <p>This container has a fixed width that adapts to the screen size.</p>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Full-Width Container

A full-width container spans the entire width of the viewport, providing a fluid layout.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Full Width Container - codeswithpankaj.com</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <h1>Full Width Container</h1>
        <p>This container spans the entire width of the viewport.</p>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Responsive Containers

Responsive containers adapt to the screen size based on the breakpoint specified. You can use .container-sm, .container-md, .container-lg, and .container-xl to create containers that have different max-widths at different breakpoints.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Container - codeswithpankaj.com</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container-md">
        <h1>Responsive Container</h1>
        <p>This container adapts its width based on the screen size.</p>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Combining Containers with Grid System

Bootstrap's grid system works within containers to create responsive layouts. You can combine containers with rows and columns to create a structured and responsive design.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container with Grid System - codeswithpankaj.com</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>Container with Grid System</h1>
        <div class="row">
            <div class="col-md-4">
                <p>Column 1</p>
            </div>
            <div class="col-md-4">
                <p>Column 2</p>
            </div>
            <div class="col-md-4">
                <p>Column 3</p>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Conclusion

Bootstrap containers are essential for creating responsive layouts. They provide a flexible foundation for building structured and adaptive web designs. By understanding the different types of containers and how to use them with the grid system, you can create beautiful and responsive layouts for your web projects.

For more tutorials and examples, visit codeswithpankaj.com.

NextRow and Column

Last updated