Making Page Layouts Responsive
Toolset Bootstrap theme
brings all the power of the Bootstrap framework with its rich set of components and
, to your WordPress sites.
With our new layout options, you can drop a fully formed Bootstrap grid into any of your pages or posts, directly from the WordPress toolbar. This means that your content will automatically adapt to fit whatever device your site visitor is using to browse your pages, whether it’s a smartphone, tablet or a desktop monitor.
You can experiment with this site, and other responsive designs over at our Discover WP site. Browse our different tutorial sites and see how they appear on your tablet device or desktop. Flip your phone into landscape view and your page layout will adapt automatically.
Understanding Bootstrap’s Grid
The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
On the graphic below you can see that a fluid grid use percents instead of pixels for column widths. In a fluid grid, the addition of all the columns widths and the gutter should be 100%.