Hi James

Here’s a quick introduction to how the Bootstrap CSS framework works. Using a framework like Bootstrap is standard in the industry and this will give us superior results in comparison to tables.

Columns will need to be wrapped in a div with class “row”. Columns are then nested divs within the row. The screen is separated into 12 columns (hence the number in the “col-md-” classes). “md” means medium – in this case, we are specifying two columns that will take up half the screen (6 of 12 for 1/2 the total) at a small (786px) screen size. The numbers can be changed, as can the screen sizes (xs, sm, md, lg). Any screen sizes larger will take the next size down (ie: two columns on sm, md, lg). Any sizes below without a column specified will default to fullscreen.

Try resizing your browser or viewing on mobile to see how the grid reacts.

column one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, arcu non placerat semper, sapien metus tempor nunc, in tincidunt lorem nisi ac felis. Cras mauris sem, eleifend euismod leo in, vehicula suscipit urna. In mi mauris, mollis convallis finibus vitae, convallis eget mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris pharetra interdum ex, sit amet pellentesque urna sollicitudin et. Sed laoreet pharetra mi, at faucibus erat lobortis vitae. Sed quis congue felis. In dapibus, dolor sit amet dictum eleifend, odio felis convallis elit, nec ultricies dui mauris ut enim. Donec dapibus velit sed massa faucibus, ut mollis lorem porta. Ut enim risus, vulputate sit amet aliquet id, iaculis et felis. Maecenas vehicula arcu at nibh sollicitudin, id consequat odio ultrices. Vivamus pellentesque vehicula lorem sit amet fringilla. In sodales aliquam nibh id blandit. Suspendisse potenti.

column two

Sed eu sagittis nisi. Pellentesque commodo, lacus in vehicula ultrices, mauris tellus tempor est, dictum ultricies libero orci vel tortor. Nullam finibus laoreet lectus. In sed tempor erat. Fusce ultrices eget dolor suscipit auctor. Curabitur et hendrerit ligula, ut scelerisque nunc. Nullam varius metus et mattis laoreet. Maecenas congue urna sit amet turpis pellentesque gravida. Nulla viverra suscipit rhoncus. Vestibulum sed nibh velit.

You can also nest columns within other columns.

Just be sure to wrap them in another row.

Let me know if you have any questions

For more, check out the official docs: http://getbootstrap.com/css/