Overview

Preface

This is an adaptation of Bootstrap made for usage in the Webflow environment. Adds some functionalities and base classes that give more consistency to Webflow builds. Some Bootstrap functionalities are omitted, some are already packaged within Webflow.

In this document I will use the following text styles to refer to various aspects within the webflow environment. Webflow Elements: example. Native Webflow classes: example. Custom Webflow classes: example.

Note: Due to differences in language, please be aware that some special actions must be taken to utilize this. For example. Bootstrap uses row which is not a default element within Webflow, instead we use a div and the class row.

Things to Consider

Try designing with the base classes in mind. Ideally set combo classes before overriding initial classes, think: "Am I creating a global element or am I making a variation on a global element" for choosing between editing a base class vs creating a new combo class with the base. Try to set all your global styles at the beginning of a project to avoid conflicts down-the-line.

To make the development process easier, generally work with the mentality of adding vertical space below instead of above when possible, however this will not apply when adding the top-most section of a page. For example, all sections have a base of 5rem applied to the bottom margin, whereas the hero section has 5rem applied to the top as well to add section spacing below the navigation.

Normalize.css

For improved cross-browser rendering, we use Normalize.css, a project by Nicolas Gallagher and Jonathan Neal. This code is in the <header> section of the Custom Code tab on Project Settings.

Layout

Stacking Order

section

| container
| | row
| | | col
| | | | [Element goes here]

Sections

To create a new section, drag in the default Webflow section element. Then add the class below that fits the purpose of the section.

Base Classes

Use class section
for body sections without backgrounds - these have 5rem margin-bottom which can be adjusted per site.

Use class section-bg for body sections with backgrounds

Use class section-hero for the top-most section of a page - as other sections have 5rem margin-bottom, a hero section also has 5rem margin-top applied.

Use class section-hero-bg for the top-most section of a page - as other sections have 5rem margin-bottom, a hero section also has 5rem margin-top applied.

section-fh

section-fh-bg

Containers

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).While containers can be nested, most layouts do not require a nested container.

Use class container for responsive fixed width container

Use class container-fluid for full-width container, spanning viewport.

Z-Index

Still need to set up the referenced z-index compnents

Several Bootstrap components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 100+ or 500+.We don’t encourage customization of these individual values; should you change one, you likely need to change them all.

zindex-dropdown: 1000
zindex-sticky: 1020
zindex-fixed: 1030
zindex-modal-backdrop: 1040
zindex-modal: 1050
zindex-popover: 1060
zindex-tooltip: 1070

To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit z-index values of 1, 2, and 3 for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher z-index value to show their border over the sibling elements.

Grid System

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

• Rows must be placed within a container (fixed-width) or container-fluid (full-width) for proper alignment and padding.
• Use row to create horizontal groups of columns.
• To create a row, drag in a div and add class row.
• Content should be placed within columns, and only columns may be immediate children of rows.
• Predefined grid classes like row and col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on rows.
• The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
• Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three col-xs-4.
• If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
• Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a col-lg-* class is not present.