Layout Documentation

Bootstrap Grid Layout

At the core of our layouts is the bootstrap grid.

Designers: Download the grid layout Sketch file.

Content Width

Responsive web design is a collection of practices to ensure the flexibility and fluidity of web content. With that in mind, it’s essential that web content remains fluid within its container.

CSS breakpoints are points where website content responds according to the device width. This allows us to create varying column widths within our grid. On a large screen, a content block may cover a quarter of the screen, while on a small screen it may cover half the screen.

During the design phase, it’s important to not add a width value to content to achieve a specific aesthetic layout (such as a section header with associated intro text). Capping the width of content to a specific width value that is less than the containing width of its intended wrapper can result in unwanted or irregular whitespace.

Padding and Margins

When designing layouts, it is important to be conscious of each of these. Using consistent padding, margins and spacing values creates a sense of cohesiveness between the elements.


An element’s padding area is the space between its content and its border. Padding creates extra space within an element.


An element’s margin area is the space beyond its padding and border. Margins create extra space around an element.

This website provides highlights of the Hess Corporation benefits plans and programs for 2024. If there is any discrepancy between the information provided on this website and the official plan documents, the official plan documents will govern. Hess reserves the right to amend or terminate the plans at its discretion at any time.