BB Container

CSS utility classes for creating responsive containers with consistent padding and max-width constraints

Usage

Use BB Container classes to create responsive layout containers with appropriate padding and max-width constraints.


                                                        
                                                        
                                                            <!-- Basic container usage -->
                                                        <div class="container">
                                                            <!-- Content with responsive padding and max-width -->
                                                        </div>
                                                        
                                                        <div class="container-fluid">
                                                            <!-- Full-width container with responsive padding -->
                                                        </div>

Available classes

Standard Bootstrap containers

container: Responsive container with max-width at each breakpoint and custom padding

container-fluid: Full-width container with responsive padding

container-sm: Container with small breakpoint max-width (540px)

container-md: Container with medium breakpoint max-width (720px)

container-lg: Container with large breakpoint max-width (960px)

container-xl: Container with extra-large breakpoint max-width (1140px)

Basic layout container example


                                                        
                                                        
                                                            <div class="container">
                                                            <header>
                                                                <h1>Page Title</h1>
                                                            </header>
                                                            <main>
                                                                <p>Main content with responsive padding and max-width.</p>
                                                            </main>
                                                        </div>

Full-width container example


                                                        
                                                        
                                                            <div class="container-fluid">
                                                            <div class="hero-section">
                                                                <h2>Full-width hero section</h2>
                                                                <p>This container spans the full width but maintains responsive padding.</p>
                                                            </div>
                                                        </div>

Fixed width containers

container--fixed-width: Container with fixed max-width (840px)

container--fixed-width-small: Container with small fixed max-width (600px)

container--fixed-width-large: Container with large fixed max-width (900px)


                                                        
                                                        
                                                            <!-- Standard fixed width -->
                                                        <div class="container--fixed-width">
                                                          <div class="form-container">
                                                            <h3>Login Form</h3>
                                                            <p>This container has a fixed 840px max-width.</p>
                                                          </div>
                                                        </div>
                                                        
                                                        <!-- Small fixed width -->
                                                        <div class="container--fixed-width-small">
                                                          <div class="modal-content">
                                                            <h3>Modal Dialog</h3>
                                                            <p>This container has a smaller 600px max-width for compact layouts.</p>
                                                          </div>
                                                        </div>
                                                        
                                                        <!-- Large fixed width -->
                                                        <div class="container--fixed-width-large">
                                                          <div class="dashboard">
                                                            <h3>Dashboard</h3>
                                                            <p>This container has a larger 900px max-width for data-heavy layouts.</p>
                                                          </div>
                                                        </div>

Special modifiers

container--drag-up: Container with negative top margin for dragging state


                                                        
                                                        
                                                            <!-- Container with drag-up modifier -->
                                                        <div class="container container--drag-up">
                                                            <div class="draggable-content">
                                                                <p>Container with negative top margin for drag interactions.</p>
                                                            </div>
                                                        </div>

Responsive behavior

The container class provides responsive padding:

Large screens lg+): Uses $container-padding-x-lg horizontal padding

Medium screens (md-lg): Uses $container-padding-x-md horizontal padding

Small screens (below md): No padding (0)

Container fluid class

The container-fluid class provides responsive padding:

Large screens: Uses $container-padding-x-lg horizontal padding

Small screens (below md): Uses $container-padding-x-sm horizontal padding

Max-width breakpoints

All containers use responsive max-widths:

sm (576px+): 540px max-width

md (768px+): 720px max-width

lg (992px+): 960px max-width

xl (1200px+): 1140px max-width

Customization variables

The container system uses several SCSS variables that can be customized:

Padding variables

$container-padding-x-lg: Horizontal padding for large screens

$container-padding-y-lg: Vertical padding for large screens

$container-padding-x-md: Horizontal padding for medium screens

$container-padding-y-md: Vertical padding for medium screens

$container-padding-x-sm: Horizontal padding for small screens

Max-width variables

$container-fixed-width-max-width: Standard fixed container width (840px)

$container-fixed-width-small-max-width: Small fixed container width (600px)

$container-fixed-width-large-max-width: Large fixed container width (900px)