• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Containers

← Previous Next →

In Bootstrap 4, containers are the fundamental building blocks used to structure and organize content on a webpage. A container acts as a wrapper for page elements, providing proper alignment, padding, and responsiveness. Every layout, whether it’s a simple form, grid, or complex webpage, begins with a container.

Bootstrap 4 provides two main types of containers: .container and .container-fluid. Both serve to hold page content but differ in width behavior and responsiveness. Understanding these containers is essential to build responsive and well-aligned web layouts.

Types of Bootstrap 4 Containers

1. .container – Fixed Width Container

The .container class provides a fixed-width container that adjusts its width based on the screen size. It has predefined breakpoints that make it responsive while keeping the content centered.

Example:

<div class="container">
  <h1 class="text-center">Fixed Container Example</h1>
  <p>This container adjusts its width based on the screen size but remains centered.</p>
</div>

  • On small screens, the container width is narrower to fit the viewport.

  • On medium and large screens, the width increases based on breakpoints.

  • It automatically includes 15px padding on both left and right sides to prevent content from touching the edges.

This container is ideal for layouts where you want consistent content alignment and readable text widths.

2. .container-fluid – Full Width Container

The .container-fluid class provides a full-width container that always spans the entire width of the viewport, regardless of the screen size.

Example:

<div class="container-fluid bg-light p-4">
  <h1>Full Width Container</h1>
  <p>This container stretches across the entire viewport width.</p>
</div>

  • Use .container-fluid when you want sections to occupy full screen width, such as hero banners, headers, or background sections.

  • You can combine it with Bootstrap 4 grid classes to maintain responsive column layouts inside a full-width section.

Responsive Containers in Bootstrap 4

Bootstrap 4 allows you to create breakpoint-specific containers using classes like:

  • .container-sm → Up to small devices

  • .container-md → Up to medium devices

  • .container-lg → Up to large devices

  • .container-xl → Up to extra-large devices

Example:

<div class="container-md bg-success text-white p-4">
  <h2>Medium Container Example</h2>
  <p>This container only becomes fixed-width at the medium breakpoint and above.</p>
</div>

These responsive containers are helpful when you want to control layout width for specific screen sizes while keeping full flexibility on others.

How Containers Work with the Grid System

Containers in Bootstrap 4 are tightly integrated with the grid system, which divides the layout into 12 columns. A row (.row) must always be placed inside a container to align columns correctly and provide padding.

Example:

<div class="container">
  <div class="row">
    <div class="col-md-4 bg-primary text-white p-3">Column 1</div>
    <div class="col-md-4 bg-success text-white p-3">Column 2</div>
    <div class="col-md-4 bg-warning text-white p-3">Column 3</div>
  </div>
</div>

  • .container ensures the content remains centered and aligned.

  • .row removes default padding on columns.

  • .col-md-4 divides the row into three equal-width columns for medium devices and above.

Without a container, the grid system may break, and columns may touch the edges of the screen or misalign.

Using Containers for Layout Sections

1. Hero Section

A hero section at the top of a webpage often uses a full-width container with a background color or image.

<div class="container-fluid bg-primary text-white p-5">
  <h1 class="display-4">Welcome to Bootstrap 4</h1>
  <p class="lead">This is a full-width hero section using .container-fluid.</p>
</div>

2. Content Sections

For main content like articles, forms, or lists, a fixed-width container is preferable. It ensures that the text remains readable and visually appealing.

<div class="container mt-5">
  <h2>About Bootstrap 4</h2>
  <p>Using .container ensures content stays aligned and centered on the page.</p>
</div>

3. Combining Containers

You can combine .container and .container-fluid in a single page. For example, use .container-fluid for a header and .container for the main content to maintain readability.

Advantages of Using Bootstrap 4 Containers

  1. Responsive alignment: Containers automatically adjust width and padding for different devices.

  2. Grid integration: Provides a base for rows and columns in the grid system.

  3. Consistent spacing: Ensures content never touches the edges of the screen.

  4. Flexible layout options: Can switch between .container and .container-fluid depending on design needs.

  5. Easy sectioning: Allows you to separate headers, content, and footers with consistent structure.

Best Practices for Bootstrap 4 Containers

  • Always wrap .row elements inside a container to avoid alignment issues.

  • Use .container for main content to maintain readability.

  • Use .container-fluid for full-width sections, backgrounds, or banners.

  • Combine responsive container classes (.container-md, .container-lg) for better control over breakpoints.

  • Keep consistent padding and spacing by using Bootstrap utilities like .p-3, .m-4, or .pt-5.

Summary of the Tutorial

In this tutorial, you learned about Bootstrap 4 Containers and their importance in structuring web layouts. You explored the difference between .container (fixed width) and .container-fluid (full width), as well as responsive containers like .container-md and .container-lg. You also saw how containers work with the Bootstrap 4 grid system and how they help create hero sections, content areas, and consistent layouts. Proper use of containers ensures your design remains responsive, aligned, and visually balanced across all devices.

Practice Questions

  1. Create a fixed-width container using .container and add a heading and paragraph inside it.

  2. Create a full-width section using .container-fluid with a background color and centered text.

  3. Build a responsive container that becomes fixed-width only on medium devices using .container-md.

  4. Combine a .container-fluid for the header and a .container for the main content.

  5. Place a .row inside a .container and add three equal-width columns using .col-md-4.

  6. Add padding and margin to a container using Bootstrap 4 spacing utilities.

  7. Create a hero section using .container-fluid with a large heading and descriptive paragraph.

  8. Create two content sections — one using .container and one using .container-fluid — and compare their widths.

  9. Build a responsive layout with multiple rows inside a .container, ensuring columns stack on small screens.

  10. Create a full-width footer section using .container-fluid and add centered text and links.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top