Canvas ships with a fully responsive twelve-column grid built on Bootstrap, so you can compose any layout without writing custom CSS. Mix and match column widths to create balanced rows that adapt smoothly from large desktops down to small phones. Every column stacks gracefully on narrow screens, keeping your content readable and your spacing consistent. Use the examples below to see how different proportions behave, then drop the same classes straight into your own pages.
Half Width
Half-width columns split a row into two equal parts, perfect for placing related blocks of text or media side by side. This even split keeps both sections visually balanced and easy to compare at a glance on larger displays.
Half Width
The second half mirrors the first, demonstrating how equal columns sit neatly beside one another. On smaller screens the pair stacks vertically, ensuring the content stays comfortable to read without any horizontal scrolling.
2/3 Width
A two-thirds column is ideal for primary content such as articles, product descriptions or detailed feature copy that needs room to breathe. Pairing it with a complementary one-third sidebar gives you a classic content-and-aside arrangement that feels natural on wide screens. As the viewport shrinks, the two columns reflow into a single stacked sequence so nothing gets cramped. This proportion keeps the main message front and center while still leaving space for supporting details.
1/3 Width
A one-third column makes a tidy sidebar for highlights, calls to action or quick facts that support the main panel. Its compact footprint draws attention without competing with the wider content alongside it on desktop layouts.
1/4 Width
A quarter-width column is the narrowest building block, great for compact widgets, icons or short notes that sit beside a dominant three-quarter panel.
3/4 Width
A three-quarter column gives wide, immersive content the space it deserves while still reserving a slim strip for navigation, filters or quick links. It works beautifully for dashboards, galleries and long-form pages where the focus belongs squarely on the main panel. On tablets and phones the layout collapses into a clean vertical flow, so every element remains easy to scan and tap. Combine it with the narrow quarter column to strike the right balance between depth and utility.
