Bootstrap + Webflow

Welcome to this idea. Introduction stuff here

credit & additional resources:
Use the visual stylesheet



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.


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.


Stacking Order


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


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.




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.


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.


Global settings

Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the textual utility classes.


h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

h1 through h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
I still need to set this up

Customized Headings


Display Headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

Display 1


Display 2


Display 3


Display 4



Make a paragraph stand out by adding lead.

Inline Text

Use class mark to add highlight to text. Example

Use class code to add code styling to text. Example

Use class small to add small styling to text. Example

Use class sup to add superscript styling to text. Example

Use class sub to add subscript styling to text. Example

Use class caption to add caption styling to text. Example

Use class lead to add caption styling to text. Example


Responsive Images

By default, images in Webflow use max-width: 100%; and height: auto; so that it scales with the parent element.

Image thumbnails

You can use img-thumbnail to give an image a rounded 1px border appearance.


Anytime you need to display a piece of content—like an image with an optional caption (paragraph with caption class added in Webflow), consider using a figure.

This consists of a parent div with the class of figure. An image with the class of figure-img, and a paragraph with the combo class caption figure-caption.

Figure Caption

Aligning the figure’s caption is easy with our text utilities. TBD


Text Link

Use class list-unstyled for list without styling.

I'm badge

I'm badge-pill

Use class list-inline when displaying a list horizontally.

Use class list-inline-item for the individual items on an inline list.

Note: Inline list items automatically have a bit of right margin. However Webflow does not offer front-end support for targetting the last item on the list. To alleviate this, set the last item as a this combo class list-inline-item last-child to the last item in the list.

Note: Webflow does not have a element for a horizonal rule. Instead we can add a div and give it the class hr.

no-gutters-row on row - no-gutters-col on column to remove column gutters

Block Quote
Block Quote Footer
Button Text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.


How to use fontawesome webfont - is html Embed with the unicode from this cheat sheet

Light (300)


Regular (400)


Solid (900)