Container

A simple container to center your content horizontally.

To use a Bulma Container component in your application, you need to import the BulmaContainerModule by adding the following lines to your app.module.ts file.

import { BulmaContainerModule } from 'ngx-bulma';

@NgModule({
  imports: [BulmaContainerModule]
  // ...
})
export class AppModule {}

Basic

To display the Container component in your Angular application, add the buContainer directive to a <div> tag.

Directive	Description
`buContainer`	For initializing Container in your HTML

Property	Description
`type`	Depending on the breakpoints of the screen you can set the value to `fluid`, `widescreen` or `fullhd`

Default container

<div buContainer>
  <div class="notification">
    This container is <strong>centered</strong> on desktop.
  </div>
</div>

This container is centered on desktop.

Fluid container

<div buContainer type="fluid">
  <div class="notification">
    This container is <strong>fluid</strong>: it will have a '32px' gap on either side, on any
    viewport size.
  </div>
</div>

This container is fluid: it will have a 32px gap on either side, on any viewport size.

Breakpoint containers

<div buContainer type="widescreen">
  <div class="notification">
    This container is <strong>fullwidth</strong> <em>until</em> the
    <code>$widescreen</code> breakpoint.
  </div>
</div>

This container is fullwidth until the $widescreen breakpoint.

<div buContainer type="fullhd">
  <div class="notification">
    This container is <strong>fullwidth </strong> <em>until</em> the <code>$fullhd</code>breakpoint.
  </div>
</div>

This container is fullwidth until the $fullhd breakpoint.