Bootstrap 3 Tutorial Pt.6 – Grid System


[ad_1]
https://i.ytimg.com/vi/xaREA2h7VmA/hqdefault.jpg



Website: http://bootstrapbay.com
Source Files: https://github.com/bootstrapbay/tutorials

In this installment of our Bootstrap 3 tutorial, we go over the Bootstrap grid system and how the responsive design works.

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Original source


10 responses to “Bootstrap 3 Tutorial Pt.6 – Grid System”

  1. Nice video … I've added a second row below… "Sections 4, 5, 6" across… in the above "section 3" will be a contact us form… but with that the entire "second" row get pushed down and out of line with row 1… Can you please shed some light on how to vertically align section 4 & 5 with 1 & 2 – with section 3 extending "into" row 2…? Nesting 4 and 5 with 1 and 2 works – but the problem with that is the form (in section 3) gets displayed on mobile devices below section "5"… want section 3 to display after "2" on mobile…

  2. Hey, I go to the point where I copy and pasted the row class twice, but it will not show all horizontally, it stacks vertically no matter the size of the preview in Firefox.

    Note: I have it down as col-sm-4, tried with md as well. Also I am not testing on a server I am just doing it locally.

    Any help would be great thanks!

Leave a Reply