Content Bars

Many times on a page you need to break up content as the use scrolls down to either highlight things, segment topics, or provide a heading for sections. We've created a bar class that provides some default margin and padding to make this simple to implement. Bars should be placed outside of any container and generally have at least a container within them. The can be stacked and the margin issues are taken care of automatically.

Colored Bars

Most of the times a bar will have a background color which is ideal to differentiate the bar from surrounding content. As you can see in this example, there is added margin above the bar and added padding within the bar for the content to be properly spaced. The top margin of the first heading should be removed using the mt-0 class as indicated in the headings guide.

Stacked Bars

When bars are stacked, margin between the bars is removed so they sit flush with each other.

White Bars

Bars can be white, though depending on the surrounding page content, you may need to set the margin or padding to 0. It's often enough to simply add margin to a container or a div, as it has the same effect as a white bar.

Bar Uses

Bars can contain simple text content which is a great way to highlight a section of text on a page for such things as a call to action, or a quote, or to highlight some amazing thing. However, bars are also great to make things stand out like cards or video. Placing cards or a video inside a bar help separate that content and stand out.

Sectional Heading

Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Card Heading

Image Bars

Images can be used in bars, but those would use the normal jumbotron/banners code with the bar class added.

Bar Buttons

If you really want to have your call to action stand out, placing a button inside a bar and adding the btn-bar class will give it a unique style with more weight than a normal button.

Do The Thing

Last Child Bar

If the last element on your page is a bar, you need to set the bottom margin to 0 with the mb-0 class so that the bar sits flush against the footer.