UmBootstrap
UmBootstrap currently supports Umbraco 13.0.3
Using umbraco Block Grid to create a variety of layout templates
Umbraco is a popular open source content management system (CMS) that allows you to build and manage websites with ease. One of the features that makes Umbraco stand out is the Block Grid, which is a flexible and powerful tool for creating different layout templates for your pages.
What is the Block Grid?
The Block Grid is a component that lets you add blocks of content to your pages, and arrange them in a grid layout. Each block can have its own settings, such as width, height, background color, alignment, etc. You can also nest blocks inside other blocks, creating complex and responsive layouts.
How to use the Block Grid?
To use the Block Grid, you need to create a document type that has a property of type Block List Editor. This property will allow you to add and edit blocks in the backoffice. You can also define the available block types for this property, by creating element types that represent each block.
Once you have created your document type and element types, you can start adding blocks to your pages. To do so, go to the content section of the backoffice, and select the page you want to edit. In the property editor, click on the "Add content" button, and choose a block type from the list. You can then configure the block settings, such as width, height, background color, alignment, etc.
You can also drag and drop blocks to rearrange them in the grid, or resize them by dragging their edges. To nest blocks inside other blocks, simply drag a block over another block, and drop it when you see a blue outline.
How to create different layout templates with the Block Grid?
The Block Grid gives you a lot of flexibility and creativity when it comes to creating layout templates for your pages. You can use different combinations of blocks, widths, heights, colors, alignments, etc., to achieve different effects and styles.
For example, you can create a simple two-column layout by adding two blocks with 50% width each. You can also create a three-column layout by adding three blocks with 33% width each. You can also create more complex layouts by nesting blocks inside other blocks, or using different heights for different blocks.
Here are some examples of layout templates that you can create with the Block Grid:
- A hero section with a full-width image and a text block on top
- A testimonial section with a quote block and an image block side by side
- A feature section with an icon block and a text block in alternating columns
- A gallery section with multiple image blocks in different sizes and alignments
The possibilities are endless with the Block Grid. You can experiment with different block types and settings, and see how they look on your page. You can also preview your page on different devices and screen sizes, and see how the Block Grid adapts to them.
Conclusion
The Block Grid is a powerful feature of Umbraco that allows you to create different layout templates for your pages. You can add blocks of content to your pages, and arrange them in a grid layout. You can also nest blocks inside other blocks, creating complex and
Using umbraco Block Grid to create a variety of layout templates
Bootstrap Grid
Bootstrap 5.1 onwards provides a method for creating layouts using CSS Grid.
It needs to be toggled on to use it but enabling it disables the default flexbox Bootstrap CSS Grid.
Block Grid
Umbraco Block grid works perfectly with CSS grid.
Unfortunately Bootstrap, one of the most common CSS frameworks used by many developers uses CSS Flexbox instead.
Well that was the case until Bootstrap 5.1 where Bootstrap CSS Grid was introduced behind a flag.
Welcome
This is an Umbraco community project
![](/media/oeedxwqe/firefly-business-people-audience-watching-a-talk-at-a-tech-conference_style-flat-colours-flat-des-2.jpg)
Introduction
If you are looking for a way to use Bootstrap web page layouts and components in your Umbraco site, you might want to check out this example website.
It shows how to create common Bootstrap elements such as navbar, carousel, cards, forms, and more using C# Razor Umbraco code.
You can view the source code of each component and copy it to your own site
This website is a community project that aims to help Umbraco developers learn how to use Bootstrap in their projects.
Block Grid
Umbraco Block grid works perfectly with CSS grid.
Unfortunately Bootstrap, one of the most common CSS frameworks used by many developers uses CSS Flexbox instead.
Well that was the case until Bootstrap 5.1 where Bootstrap CSS Grid was introduced behind a flag.