Dream Host (VPS)

Virtual Private Servers (VPS)

dreamhost website hosting
dream host hosting buy button
Home

Sales

Assessment
Thought Map
Project Plan

Wireframe
Mockup
Design
Layout
Templates
Color
Typography
Content

Boilerplate
Resources
HTML
CSS
JavaScript
Node js

Hosting

Team

Layouts

Website Grid Layouts

* Bootstrap Layout Overview * | * Bootstrap Layout Grid *
W3School Layout | W3 Navigation | Align | * BS Examples * 1
BS Grid Example 2 | Grid Examples 3
Bootstrap Examples | * Bootstrap Grid Examples * |
* Shay Howe Positioning * |

Bootstrap Containers

Container

Bootstrap Rows

Rows

Bootstrap Grid Examples

Grid Examples

Bootstrap Navigation

Bootstrap Nav Bar |

Foundation Zurb

Foundation Grid | Foundation Templates | Foundation Blocks | Foundation Grid
W3Schools Grid| W3Schools Flexbox |
Flexbox Grid | Flexbox

Bootstrap Containers and Columns

2 columns = 6 grid
2 columns = 6 grid
2 columns = 6 grid
2 columns = 6 grid
2 columns = 6 grid
2 columns = 6 grid

Three equal columns

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

.col-md-4
.col-md-4
.col-md-4

Mixed: mobile, tablet, and desktop

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

Hint: ...View Page Source

Three equal columns

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

.col-md-4
.col-md-4
.col-md-4

Layouts Bootstrap, Foundation, GCC Grid,

Bootstrap Examples | * Bootstrap Grid Examples * |
Foundation Grid | Foundation Blocks | Legacy Foundation Grid
W3Schools Grid | W3Schools Flexbox |
Flexbox Grid | Flexbox
Viewport |

Bootstrap Containers and Columns

2 columns = 6 grid
2 columns = 6 grid
2 columns = 6 grid
2 columns = 6 grid
2 columns = 6 grid
2 columns = 6 grid

Three equal columns

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

.col-md-4
.col-md-4
.col-md-4

Mixed: mobile, tablet, and desktop

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

Hint: ...View Page Source

Three equal columns

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

.col-md-4
.col-md-4
.col-md-4

CSS Flexbox

W3 Schools CSS Flexbox Layout Grid

Other...

W3 Opacity | CSS Internal, External, Inline | Breadcrumbs CSS Animation | Viewport |

Templates

BS Templates |
Responsive Design 3 |
CSS Float |

CSS Style Guide

* Style Guide Boilerplate * | CSS Style Guide 1 | Google Style Guide | BEM Methodology | BEM Quick start | Get BEM | BEM CSS Tricks |