UmBootstrap

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

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.