Basic grid layout examples
A sampling of Dreamweaver snippets for building out pages using different configurations of rows and columns based on the Bootstrap grid system.
Row with one column - full width with intro
<div class="col-md-12">
Intro copy goes here
Row with one column - full width
<div class="col-md-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet turpis sed arcu dignissim, eget venenatis leo elementum.
Row with two columns equal width (6:6)
<div class="col-md-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet turpis sed arcu dignissim, eget venenatis leo elementum.
<div class="col-md-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet turpis sed arcu dignissim, eget venenatis leo elementum.
Row with two columns unequal width (8:4)
<div class="col-md-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet turpis sed arcu dignissim, eget venenatis leo elementum.
<div class="col-md-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet turpis sed arcu dignissim, eget venenatis leo elementum.
Row with three columns equal width (4:4:4)
<div class="col-md-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet turpis sed arcu dignissim, eget venenatis leo elementum.
<div class="col-md-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet turpis sed arcu dignissim, eget venenatis leo elementum.
<div class="col-md-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet turpis sed arcu dignissim, eget venenatis leo elementum.
Row with three columns unequal width (3:6:3)
<div class="col-md-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet turpis sed arcu dignissim, eget venenatis leo elementum.
<div class="col-md-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet turpis sed arcu dignissim, eget venenatis leo elementum.
<div class="col-md-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet turpis sed arcu dignissim, eget venenatis leo elementum.
Row with two columns with two nested columns (8:4) (6:6)
<div class="col-md-8">
<div class="col-md-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet turpis sed arcu dignissim, eget venenatis leo elementum.
<div class="col-md-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet turpis sed arcu dignissim, eget venenatis leo elementum.
<div class="col-md-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet turpis sed arcu dignissim, eget venenatis leo elementum.